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のアイテム位置（パーセント値で設定）が組み合わせられる。
HTMLの設定については、Masonryレイアウトに掲載。
新しい行に折り返すカード1のタイトル
これは、追加コンテンツへの自然な引き込みとして、以下のテキストをサポートする長いカードです。 このコンテンツはもう少し長くなっています。
カード2：blockquote要素に含まれるよく知られた引用。
カード3のタイトル
このカードには、追加のコンテンツへの自然な導入として下にサポートテキストを入れています。
最終更新3分前
カード4：blockquote要素に含まれるよく知られた引用。
カード5のタイトル
このカードには、通常のタイトルとその下にテキストの短い段落を入れています。
最終更新3分前
カード7：blockquote要素に含まれるよく知られた引用。
カード8のタイトル
これはタイトルとその下にサポートテキストを持つもう一つのカード。このカードには、全体的にわずかに背を高くするための追加コンテンツを入れています。
最終更新3分前