Bootstrap と Masonry
Bootstrap のグリッドシステムとカードコンポーネントに Masonry を導入しましょう。
Masonry は Bootstrap には含まれていません。次のように CDN などを利用するか、JavaScript プラグインを追加します。
<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>
.row ラッパに data-masonry='{"percentPosition": true }' を追加することで、Bootstrap のレスポンシブグリッドに Masonry の配置システムを組み合わせることができます。
カードタイトルは改行されます
これは下にサポートテキストがあり、追加コンテンツへ自然に注意を引くことができる縦長のカードです。このコンテンツは少し長めです。
吾輩は猫である。名前はまだない。
カードタイトル
これは下にサポートテキストがあり、追加コンテンツへ自然に注意を引くことができるカードです。
3分前に更新
吾輩は猫である。名前はまだない。
カードタイトル
一般的なタイトルと、その下に短い文章を持つカードです。
3分前に更新
吾輩は猫である。名前はまだない。
カードタイトル
タイトルとその下にサポートテキストを持つカードです。このカードは追加のコンテンツがあるため、全体が少し縦長になっています。
3分前に更新