WordPress

Bootstrapのよく使うクラス

学習 WordPress

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.float-left
float:right.float-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
タイトルとURLをコピーしました