Bootstrap5 よく使うクラス一覧(早見表) | リモスキBootstrap 5 に標準で用意されているクラスのうち、よく使うものを一覧にしてみました。カスタマイズの参考用です。
Bootstrap5 よく使うクラス一覧(早見表)
Bootstrap 5 に標準で用意されているクラスのうち、よく使うものを一覧にしてみました。
カスタマイズの参考用です。
この一覧のクラスを html に指定することで、Bootstrap 5 標準の CSS が反映されます。
例えば次のようにクラスを指定すると、
<p class="mt-4">テキスト</p>
指定した p タグに、mt-4 つまりmargin-top:1.5rem
が反映されます。
目次
- ブレイクポイント
- テキスト
- 余白
- 線
- 角丸(border-radius)
- 影(box-shadow)
- ディスプレイ(display)
- 要素のサイズ(width, height)
- 垂直配置(vertical-align)
- ポジション(position)
- その他(公式リンクのみ)
ブレイクポイント
Bootstrap のブレイクポイントは、モバイルファーストで設定されています。
infix | 画面幅 | 主な想定デバイス |
---|---|---|
なし | 0px 以上 | スマートフォン(・タブレット・PC) |
sm | 576px 以上 | タブレット |
md | 768px 以上 | タブレット・PC |
lg | 992px 以上 | PC |
xl | 1200px 以上 | PC |
xxl | 1400px 以上 | PC |
sm、md、lg、xl、xxl をレスポンシブ対応のクラスに付け加えると、ブレイクポイントに応じて CSS が反映されます。
例
- d-sm-none (画面幅576px以上で非表示)
- text-md-center (画面幅768px以上でテキスト中央寄せ)
- mx-lg-4 (画面幅1200px以上で左右 margin 1.5rem)
Breakpoints (ブレイクポイント) · Bootstrap v5.0
テキスト
左右配置(text-align)
すべて | ≧576px | ≧768px | ≧992px | ≧1200px | |
---|---|---|---|---|---|
左寄せ | text-start | text-sm-start | text-md-start | text-lg-start | text-xl-start |
中央寄せ | text-center | text-sm-center | text-md-center | text-lg-center | text-xl-center |
右寄せ | text-end | text-sm-end | text-md-end | text-lg-end | text-xl-end |
文字の大きさ(font-size)
クラス名 | 文字サイズ 画面幅<1200px | 文字サイズ 画面幅≧1200px | 表示サンプル |
---|---|---|---|
fs-1 | calc(1.375rem + 1.5vw) | 2.5rem | 文字サイズの確認 |
fs-2 | calc(1.325rem + .9vw) | 2rem | 文字サイズの確認 |
fs-3 | calc(1.3rem + .6vw) | 1.75rem | 文字サイズの確認 |
fs-4 | calc(1.275rem + .3vw) | 1.5rem | 文字サイズの確認 |
fs-5 | 1.25rem | 1.25rem | 文字サイズの確認 |
fs-6 | 1rem | 1rem | 文字サイズの確認 |
calc は計算式を表します。
vw は viewport width の略で、ビューポート(画面)の幅に対する割合です。
calc() – CSS: カスケーディングスタイルシート | MDN
【CSS】vw、vh、vmin、vmaxとは?基本的な使い方 | JAJAAAN
文字の太さ(font-weight)
クラス名 | 文字の太さ | 表示サンプル |
---|---|---|
fw-bold | 太字 | 文字の確認 123 |
fw-normal | 通常 | 文字の確認 123 |
fw-light | 細字 | 文字の確認 123 |
fw-bolder | 親要素より太い | 文字の確認 123 |
fw-lighter | 親要素より細い | 文字の確認 123 |
文字のスタイル(font-style)
クラス名 | スタイル | 表示サンプル |
---|---|---|
fst-normal | 通常 | 文字の確認 123 |
fst-italic | 斜体 | 文字の確認 123 |
文字装飾(text-decoration)
クラス名 | 文字装飾 | 表示サンプル |
---|---|---|
text-decoration-underline | 下線 | 文字の確認 123 |
text-decoration-line-through | 打ち消し線 | 文字の確認 123 |
text-decoration-none | 文字装飾なし | 文字の確認 123 |
行間(line-height)
クラス名 | 行間 | 表示サンプル |
---|---|---|
lh-1 | 1 | 行間の確認 行間の確認 |
lh-sm | 1.25 | 行間の確認 行間の確認 |
lh-base | 1.5 | 行間の確認 行間の確認 |
lh-lg | 2 | 行間の確認 行間の確認 |
色のリセット
クラス名 | リセット |
---|---|
text-reset | テキストやリンクの色をリセットし、親要素から継承 |
余白
margin
margin 0
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 0 | mt-0 | mt-sm-0 | mt-md-0 | mt-lg-0 | mt-xl-0 | mt-xxl-0 |
下 0 | mb-0 | mb-sm-0 | mb-md-0 | mb-lg-0 | mb-xl-0 | mb-xxl-0 |
左 0 | ms-0 | ms-sm-0 | ms-md-0 | ms-lg-0 | ms-xl-0 | ms-xxl-0 |
右 0 | me-0 | me-sm-0 | me-md-0 | me-lg-0 | me-xl-0 | me-xxl-0 |
左右 0 | mx-0 | mx-sm-0 | mx-md-0 | mx-lg-0 | mx-xl-0 | mx-xxl-0 |
上下 0 | my-0 | my-sm-0 | my-md-0 | my-lg-0 | my-xl-0 | my-xxl-0 |
全辺 0 | m-0 | m-sm-0 | m-md-0 | m-lg-0 | m-xl-0 | m-xxl-0 |
※ クラス名は、margin の m の後ろに、上(top)、下(bottom)、左(start)、右(end)の頭文字を付け加えて設定されています。
margin 0.25rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 0.25rem | mt-1 | mt-sm-1 | mt-md-1 | mt-lg-1 | mt-xl-1 | mt-xxl-1 |
下 0.25rem | mb-1 | mb-sm-1 | mb-md-1 | mb-lg-1 | mb-xl-1 | mb-xxl-1 |
左 0.25rem | ms-1 | ms-sm-1 | ms-md-1 | ms-lg-1 | ms-xl-1 | ms-xxl-1 |
右 0.25rem | me-1 | me-sm-1 | me-md-1 | me-lg-1 | me-xl-1 | me-xxl-1 |
左右 0.25rem | mx-1 | mx-sm-1 | mx-md-1 | mx-lg-1 | mx-xl-1 | mx-xxl-1 |
上下 0.25rem | my-1 | my-sm-1 | my-md-1 | my-lg-1 | my-xl-1 | my-xxl-1 |
全辺 0.25rem | m-1 | m-sm-1 | m-md-1 | m-lg-1 | m-xl-1 | m-xxl-1 |
margin 0.5rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 0.5rem | mt-2 | mt-sm-2 | mt-md-2 | mt-lg-2 | mt-xl-2 | mt-xxl-2 |
下 0.5rem | mb-2 | mb-sm-2 | mb-md-2 | mb-lg-2 | mb-xl-2 | mb-xxl-2 |
左 0.5rem | ms-2 | ms-sm-2 | ms-md-2 | ms-lg-2 | ms-xl-2 | ms-xxl-2 |
右 0.5rem | me-2 | me-sm-2 | me-md-2 | me-lg-2 | me-xl-2 | me-xxl-2 |
左右 0.5rem | mx-2 | mx-sm-2 | mx-md-2 | mx-lg-2 | mx-xl-2 | mx-xxl-2 |
上下 0.5rem | my-2 | my-sm-2 | my-md-2 | my-lg-2 | my-xl-2 | my-xxl-2 |
全辺 0.5rem | m-2 | m-sm-2 | m-md-2 | m-lg-2 | m-xl-2 | m-xxl-2 |
margin 1rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 1rem | mt-3 | mt-sm-3 | mt-md-3 | mt-lg-3 | mt-xl-3 | mt-xxl-3 |
下 1rem | mb-3 | mb-sm-3 | mb-md-3 | mb-lg-3 | mb-xl-3 | mb-xxl-3 |
左 1rem | ms-3 | ms-sm-3 | ms-md-3 | ms-lg-3 | ms-xl-3 | ms-xxl-3 |
右 1rem | me-3 | me-sm-3 | me-md-3 | me-lg-3 | me-xl-3 | me-xxl-3 |
左右 1rem | mx-3 | mx-sm-3 | mx-md-3 | mx-lg-3 | mx-xl-3 | mx-xxl-3 |
上下 1rem | my-3 | my-sm-3 | my-md-3 | my-lg-3 | my-xl-3 | my-xxl-3 |
全辺 1rem | m-3 | m-sm-3 | m-md-3 | m-lg-3 | m-xl-3 | m-xxl-3 |
margin 1.5rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 1.5rem | mt-4 | mt-sm-4 | mt-md-4 | mt-lg-4 | mt-xl-4 | mt-xxl-4 |
下 1.5rem | mb-4 | mb-sm-4 | mb-md-4 | mb-lg-4 | mb-xl-4 | mb-xxl-4 |
左 1.5rem | ms-4 | ms-sm-4 | ms-md-4 | ms-lg-4 | ms-xl-4 | ms-xxl-4 |
右 1.5rem | me-4 | me-sm-4 | me-md-4 | me-lg-4 | me-xl-4 | me-xxl-4 |
左右 1.5rem | mx-4 | mx-sm-4 | mx-md-4 | mx-lg-4 | mx-xl-4 | mx-xxl-4 |
上下 1.5rem | my-4 | my-sm-4 | my-md-4 | my-lg-4 | my-xl-4 | my-xxl-4 |
全辺 1.5rem | m-4 | m-sm-4 | m-md-4 | m-lg-4 | m-xl-4 | m-xxl-4 |
margin 3rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 3rem | mt-5 | mt-sm-5 | mt-md-5 | mt-lg-5 | mt-xl-5 | mt-xxl-5 |
下 3rem | mb-5 | mb-sm-5 | mb-md-5 | mb-lg-5 | mb-xl-5 | mb-xxl-5 |
左 3rem | ms-5 | ms-sm-5 | ms-md-5 | ms-lg-5 | ms-xl-5 | ms-xxl-5 |
右 3rem | me-5 | me-sm-5 | me-md-5 | me-lg-5 | me-xl-5 | me-xxl-5 |
左右 3rem | mx-5 | mx-sm-5 | mx-md-5 | mx-lg-5 | mx-xl-5 | mx-xxl-5 |
上下 3rem | my-5 | my-sm-5 | my-md-5 | my-lg-5 | my-xl-5 | my-xxl-5 |
全辺 3rem | m-5 | m-sm-5 | m-md-5 | m-lg-5 | m-xl-5 | m-xxl-5 |
margin auto
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 auto | mt-auto | mt-sm-auto | mt-md-auto | mt-lg-auto | mt-xl-auto | mt-xxl-auto |
下 auto | mb-auto | mb-sm-auto | mb-md-auto | mb-lg-auto | mb-xl-auto | mb-xxl-auto |
左 auto | ms-auto | ms-sm-auto | ms-md-auto | ms-lg-auto | ms-xl-auto | ms-xxl-auto |
右 auto | me-auto | me-sm-auto | me-md-auto | me-lg-auto | me-xl-auto | me-xxl-auto |
左右 auto | mx-auto | mx-sm-auto | mx-md-auto | mx-lg-auto | mx-xl-auto | mx-xxl-auto |
上下 auto | my-auto | my-sm-auto | my-md-auto | my-lg-auto | my-xl-auto | my-xxl-auto |
全辺 auto | m-auto | m-sm-auto | m-md-auto | m-lg-auto | m-xl-auto | m-xxl-auto |
複数のクラスを指定してレスポンシブにすることができます。
<div class="m-2 m-lg-4">スマホで margin 0.5rem、画面幅992px以上で margin 1.5rem</div>
Spacing(スペーシング) · Bootstrap v5.0
padding
padding 0
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 0 | pt-0 | pt-sm-0 | pt-md-0 | pt-lg-0 | pt-xl-0 | pt-xxl-0 |
下 0 | pb-0 | pb-sm-0 | pb-md-0 | pb-lg-0 | pb-xl-0 | pb-xxl-0 |
左 0 | ps-0 | ps-sm-0 | ps-md-0 | ps-lg-0 | ps-xl-0 | ps-xxl-0 |
右 0 | pe-0 | pe-sm-0 | pe-md-0 | pe-lg-0 | pe-xl-0 | pe-xxl-0 |
左右 0 | px-0 | px-sm-0 | px-md-0 | px-lg-0 | px-xl-0 | px-xxl-0 |
上下 0 | py-0 | py-sm-0 | py-md-0 | py-lg-0 | py-xl-0 | py-xxl-0 |
全辺 0 | p-0 | p-sm-0 | p-md-0 | p-lg-0 | p-xl-0 | p-xxl-0 |
※ クラス名は、padding の p の後ろに、上(top)、下(bottom)、左(start)、右(end)の頭文字を付け加えて設定されています。
padding 0.25rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 0.25rem | pt-1 | pt-sm-1 | pt-md-1 | pt-lg-1 | pt-xl-1 | pt-xxl-1 |
下 0.25rem | pb-1 | pb-sm-1 | pb-md-1 | pb-lg-1 | pb-xl-1 | pb-xxl-1 |
左 0.25rem | ps-1 | ps-sm-1 | ps-md-1 | ps-lg-1 | ps-xl-1 | ps-xxl-1 |
右 0.25rem | pe-1 | pe-sm-1 | pe-md-1 | pe-lg-1 | pe-xl-1 | pe-xxl-1 |
左右 0.25rem | px-1 | px-sm-1 | px-md-1 | px-lg-1 | px-xl-1 | px-xxl-1 |
上下 0.25rem | py-1 | py-sm-1 | py-md-1 | py-lg-1 | py-xl-1 | py-xxl-1 |
全辺 0.25rem | p-1 | p-sm-1 | p-md-1 | p-lg-1 | p-xl-1 | p-xxl-1 |
padding 0.5rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 0.5rem | pt-2 | pt-sm-2 | pt-md-2 | pt-lg-2 | pt-xl-2 | pt-xxl-2 |
下 0.5rem | pb-2 | pb-sm-2 | pb-md-2 | pb-lg-2 | pb-xl-2 | pb-xxl-2 |
左 0.5rem | ps-2 | ps-sm-2 | ps-md-2 | ps-lg-2 | ps-xl-2 | ps-xxl-2 |
右 0.5rem | pe-2 | pe-sm-2 | pe-md-2 | pe-lg-2 | pe-xl-2 | pe-xxl-2 |
左右 0.5rem | px-2 | px-sm-2 | px-md-2 | px-lg-2 | px-xl-2 | px-xxl-2 |
上下 0.5rem | py-2 | py-sm-2 | py-md-2 | py-lg-2 | py-xl-2 | py-xxl-2 |
全辺 0.5rem | p-2 | p-sm-2 | p-md-2 | p-lg-2 | p-xl-2 | p-xxl-2 |
padding 1rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 1rem | pt-3 | pt-sm-3 | pt-md-3 | pt-lg-3 | pt-xl-3 | pt-xxl-3 |
下 1rem | pb-3 | pb-sm-3 | pb-md-3 | pb-lg-3 | pb-xl-3 | pb-xxl-3 |
左 1rem | ps-3 | ps-sm-3 | ps-md-3 | ps-lg-3 | ps-xl-3 | ps-xxl-3 |
右 1rem | pe-3 | pe-sm-3 | pe-md-3 | pe-lg-3 | pe-xl-3 | pe-xxl-3 |
左右 1rem | px-3 | px-sm-3 | px-md-3 | px-lg-3 | px-xl-3 | px-xxl-3 |
上下 1rem | py-3 | py-sm-3 | py-md-3 | py-lg-3 | py-xl-3 | py-xxl-3 |
全辺 1rem | p-3 | p-sm-3 | p-md-3 | p-lg-3 | p-xl-3 | p-xxl-3 |
padding 1.5rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 1.5rem | pt-4 | pt-sm-4 | pt-md-4 | pt-lg-4 | pt-xl-4 | pt-xxl-4 |
下 1.5rem | pb-4 | pb-sm-4 | pb-md-4 | pb-lg-4 | pb-xl-4 | pb-xxl-4 |
左 1.5rem | ps-4 | ps-sm-4 | ps-md-4 | ps-lg-4 | ps-xl-4 | ps-xxl-4 |
右 1.5rem | pe-4 | pe-sm-4 | pe-md-4 | pe-lg-4 | pe-xl-4 | pe-xxl-4 |
左右 1.5rem | px-4 | px-sm-4 | px-md-4 | px-lg-4 | px-xl-4 | px-xxl-4 |
上下 1.5rem | py-4 | py-sm-4 | py-md-4 | py-lg-4 | py-xl-4 | py-xxl-4 |
全辺 1.5rem | p-4 | p-sm-4 | p-md-4 | p-lg-4 | p-xl-4 | p-xxl-4 |
padding 3rem
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 3rem | pt-5 | pt-sm-5 | pt-md-5 | pt-lg-5 | pt-xl-5 | pt-xxl-5 |
下 3rem | pb-5 | pb-sm-5 | pb-md-5 | pb-lg-5 | pb-xl-5 | pb-xxl-5 |
左 3rem | ps-5 | ps-sm-5 | ps-md-5 | ps-lg-5 | ps-xl-5 | ps-xxl-5 |
右 3rem | pe-5 | pe-sm-5 | pe-md-5 | pe-lg-5 | pe-xl-5 | pe-xxl-5 |
左右 3rem | px-5 | px-sm-5 | px-md-5 | px-lg-5 | px-xl-5 | px-xxl-5 |
上下 3rem | py-5 | py-sm-5 | py-md-5 | py-lg-5 | py-xl-5 | py-xxl-5 |
全辺 3rem | p-5 | p-sm-5 | p-md-5 | p-lg-5 | p-xl-5 | p-xxl-5 |
padding auto
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
上 auto | pt-auto | pt-sm-auto | pt-md-auto | pt-lg-auto | pt-xl-auto | pt-xxl-auto |
下 auto | pb-auto | pb-sm-auto | pb-md-auto | pb-lg-auto | pb-xl-auto | pb-xxl-auto |
左 auto | ps-auto | ps-sm-auto | ps-md-auto | ps-lg-auto | ps-xl-auto | ps-xxl-auto |
右 auto | pe-auto | pe-sm-auto | pe-md-auto | pe-lg-auto | pe-xl-auto | pe-xxl-auto |
左右 auto | px-auto | px-sm-auto | px-md-auto | px-lg-auto | px-xl-auto | px-xxl-auto |
上下 auto | py-auto | py-sm-auto | py-md-auto | py-lg-auto | py-xl-auto | py-xxl-auto |
全辺 auto | p-auto | p-sm-auto | p-md-auto | p-lg-auto | p-xl-auto | p-xxl-auto |
複数のクラスをつけてレスポンシブにすることができます。
<div class="p-2 p-sm-3">スマホで padding 0.5rem、画面幅576px以上で padding 1rem</div>
Spacing(スペーシング) · Bootstrap v5.0https://googleads.g.doubleclick.net/pagead/ads?gdpr=0&us_privacy=1—&client=ca-pub-9546478748038799&output=html&h=184&slotname=9114411769&adk=2706452474&adf=3289179708&pi=t.ma~as.9114411769&w=734&fwrn=4&lmt=1697449106&rafmt=11&format=734×184&url=https%3A%2F%2Fwww.limosuki.com%2F2022%2F02%2Fbootstrap5-class.html&wgl=1&uach=WyJXaW5kb3dzIiwiMTUuMC4wIiwieDg2IiwiIiwiMTE4LjAuNTk5My43MCIsW10sMCxudWxsLCI2NCIsW1siQ2hyb21pdW0iLCIxMTguMC41OTkzLjcwIl0sWyJHb29nbGUgQ2hyb21lIiwiMTE4LjAuNTk5My43MCJdLFsiTm90PUE_QnJhbmQiLCI5OS4wLjAuMCJdXSwwXQ..&dt=1697456118848&bpp=1&bdt=2332&idt=248&shv=r20231011&mjsv=m202310110101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D9dd78613f65c93a1%3AT%3D1697456125%3ART%3D1697456125%3AS%3DALNI_Ma6DX_qClk9RKjLy744cZ5soxh8Yg&gpic=UID%3D00000c640af27a2e%3AT%3D1697456125%3ART%3D1697456125%3AS%3DALNI_MZd6dXtdd3VuCJ3gQ5ZLJN5UBQfZg&prev_fmts=0x0%2C734x90%2C734x280&nras=1&correlator=7698550174336&frm=20&pv=1&ga_vid=1897353020.1697456119&ga_sid=1697456119&ga_hid=998564759&ga_fc=1&rplot=4&u_tz=540&u_his=3&u_h=1080&u_w=1920&u_ah=1032&u_aw=1920&u_cd=24&u_sd=1&dmc=8&adx=585&ady=14061&biw=1903&bih=955&scr_x=0&scr_y=10256&eid=44759927%2C44759876%2C31078362%2C31078600%2C44805099%2C44805112%2C44805336%2C31078773%2C31078663%2C31078665%2C31078668%2C31078670&oid=2&psts=AOrYGskEZtLMh-gFB9ukpXICvwsfSwCEQs2XoyNYUDLdF72uCK0_uBOsHGIB5n8qBx9hO8F5T3g_YAA0r-ikrwIQO6cfqX0F&pvsid=692958145331495&tmod=1158460556&uas=1&nvt=1&ref=https%3A%2F%2Fwww.google.com%2F&fc=1920&brdim=1920%2C0%2C1920%2C0%2C1920%2C0%2C1920%2C1032%2C1920%2C955&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&td=1&nt=1&ifi=4&uci=a!4&btvi=3&fsb=1&xpc=ShP0IDzR2L&p=https%3A//www.limosuki.com&dtd=M
線
線を引く(border)
クラス名 | 線の場所 |
---|---|
border | 上下左右 |
border-top | 上 |
border-end | 右 |
border-bottom | 下 |
border-start | 左 |
線の太さ(border-width)
クラス名 | 線の太さ |
---|---|
border-1 | 1px |
border-2 | 2px |
border-3 | 3px |
border-4 | 4px |
border-5 | 5px |
線の太さは、次のように border クラスと組み合わせて指定します。
<div class="border border-1">1pxの線を引く</div>
他にも、3辺に線を引くクラス、線の色を指定できるクラスがあります。詳細は以下の公式ドキュメント参照。
Borders (ボーダー) · Bootstrap v5.0
角丸(border-radius)
クラス名 | 角丸の位置 | 角丸のサイズ |
---|---|---|
rounded | すべての角 | 0.25rem |
rounded-top | 左上・右上 | 0.25rem |
rounded-end | 右上・右下 | 0.25rem |
rounded-bottom | 右下・左下 | 0.25rem |
rounded-start | 左上・左下 | 0.25rem |
rounded-circle | すべての角 | 50%(円形) |
rounded-pill | すべての角 | 50rem(楕円形) |
Borders (ボーダー) · Bootstrap v5.0
影(box-shadow)
クラス名 | 影の大きさ | box-shadow の値 |
---|---|---|
shadow-none | 影なし | |
shadow-sm | 小さい影 | 0 0.125rem 0.25rem rgba(0,0,0,.075) |
shadow | 通常の影 | 0 0.5rem 1rem rgba(0,0,0,.15) |
shadow-lg | 大きい影 | 0 1rem 3rem rgba(0,0,0,.175) |
小さい影
通常の影
大きい影
Shadows(シャドウ) · Bootstrap v5.0
ディスプレイ(display)
≧0px | ≧576px | ≧768px | ≧992px | ≧1200px | ≧1400px | |
---|---|---|---|---|---|---|
非表示 | d-none | d-sm-none | d-md-none | d-lg-none | d-xl-none | d-xxl-none |
インライン | d-inline | d-sm-inline | d-md-inline | d-lg-inline | d-xl-inline | d-xxl-inline |
インラインブロック | d-inline-block | d-sm-inline-block | d-md-inline-block | d-lg-inline-block | d-xl-inline-block | d-xxl-inline-block |
ブロック | d-block | d-sm-block | d-md-block | d-lg-block | d-xl-block | d-xxl-block |
グリッド | d-grid | d-sm-grid | d-md-grid | d-lg-grid | d-xl-grid | d-xxl-grid |
テーブル | d-table | d-sm-table | d-md-table | d-lg-table | d-xl-table | d-xxl-table |
テーブルセル | d-table-cell | d-sm-table-cell | d-md-table-cell | d-lg-table-cell | d-xl-table-cell | d-xxl-table-cell |
テーブル行 | d-table-row | d-sm-table-row | d-md-table-row | d-lg-table-row | d-xl-table-row | d-xxl-table-row |
フレックス | d-flex | d-sm-flex | d-md-flex | d-lg-flex | d-xl-flex | d-xxl-flex |
インラインフレックス | d-inline-flex | d-sm-inline-flex | d-md-inline-flex | d-lg-inline-flex | d-xl-inline-flex | d-xxl-inline-flex |
次のように複数のクラスをうけてレスポンシブにできます。
<div class="d-none d-sm-block">スマホで非表示、画面幅576px以上でブロック要素</div>
<div class="d-block d-sm-none">スマホでブロック要素、画面幅576px以上で非表示</div>
Display property (ディスプレイ) · Bootstrap v5.0
※ Flex レイアウトには詳細クラスが多く設定されています。使う場合は公式サイトを参照ください。
要素のサイズ(width, height)
width を指定
クラス名 | 横幅 |
---|---|
w-25 | Width 25% |
w-50 | Width 50% |
w-75 | Width 75% |
w-100 | Width 100% |
w-auto | Width auto |
mw-100 | Max-width 100% |
height を指定
クラス名 | 縦幅 |
---|---|
h-25 | Height 25% |
h-50 | Height 50% |
h-75 | Height 75% |
h-100 | Height 100% |
h-auto | Height auto |
mh-100 | Max-height 100% |
Sizing(サイジング) · Bootstrap v5.0
垂直配置(vertical-align)
要素がインライン、インラインブロック、インラインテーブル、テーブルセルの場合のみに適用されます。
クラス名 | 垂直配置 |
---|---|
align-baseline | baseline |
align-top | top |
align-middle | middle |
align-bottom | bottom |
align-text-top | text-top |
align-text-bottom | text-bottom |
Vertical alignment (垂直配置) · Bootstrap v5.0
ポジション(position)
クラス名 | position |
---|---|
position-static | 通常 |
position-relative | 相対位置を指定 |
position-absolute | 絶対位置を指定 |
position-fixed | 位置を固定 |
position-sticky | スクロール時に位置を固定 |
fixed-top | 上部に固定 |
fixed-bottom | 下部に固定 |
sticky-top | スクロール時に上部に固定 |
スクロール時に上部固定する sticky-top はレスポンシブに対応しています。
クラス名 | 画面幅 |
---|---|
sticky-top | ≧0px |
sticky-sm-top | ≧576px |
sticky-md-top | ≧768px |
sticky-lg-top | ≧992px |
sticky-xl-top | ≧1200px |
要素の配置は、次のクラスで指定します。
位置 | 上から | 左から | 下から | 右から |
---|---|---|---|---|
0 | top-0 | start-0 | bottom-0 | end-0 |
50% | top-50 | start-50 | bottom-50 | end-50 |
100% | top-100 | start-100 | bottom-100 | end-100 |
<div class="position-relative">
<div class="position-absolute top-0 start-0">親要素を基準に上から0、左から0の位置に配置</div>
</div>
Position(ポジション) · Bootstrap v5.0
その他(公式リンクのみ)
表(table)
Tables (テーブル) · Bootstrap v5.0
関連記事:Bootstrap5/tableタグがレスポンシブにならない場合の対処法
グリッドシステム・カラム
ボタン
Buttons (ボタン) · Bootstrap v5.0
以上です。