Bootstrapのよく使うクラスまとめておいた！！！！

#はじめに
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|




#おわりに
コピペして使ってくださいませ、、、