Bootstrap и Masonry

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

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


<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

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

PlaceholderImage cap
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
PlaceholderImage cap
Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has a regular title and short paragraph of text below it.

Last updated 3 mins ago

PlaceholderCard image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago