【Bootstrap】要素を縦横並べて表示（row、col）

Bootstrapの「row」「col」classを使用し要素を並べる方法を紹介します。

（Bootstrap v5を使用しています。）

１行３列表示

HTMLを書いてみると

<div class="row">
  <div class="col bg-primary">
    １個目
  </div>
  <div class="col bg-secondary">
    ２個目
  </div>
  <div class="col bg-success">
    ３個目
  </div>
</div>

イメージは

ブラウザで表示すると

２行３列表示

HTMLを書いてみると

<div class="row">
  <div class="col bg-primary">
    １個目
  </div>
  <div class="col bg-secondary">
    ２個目
  </div>
  <div class="col bg-success">
    ３個目
  </div>
</div>
<div class="row">
  <div class="col bg-danger">
    ４個目
  </div>
  <div class="col bg-warning">
    ５個目
  </div>
  <div class="col bg-info">
    ６個目
  </div>
</div>

イメージは

ブラウザで表示すると

まとめ

行を追加したい場合「row」、列を追加したい場合「col」をclassに追加する。

「row」「col」を使用した情報を追加しました。

【Bootstrap】表示する画面に合わせて、横に並べる要素数を変える(row、col）

表示する画面（パソコン・スマートフォン）に合わせて、横に並べる要素数を変える方法を説明します。

himatoto.com

2023.04.08