Bootstrap と Masonry

Bootstrap のグリッドシステムとカードコンポーネントに Masonry を導入しましょう。

Masonry は Bootstrap には含まれていません。次のように CDN などを利用するか、JavaScript プラグインを追加します。


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

.row ラッパに data-masonry='{"percentPosition": true }' を追加することで、Bootstrap のレスポンシブグリッドに Masonry の配置システムを組み合わせることができます。


PlaceholderImage cap
カードタイトルは改行されます

これは下にサポートテキストがあり,追加コンテンツへ自然に注意を引くことができる縦長のカードです。このコンテンツは少し長めです。

吾輩は猫である。名前はまだない。

PlaceholderImage cap
カードタイトル

これは下にサポートテキストがあり,追加コンテンツへ自然に注意を引くことができるカードです。

3分前に更新

吾輩は猫である。名前はまだない。

カードタイトル

一般的なタイトルと,その下に短い文章を持つカードです。

3分前に更新

PlaceholderCard image

吾輩は猫である。名前はまだない。

カードタイトル

タイトルとその下にサポートテキストを持つカードです。このカードは追加のコンテンツがあるため,全体が少し縦長になっています。

3分前に更新