2024.03.30 2024.04.20

Bootstrapでよく使う便利なクラスを紹介

hebishima.shogo

はい、hebiです。

Bootstrapはウェブ開発で広く利用されるフレームワークであり、多くの便利なクラスが提供されています。その中でもよく利用するクラスをいくつか紹介します。

Contents

グリッド
フレックス
- 水平方向の位置(d-flex justify-content-＊)
- 垂直方向の位置(d-flex align-items-＊)
ボーダー
カラー
最後に

グリッド

グリッドは要素を複数の列に配置することで柔軟かつレスポンシブにするための仕組です。
(スマートフォン、タブレット、PCなど、さまざまな端末でウェブサイトが適切に表示されるようにするための仕組みです。)

row col

rowクラスは、Bootstrapのグリッドシステム内の水平方向のコンテナーを定義します。rowはcontainerまたはcontainer-fluid内に配置され、colを格納します。
colクラスは、row内の列を定義します。

<div class="container text-center">
	<div class="row">
	  <div class="col border border-secoundary">col</div>
	  <div class="col border border-secoundary">col</div>
	  <div class="col border border-secoundary">col</div>
	</div>
</div>

col

row col-＊

Bootstrapのグリッドシステムでは、12のカラムで構成されます。各colは、合計が12になるように幅を指定することができます。
「*」部分に数値を指定することで幅を調整できます。

<div class="container text-center">
  <div class="row">
    <div class="col border border-secoundary">
      col
    </div>
    <div class="col-6 border border-secoundary">
      col-6
    </div>
    <div class="col border border-secoundary">
      col
    </div>
  </div>
  <div class="row">
    <div class="col border border-secoundary">
      col
    </div>
    <div class="col-5 border border-secoundary">
      col-5
    </div>
    <div class="col border border-secoundary">
      col
    </div>
  </div>
</div>

col

col-6

col

col-5

col

「*」部分の数値は合計で12まで指定可能です。超えた場合は改行されます。

<div class="container text-center">
  <div class="row">
    <div class="col-8 border border-secoundary">col-8</div>
    <div class="col-4 border border-secoundary">col-4</div>
  </div>
  <div class="row">
    <div class="col-8 border border-secoundary">col-8</div>
    <div class="col-4 border border-secoundary">col-4</div>
    <div class="col-2 border border-secoundary">col-2</div>
  </div>
</div>

col-8

col-4

col-8

col-4

col-2

row col-sm-＊

スマホの場合は1列、PCの場合は2列のように画面サンズによって列幅を変更する際に利用します。

<div class="container">
  <div class="row">
    <div class="col-sm-6 border border-secoundary">col-sm-6</div>
    <div class="col-sm-6 border border-secoundary">col-sm-6</div>
  </div>
</div>

col-sm-6

PCの場合

スマホの場合

あわせて読みたい

グリッド

フレックス

水平方向の位置(d-flex justify-content-＊)

水平方向に要素を配置したい場合にd-flex justify-content-＊を利用します。

<div class="d-flex justify-content-start border border-secoundary" style="height:100px">
    <div>justify-content-start</div>
</div>
<div class="d-flex justify-content-center border border-secoundary" style="height:100px">
    <div>justify-content-center</div>
</div>
<div class="d-flex justify-content-end border border-secoundary" style="height:100px"">
    <div>justify-content-end</div>
</div>

justify-content-start

justify-content-center

justify-content-end

垂直方向の位置(d-flex align-items-＊)

垂直方向に要素を配置したい場合にd-flex align-items-＊を利用します。

<div class="d-flex align-items-start border border-secoundary" style="height:100px">
    <div>align-items-start</div>
</div>
<div class="d-flex align-items-center border border-secoundary" style="height:100px">
    <div>align-items-center</div>
</div>
<div class="d-flex align-items-end border border-secoundary" style="height:100px">
    <div> align-items-end</div>
</div>

align-items-start

align-items-center

align-items-end

あわせて読みたい

フレックス

ボーダー

border border-*の*部分で色を設定できます。(primary、warningなどなど)
border-1～5の指定で枠線の太さを変更することができます。
rounded-pillで丸くしてみました。

<div class="border border-primary">
    <div>border border-primary</div>
</div>
<div class="border border-5 border-warning rounded-pill">
    <div>border border-warning border-5 rounded-pill</div>
</div>

border border-primary

border border-warning border-5 rounded-pill

あわせて読みたい

ボーダー