632
654

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-10-24

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

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

632
654
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
632
654

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?