Bootstrapでよく使うもの

以下、Bootstrap4系をベースに記述。

レイアウト

container

最も外側のdivに使う。
全体のレイアウト。

<div class="container">
</div>

row, col

列を分けたレイアウトにする場合に使う。

<div class="row">
  <div class="col">
    AAA
  </div>
  <div class="col">
    BBB
  </div>
</div>

列幅を調整する場合、全体を12分割したうちのいくつ使うかを指定できる。

<div class="row">
  <div class="col-4">
    AAA
  </div>
  <div class="col-8">
    BBB
  </div>
</div>

margin, padding

0から5までで指定可能。

<div class="m-2 p-2">
</div>

上下左右を個別に指定も可能。
あるいは上下(y)と左右(x)での指定も可能。

<div class="mt-2 mb-5">
</div>

<div class="mx-2">
</div>

autoを指定すると反対方向に詰める。

<div class="ml-auto">
  このdivは右寄せになる
</div>

text-center, text-left, text-right

文字寄せ。
注意点として、divやpなどのblock要素にしか効かない。
spanなどのinline要素に設定しても無視される。

<div class="text-center">
  some text here
</div>

display

モバイルとそれ以外で表示有無を切り替える場合によく使う。

<div class="d-none d-sm-block">
  スマホ画面のときだけ表示
</div>
<div class="d-block d-sm-none">
  スマホ画面以外のときだけ表示
</div>

要素の装飾

text-{color}

文字色を設定する。

<div class="text-dark">
</div>

bg-{color}

背景色を設定する。

<div class="bg-light">
</div>

navbar

navbarは通常、ページ内で1つだけ使う。navは必要に応じて複数可。

<nav class="navbar">
</nav>

nav

<ul class="nav">
  <li class="nav-item">
    <a href="" class="nav-link">some link</a>
  </li>
</ul>

flex-columnをつけるとverticalになる。

<ul class="nav flex-column">
  <li class="nav-item">
    <a href="" class="nav-link">some link</a>
  </li>
</ul>

table

tableが自動で装飾される。

<table class="table">
</table>

img

画像をレスポンシブにする。

<img src="..." class="img-fluid" alt="...">

button

<button type="button" class="btn btn-primary">
</button>

form

<form>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control">
  </div>
</form>