ブートストラップカードコンポーネント

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img"
            />
            <div class="card-img-overlay">
              <h4 class="card-title">Overlay Title</h4>
              <p class="card-text">
                Image text overlay
              </p>
              <p>second paragraph</p>
              <p>third paragraph</p>
              <p>fourth paragraph</p>
              <div class="btn-group w-100">
                <button class="btn btn-primary">blue</button>
                <button class="btn btn-info">teal</button>
                <button class="btn btn-danger">red</button>
                <button class="btn btn-dark">black</button>
                <button class="btn btn-success">green</button>
              </div>
            </div>
          </div>

ここでは、widthユーティリティを初めて使用しました。 BTN-GROUPのW-100。

ブートストラップの幅と高さのユーティリティ：

w / h-25/50/75/100 –幅/高さ25％/ 50％/ 75％/ 100％

私たちの場合、100％マイナスCARD-BODYが適用するのと同じパディングを差し引いたもので、ここではCARD-IMG-OVERLAYによって適用されます。

カード列

カードを列に配置して最初に上から下に配置し、列がいっぱいになったときにのみ新しいカードから開始するようにするこのオプションもあります。

<div class="card-columns">
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 1</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 2</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 3</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 4</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
      </div>

すべてのカードをでラップするだけで、次のようになります。

ブートストラップカードのスタイリング

ブートストラップカードのスタイリングに関しては、背景とテキストの色、および境界線の色と外観を変更できます。

スタイルは、カード全体、個別のサブコンポーネント、またはその両方に適用できます。チェックアウトするスタイルのカードは次のとおりです。

<div class="card bg-primary">
          <div class="card-header"><h3>Header 1</h3></div>
          <div class="card-body">
            <p>Body 1</p>
          </div>
          <div class="card-footer"><p>Footer 1</p></div>
        </div>
        <div class="card bg-success text-white">
          <div class="card-header"><h3>Header 2</h3></div>
          <div class="card-body">
            <p>Body 2</p>
          </div>
          <div class="card-footer text-danger"><p>Footer 2</p></div>
        </div>
        <div class="card bg-info text-dark border-danger">
          <div class="card-header"><h3>Header 3</h3></div>
          <div class="card-body">
            <p>Body 3</p>
          </div>
          <div class="card-footer"><p>Footer 3</p></div>
        </div>
        <div class="card border-primary bg-dark text-white">
          <div class="card-header border-success"><h3>Header 4</h3></div>
          <div class="card-body text-danger">
            <p>Body 4</p>
          </div>
          <div class="card-footer bg-warning text-info"><p>Footer 4</p></div>
        </div>

最初のカードは、カード自体に青い背景（BG-PRIMARY）があり、カード全体をスタイリングしています。

2番目のカードは、カード全体に緑色の背景（BG-SUCCESS）と白色のテキスト（TEXT-WHITE）がありますが、フッターに赤色のテキスト（TEXT-DANGER）があり、親要素のTEXT-WHITEを上書きしています。

3番目のカードには、背景が濃い青（BG-INFO）、テキストが黒（TEXT-DARK）、境界線が赤（BORDER-DANGER）です。

最後に、4番目のカードには、カード全体に青い境界線（BORDER-PRIMARY）、黒い背景（BG-DARK）、および白いテキスト（TEXT-WHITE）があります。

ヘッダーに緑色の境界線（BORDER-SUCCESS）、本文に赤色のテキスト（TEXT-DANGER）、フッターに黄色の背景（BG-WARNING）と濃い青色のテキスト（TEXT-INFO）。

レインボーカードは次のようになります。

要約する

Bootstrapカードは、多くのオプションを備えた非常に強力なコンポーネントです。それらは、分離されたまとまりのある全体を表すカードデッキにグループ化することも、単一のエンティティに融合するカードグループにグループ化することもできます。それらは、一列に広げたり、カードの列に広げて別の外観にすることができます。

画像、リスト、リンクをすべてさまざまなレイアウトでホストできます。

また、独自のヘッダーとフッターを設定することもできます。これらはすべてプリセットのスタイルとフォーマットを備えていますが、カスタマイズすることもできます。

これらは非常に柔軟性があり、以前のセットアップがほとんどなく、短時間でBootstrapを使用してどれだけ達成できるかを示す最良の例の1つです。