【Bootstrap】基本のクラスまとめ

概要

最近、Bootstrapを使ってフロントを作っています。
自分への備忘録としてこれまでに使ってきたクラスをまとめておきます。

参照
Bootstrap (ver. 4.5) : https://getbootstrap.jp/

ブレークポイント

• sm : 576px
• md : 768px
• lg : 992px
• xl : 1200px

レイアウト

container

• 固定幅のコンテナ
• 各ブレークポイントごとに最大幅が変わる

row

• グリッドシステムの行を決める要素
• 子にcolを持つことで真価を発揮

col

• グリッドシステムの列を決める要素
• rowの子要素として使う
• col-sm-3
  • sm : 576px未満で縦並び
  • 3 : (3/12 = 25% の幅)

ボタン

btn

• ボタンを作る

btn-primary

• 青ベースのボタンを作る
  • danger : 赤ベース
  • secondary : 灰色ベース

padding, margin

p, m

• p : padding
• m : margin

方向

• t : top
• b : bottom
• l : left
• r : right
• x : left and right (x軸方向)
• y : top and bottom (y方向)
• (blank) : 4方向
• 例) : pt-○ : padding-top: ○;

サイズ

• $spacerに対する比で決まる。デフォルトで1rem=16px
• 0 : $spacer * 0 (=0)
• 1 : $spacer * 0.25 (=4px)
• 2 : $spacer * 0.50 (=8px)
• 3 : $spacer * 0.75 (=12px)
• 4 : $spacer * 1.00 (=16px)
• 5 : $spacer * 1.25 (=20px)
• auto : margin: auto;
• 例) : pt-1 : padding-top: 4px;

Bootstrapの公式リファレンスで示されている代表的な例は下記のとおりです。

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

ちなみに**!important をつけると、CSSファイルの読み込み順に関係なく、スタイルを適用させることができます**。

色

• primary : 青
• secondary : ライトグレー
• success : 緑
• danger : 赤
• warning : 黄
• info : 水色
• light : かなり薄いグレー
• dark : ダークグレー