はじめに
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 |
おわりに
コピペして使ってくださいませ、、、