Bootstrap и Masonry

Интегрируйте Masonry с сеткой Bootstrap и компонентом карточек.

Masonry не входит в Bootstrap. Добавьте его, включив плагин JavaScript вручную или используя CDN, например:


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

Добавив data-masonry='{"percentPosition": true }' в оболочку .row, мы можем объединить возможности адаптивной сетки Bootstrap и позиционирования Masonry.

PlaceholderЗаглушка изображения
Заголовок карточки, который переносится на новую строку

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

A well-known quote, contained in a blockquote element.

Кто-то известный в Заголовке Источника
PlaceholderЗаглушка изображения
Заголовок карточки

This card has supporting text below as a natural lead-in to additional content.

Последнее обновление: 3 мин. назад

A well-known quote, contained in a blockquote element.

Кто-то известный в Заголовке Источника
Заголовок карточки

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

Последнее обновление: 3 мин. назад

PlaceholderИзображение карточки

A well-known quote, contained in a blockquote element.

Кто-то известный в Заголовке Источника
Заголовок карточки

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

Последнее обновление: 3 мин. назад