#はじめに
bootstrapのよく使うクラスを一覧にしておきます。備忘録。
#width/height
###width
|
|
| 25% |
.w-25 |
| 50% |
.w-50 |
| 75% |
.w-75 |
| 100% |
.w-100 |
| auto |
.w-auto |
| ###height |
|
|
|
| :-----------------: |
:-------: |
| 25% |
.h-25 |
| 50% |
.h-50 |
| 75% |
.h-75 |
| 100% |
.h-100 |
| auto |
.h-auto |
#margin
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のマージンを0 |
.mt-0 |
.mt-sm-0 |
.mt-md-0 |
.mt-lg-0 |
.mt-xl-0 |
| 右側のマージンを0 |
.mr-0 |
.mr-sm-0 |
.mr-md-0 |
.mr-lg-0 |
.mr-xl-0 |
| 下側のマージンを0 |
.mb-0 |
.mb-sm-0 |
.mb-md-0 |
.mb-lg-0 |
.mb-xl-0 |
| 左側のマージンを0 |
.ml-0 |
.ml-sm-0 |
.ml-md-0 |
.ml-lg-0 |
.ml-xl-0 |
| 左右のマージンを0 |
.mx-0 |
.mx-sm-0 |
.mx-md-0 |
.mx-lg-0 |
.mx-xl-0 |
| 上下のマージンを0 |
.my-0 |
.my-sm-0 |
.my-md-0 |
.my-lg-0 |
.my-xl-0 |
| 全方向のマージンを0 |
.m-0 |
.m-sm-0 |
.m-md-0 |
.m-lg-0 |
.m-xl-0 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のマージンを0.25rem |
.mt-1 |
.mt-sm-1 |
.mt-md-1 |
.mt-lg-1 |
.mt-xl-1 |
| 右側のマージンを0.25rem |
.mr-1 |
.mr-sm-1 |
.mr-md-1 |
.mr-lg-1 |
.mr-xl-1 |
| 下側のマージンを0.25rem |
.mb-1 |
.mb-sm-1 |
.mb-md-1 |
.mb-lg-1 |
.mb-xl-1 |
| 左側のマージンを0.25rem |
.ml-1 |
.ml-sm-1 |
.ml-md-1 |
.ml-lg-1 |
.ml-xl-1 |
| 左右のマージンを0.25rem |
.mx-1 |
.mx-sm-1 |
.mx-md-1 |
.mx-lg-1 |
.mx-xl-1 |
| 上下のマージンを0.25rem |
.my-1 |
.my-sm-1 |
.my-md-1 |
.my-lg-1 |
.my-xl-1 |
| 全方向のマージンを0.25rem |
.m-1 |
.m-sm-1 |
.m-md-1 |
.m-lg-1 |
.m-xl-1 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のマージンを0.5rem |
.mt-2 |
.mt-sm-2 |
.mt-md-2 |
.mt-lg-2 |
.mt-xl-2 |
| 右側のマージンを0.5rem |
.mr-2 |
.mr-sm-2 |
.mr-md-2 |
.mr-lg-2 |
.mr-xl-2 |
| 下側のマージンを0.5rem |
.mb-2 |
.mb-sm-2 |
.mb-md-2 |
.mb-lg-2 |
.mb-xl-2 |
| 左側のマージンを0.5rem |
.ml-2 |
.ml-sm-2 |
.ml-md-2 |
.ml-lg-2 |
.ml-xl-2 |
| 左右のマージンを0.5rem |
.mx-2 |
.mx-sm-2 |
.mx-md-2 |
.mx-lg-2 |
.mx-xl-2 |
| 上下のマージンを0.5rem |
.my-2 |
.my-sm-2 |
.my-md-2 |
.my-lg-2 |
.my-xl-2 |
| 全方向のマージンを0.5rem |
.m-2 |
.m-sm-2 |
.m-md-2 |
.m-lg-2 |
.m-xl-2 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のマージンを1rem |
.mt-3 |
.mt-sm-3 |
.mt-md-3 |
.mt-lg-3 |
.mt-xl-3 |
| 右側のマージンを1rem |
.mr-3 |
.mr-sm-3 |
.mr-md-3 |
.mr-lg-3 |
.mr-xl-3 |
| 下側のマージンを1rem |
.mb-3 |
.mb-sm-3 |
.mb-md-3 |
.mb-lg-3 |
.mb-xl-3 |
| 左側のマージンを1rem |
.ml-3 |
.ml-sm-3 |
.ml-md-3 |
.ml-lg-3 |
.ml-xl-3 |
| 左右のマージンを1rem |
.mx-3 |
.mx-sm-3 |
.mx-md-3 |
.mx-lg-3 |
.mx-xl-3 |
| 上下のマージンを1rem |
.my-3 |
.my-sm-3 |
.my-md-3 |
.my-lg-3 |
.my-xl-3 |
| 全方向のマージンを1rem |
.m-3 |
.m-sm-3 |
.m-md-3 |
.m-lg-3 |
.m-xl-3 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のマージンを1.5rem |
.mt-4 |
.mt-sm-4 |
.mt-md-4 |
.mt-lg-4 |
.mt-xl-4 |
| 右側のマージンを1.5rem |
.mr-4 |
.mr-sm-4 |
.mr-md-4 |
.mr-lg-4 |
.mr-xl-4 |
| 下側のマージンを1.5rem |
.mb-4 |
.mb-sm-4 |
.mb-md-4 |
.mb-lg-4 |
.mb-xl-4 |
| 左側のマージンを1.5rem |
.ml-4 |
.ml-sm-4 |
.ml-md-4 |
.ml-lg-4 |
.ml-xl-4 |
| 左右のマージンを1.5rem |
.mx-4 |
.mx-sm-4 |
.mx-md-4 |
.mx-lg-4 |
.mx-xl-4 |
| 上下のマージンを1.5rem |
.my-4 |
.my-sm-4 |
.my-md-4 |
.my-lg-4 |
.my-xl-4 |
| 全方向のマージンを1.5rem |
.m-4 |
.m-sm-4 |
.m-md-4 |
.m-lg-4 |
.m-xl-4 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のマージンを3rem |
.mt-5 |
.mt-sm-5 |
.mt-md-5 |
.mt-lg-5 |
.mt-xl-5 |
| 右側のマージンを3rem |
.mr-5 |
.mr-sm-5 |
.mr-md-5 |
.mr-lg-5 |
.mr-xl-5 |
| 下側のマージンを3rem |
.mb-5 |
.mb-sm-5 |
.mb-md-5 |
.mb-lg-5 |
.mb-xl-5 |
| 左側のマージンを3rem |
.ml-5 |
.ml-sm-5 |
.ml-md-5 |
.ml-lg-5 |
.ml-xl-5 |
| 左右のマージンを3rem |
.mx-5 |
.mx-sm-5 |
.mx-md-5 |
.mx-lg-5 |
.mx-xl-5 |
| 上下のマージンを3rem |
.my-5 |
.my-sm-5 |
.my-md-5 |
.my-lg-5 |
.my-xl-5 |
| 全方向のマージンを3rem |
.m-5 |
.m-sm-5 |
.m-md-5 |
.m-lg-5 |
.m-xl-5 |
#padding
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のパディングを0 |
.pt-0 |
.pt-sm-0 |
.pt-md-0 |
.pt-lg-0 |
.pt-xl-0 |
| 右側のパディングを0 |
.pr-0 |
.pr-sm-0 |
.pr-md-0 |
.pr-lg-0 |
.pr-xl-0 |
| 下側のパディングを0 |
.pb-0 |
.pb-sm-0 |
.pb-md-0 |
.pb-lg-0 |
.pb-xl-0 |
| 左側のパディングを0 |
.pl-0 |
.pl-sm-0 |
.pl-md-0 |
.pl-lg-0 |
.pl-xl-0 |
| 左右のパディングを0 |
.px-0 |
.px-sm-0 |
.px-md-0 |
.px-lg-0 |
.px-xl-0 |
| 上下のパディングを0 |
.py-0 |
.py-sm-0 |
.py-md-0 |
.py-lg-0 |
.py-xl-0 |
| 全方向のパディングを0 |
.p-0 |
.p-sm-0 |
.p-md-0 |
.p-lg-0 |
.p-xl-0 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のパディングを0.25rem |
.pt-1 |
.pt-sm-1 |
.pt-md-1 |
.pt-lg-1 |
.pt-xl-1 |
| 右側のパディングを0.25rem |
.pr-1 |
.pr-sm-1 |
.pr-md-1 |
.pr-lg-1 |
.pr-xl-1 |
| 下側のパディングを0.25rem |
.pb-1 |
.pb-sm-1 |
.pb-md-1 |
.pb-lg-1 |
.pb-xl-1 |
| 左側のパディングを0.25rem |
.pl-1 |
.pl-sm-1 |
.pl-md-1 |
.pl-lg-1 |
.pl-xl-1 |
| 左右のパディングを0.25rem |
.px-1 |
.px-sm-1 |
.px-md-1 |
.px-lg-1 |
.px-xl-1 |
| 上下のパディングを0.25rem |
.py-1 |
.py-sm-1 |
.py-md-1 |
.py-lg-1 |
.py-xl-1 |
| 全方向のパディングを0.25rem |
.p-1 |
.p-sm-1 |
.p-md-1 |
.p-lg-1 |
.p-xl-1 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のパディングを0.5rem |
.pt-2 |
.pt-sm-2 |
.pt-md-2 |
.pt-lg-2 |
.pt-xl-2 |
| 右側のパディングを0.5rem |
.pr-2 |
.pr-sm-2 |
.pr-md-2 |
.pr-lg-2 |
.pr-xl-2 |
| 下側のパディングを0.5rem |
.pb-2 |
.pb-sm-2 |
.pb-md-2 |
.pb-lg-2 |
.pb-xl-2 |
| 左側のパディングを0.5rem |
.pl-2 |
.pl-sm-2 |
.pl-md-2 |
.pl-lg-2 |
.pl-xl-2 |
| 左右のパディングを0.5rem |
.px-2 |
.px-sm-2 |
.px-md-2 |
.px-lg-2 |
.px-xl-2 |
| 上下のパディングを0.5rem |
.py-2 |
.py-sm-2 |
.py-md-2 |
.py-lg-2 |
.py-xl-2 |
| 全方向のパディングを0.5rem |
.p-2 |
.p-sm-2 |
.p-md-2 |
.p-lg-2 |
.p-xl-2 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のパディングを1rem |
.pt-3 |
.pt-sm-3 |
.pt-md-3 |
.pt-lg-3 |
.pt-xl-3 |
| 右側のパディングを1rem |
.pr-3 |
.pr-sm-3 |
.pr-md-3 |
.pr-lg-3 |
.pr-xl-3 |
| 下側のパディングを1rem |
.pb-3 |
.pb-sm-3 |
.pb-md-3 |
.pb-lg-3 |
.pb-xl-3 |
| 左側のパディングを1rem |
.pl-3 |
.pl-sm-3 |
.pl-md-3 |
.pl-lg-3 |
.pl-xl-3 |
| 左右のパディングを1rem |
.px-3 |
.px-sm-3 |
.px-md-3 |
.px-lg-3 |
.px-xl-3 |
| 上下のパディングを1rem |
.py-3 |
.py-sm-3 |
.py-md-3 |
.py-lg-3 |
.py-xl-3 |
| 全方向のパディングを1rem |
.p-3 |
.p-sm-3 |
.p-md-3 |
.p-lg-3 |
.p-xl-3 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のパディングを1.5rem |
.pt-4 |
.pt-sm-4 |
.pt-md-4 |
.pt-lg-4 |
.pt-xl-4 |
| 右側のパディングを1.5rem |
.pr-4 |
.pr-sm-4 |
.pr-md-4 |
.pr-lg-4 |
.pr-xl-4 |
| 下側のパディングを1.5rem |
.pb-4 |
.pb-sm-4 |
.pb-md-4 |
.pb-lg-4 |
.pb-xl-4 |
| 左側のパディングを1.5rem |
.pl-4 |
.pl-sm-4 |
.pl-md-4 |
.pl-lg-4 |
.pl-xl-4 |
| 左右のパディングを1.5rem |
.px-4 |
.px-sm-4 |
.px-md-4 |
.px-lg-4 |
.px-xl-4 |
| 上下のパディングを1.5rem |
.py-4 |
.py-sm-4 |
.py-md-4 |
.py-lg-4 |
.py-xl-4 |
| 全方向のパディングを1.5rem |
.p-4 |
.p-sm-4 |
.p-md-4 |
.p-lg-4 |
.p-xl-4 |
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 上側のパディングを3rem |
.pt-5 |
.pt-sm-5 |
.pt-md-5 |
.pt-lg-5 |
.pt-xl-5 |
| 右側のパディングを3rem |
.pr-5 |
.pr-sm-5 |
.pr-md-5 |
.pr-lg-5 |
.pr-xl-5 |
| 下側のパディングを3rem |
.pb-5 |
.pb-sm-5 |
.pb-md-5 |
.pb-lg-5 |
.pb-xl-5 |
| 左側のパディングを3rem |
.pl-5 |
.pl-sm-5 |
.pl-md-5 |
.pl-lg-5 |
.pl-xl-5 |
| 左右のパディングを3rem |
.px-5 |
.px-sm-5 |
.px-md-5 |
.px-lg-5 |
.px-xl-5 |
| 上下のパディングを3rem |
.py-5 |
.py-sm-5 |
.py-md-5 |
.py-lg-5 |
.py-xl-5 |
| 全方向のパディングを3rem |
.p-5 |
.p-sm-5 |
.p-md-5 |
.p-lg-5 |
.p-xl-5 |
#text-align/float
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| text-align:left |
.text-left |
.text-sm-left |
.text-md-left |
.text-lg-left |
.text-xl-left |
| text-align:center |
.text-center |
.text-sm-center |
.text-md-center |
.text-lg-center |
.text-xl-center |
| text-align:right |
.text-right |
.text-sm-right |
.text-md-right |
.text-lg-right |
.text-xl-right |
| text-align:justify |
.text-justify |
.text-sm-justify |
.text-md-justify |
.text-lg-justify |
.text-xl-justify |
| インライン要素を改行禁止 |
.text-nowrap |
.text-sm-nowrap |
.text-md-nowrap |
.text-lg-nowrap |
.text-xl-nowrap |
| ブロック要素を中央揃え |
.center-block |
.text-sm-block |
.text-md-block |
.text-lg-block |
.text-xl-block |
|
|
| float:left |
.pull-left |
| float:right |
.pull-right |
| floatの解除 |
.clearfix |
#インライン要素位置
|
|
| ベースライン |
.align-baseline |
| 上端揃え |
.align-top |
| 中央揃え |
.align-middle |
| 下端揃え |
.align-bottom |
| テキストの上端揃え |
.align-text-top |
| テキストの下端揃え |
.align-text-bottom |
#display
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 非表示 |
.d-none |
.d-sm-none |
.d-md-none |
.d-lg-none |
.d-xl-none |
| インライン表示 |
.d-inline |
.d-sm-inline |
.d-md-inline |
.d-lg-inline |
.d-xl-inline |
| インライン-ブロック表示 |
.d-inline-block |
.d-sm-inline-block |
.d-md-inline-block |
.d-lg-inline-block |
.d-xl-inline-block |
| ブロック表示 |
.d-block |
.d-sm-block |
.d-md-block |
.d-lg-block |
.d-xl-block |
| テーブル表示 |
.d-table |
.d-sm-table |
.d-md-table |
.d-lg-table |
.d-xl-table |
| テーブル行表示 |
.d-table-row |
.d-sm-table-row |
.d-md-table-row |
.d-lg-table-row |
.d-xl-table-row |
| テーブルセル表示 |
.d-table-cell |
.d-sm-table-cell |
.d-md-table-cell |
.d-lg-table-cell |
.d-xl-table-cell |
| display:flex |
.d-flex |
.d-sm-flex |
.d-md-flex |
.d-lg-flex |
.d-xl-flex |
| display:inline-flex |
.d-inline-flex |
.d-sm-inline-flex |
.d-md-inline-flex |
.d-lg-inline-flex |
.d-xl-inline-flex |
#Justify content
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| アイテムの左寄せ |
.justify-content-start |
.justify-content-sm-start |
.justify-content-md-start |
.justify-content-lg-start |
.justify-content-xl-start |
| アイテムの右寄せ |
.justify-content-end |
.justify-content-sm-end |
.justify-content-md-end |
.justify-content-lg-end |
.justify-content-xl-end |
| アイテムの左右中央揃え |
.justify-content-center |
.justify-content-sm-center |
.justify-content-md-center |
.justify-content-lg-center |
.justify-content-xl-center |
| アイテムを両端から均等に並べる |
.justify-content-between |
.justify-content-sm-between |
.justify-content-md-between |
.justify-content-lg-between |
.justify-content-xl-between |
| アイテムを等間隔に並べる |
.justify-content-around |
.justify-content-sm-around |
.justify-content-md-around |
.justify-content-lg-around |
.justify-content-xl-around |
#List
###垂直リスト
|
|
| リストの親要素（基本はul）につける |
.list-group |
| リスト（基本はli）につける |
.list-group-item |
| 枠なしリスト |
.list-group-flush |
| リストマーカーを削除 |
.list-unstyled |
#水平リスト
|
全て(≥0px) |
小以上*(≥576px)* |
中以上*(≥768px)* |
大以上*(≥992px)* |
特大*(≥1200px)* |
| 横並びのリスト |
.list-group-horizontal |
.list-group-horizontal-sm |
.list-group-horizontal-md |
.list-group-horizontal-lg |
.list-group-horizontal-xl |
#Border
###四角
|
|
| 四面全てに線 |
.border |
| 上部に線 |
.border-top |
| 右側に線 |
.border-right |
| 下部に線 |
.border-bottom |
| 左側に線 |
.border-left |
###丸
|
|
| すべて角丸 |
.rounded |
| 上部が角丸 |
.rounded-top |
| 右側が角丸 |
.rounded-right |
| 下部が角丸 |
.rounded-bottom |
| 左側が角丸 |
.rounded-left |
| 円 |
.rounded-circle |
| 長い円 |
.rounded-pill |
| 角 |
.rounded-0 |
#Position
|
|
| 通常位置 |
.position-static |
| 相対位置 |
.position-relative |
| 絶対位置 |
.position-absolute |
| 固定位置 |
.position-fixed |
| sticky位置 |
.position-sticky |
| 最上部固定 |
.fixed-top |
| 最下部固定 |
.fixed-bottom |
#Shadow
|
|
| 影なし |
.shadow-none |
| 影（薄い） |
.shadow-sm |
| 影（普通） |
.shadow |
| 影（濃い） |
.shadow-lg |
#font
|
|
| 太め |
.font-weight-bold |
| 普通 |
.font-weight-normal |
| 細め |
.font-weight-light |
| イタリック |
.font-italic |
#おわりに
コピペして使ってくださいませ、、、
