MENU
プログラミング

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

hebishima.shogo

はい、hebiです。

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

Contents
  1. グリッド
  2. フレックス
  3. ボーダー
  4. カラー
  5. 最後に
スポンサーリンク

グリッド

グリッドは要素を複数の列に配置することで柔軟かつレスポンシブにするための仕組です。
(スマートフォン、タブレット、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
col
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
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
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
あわせて読みたい
ボーダー
ボーダー

カラー

カラーも準備されています。

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

あわせて読みたい
カラー
カラー

最後に

今後もどんどん使えるクラスを追記していきます！ぜひ参考にしてみてください！
最後までお読みくださいましてありがとうございました(^^)/

スポンサーリンク

ABOUT ME
hebi
hebi
エンジニア
フルスタックエンジニアとして活躍中。
HTML5プロフェッショナル認定Level1、Level2所持者です。

未経験の方でも簡単にプログラミングを学べるようにと情報を発信しております。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました