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

Интегрируйте 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.

Кто-то известный в Source Title
Placeholder Image cap
Название карты

Эта карточка имеет вспомогательный текст ниже, который является естественным вводом к дополнительному контенту.

Последнее обновление 3 минуты назад

Известная цитата, содержащаяся в элементе blockquote.

Кто-то известный в Source Title
Название карты

Эта карточка имеет обычный заголовок и короткий абзац текста под ним.

Последнее обновление 3 минуты назад

Placeholder Card image

Известная цитата, содержащаяся в элементе blockquote.

Кто-то известный в Source Title
Название карты

Это еще одна карта с заголовком и вспомогательным текстом ниже. Эта карта имеет дополнительный контент, чтобы сделать ее немного выше.

Последнее обновление 3 минуты назад