Bootstrap dan Masonry

Integrasikan Masonry dengan sistem grid Bootstrap dan komponen kartu.

Masonry tidak termasuk dalam Bootstrap. Tambahkan dengan memasukkan plugin JavaScript secara manual, atau menggunakan CDN seperti:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

Dengan menambahkan data-masonry='{"percentPosition": true }'pembungkus .row, kita dapat menggabungkan kekuatan grid responsif Bootstrap dan pemosisian Masonry.

Placeholder Image cap
Judul kartu yang membungkus ke baris baru

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber
Placeholder Image cap
Judul kartu

Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Terakhir diperbarui 3 menit yang lalu

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber
Judul kartu

Kartu ini memiliki judul reguler dan teks paragraf pendek di bawahnya.

Terakhir diperbarui 3 menit yang lalu

Placeholder Card image

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber
Judul kartu

Ini adalah kartu lain dengan judul dan teks pendukung di bawah ini. Kartu ini memiliki beberapa konten tambahan untuk membuatnya sedikit lebih tinggi secara keseluruhan.

Terakhir diperbarui 3 menit yang lalu