Бутстрап і масонство

Інтеграція Masonry із сітковою системою Bootstrap і компонентом карток.

Масонство не включено в Bootstrap. Додайте його, включивши плагін JavaScript вручну або використовуючи CDN так:


<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>
  

Додавши data-masonry='{"percentPosition": true }'до .rowобгортки, ми можемо поєднати можливості адаптивної сітки Bootstrap і позиціонування Masonry.


Placeholder Image cap
Заголовок картки, який переноситься на новий рядок

Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.

Добре відома цитата, що міститься в елементі blockquote.

Placeholder Image cap
Назва картки

Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.

Востаннє оновлено 3 хвилини тому

Добре відома цитата, що міститься в елементі blockquote.

Назва картки

Ця картка має звичайний заголовок і короткий абзац тексту під ним.

Востаннє оновлено 3 хвилини тому

Placeholder Card image

Добре відома цитата, що міститься в елементі blockquote.

Назва картки

Це ще одна картка з назвою та допоміжним текстом нижче. Ця картка має додатковий вміст, щоб зробити її трохи вищою загалом.

Востаннє оновлено 3 хвилини тому