Bootstrap5.3

Bootstrap 5.3.8のユーティリティクラス、グリッド、Flexboxなどの備忘録。

基本はモバイルファースト。指定したブレイクポイント以上でスタイルを適用。

Breakpoints

ブレイクポイント

xs：576px未満
sm：576px以上
md：768px以上
lg：992px以上
xl：1200px以上
xxl：1400px以上

xsは接頭辞なし。sm以上はsm、md、lg、xl、xxlを指定。

レスポンシブ指定

<div class="col-12 col-md-6 col-lg-4">コンテンツ</div>

スマホは全幅、768px以上で2列、992px以上で3列に対応するカラム幅。

Text

text-align

text-start：開始側
text-center：中央揃え
text-end：終了側

LTR環境ではstartが左、endが右。

レスポンシブ指定

<p class="text-center text-md-start">テキスト</p>

スマホは中央揃え、768px以上で開始側に配置。

テキストの省略

text-truncate

これはダミーです。これはダミーです。

幅を指定し、はみ出したテキストを省略記号で表示。

<p class="d-inline-block text-truncate" style="max-width:150px;">長いテキスト</p>

カラーの継承

text-reset：親要素の文字色を継承。

フォントサイズ

fs-1：2.5rem
fs-2：2rem
fs-3：1.75rem
fs-4：1.5rem
fs-5：1.25rem
fs-6：1rem

Bootstrap標準設定での値。

フォントの太さ・スタイル

fw-bold：太字
fw-semibold：やや太字
fw-normal：通常
fw-light：細字
fst-italic：斜体
fst-normal：通常スタイル

文字色

text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-body
text-body-secondary
text-body-tertiary

text-mutedはBootstrap 5.3で非推奨。代わりにtext-body-secondaryなどを使用。

Spacing

margin・padding

m-0 / p-0：0
m-1 / p-1：0.25rem
m-2 / p-2：0.5rem
m-3 / p-3：1rem
m-4 / p-4：1.5rem
m-5 / p-5：3rem

方向の指定

mt-3：上margin
mb-3：下margin
ms-3：開始側margin
me-3：終了側margin
mx-3：左右margin
my-3：上下margin
pt-3：上padding
pb-3：下padding
ps-3：開始側padding
pe-3：終了側padding
px-3：左右padding
py-3：上下padding

auto

mx-auto：左右auto
ms-auto：開始側auto
me-auto：終了側auto

レスポンシブ指定

<div class="mt-3 mt-lg-5 px-3 px-lg-4">コンテンツ</div>

992px以上で余白の大きさを変更。

Grid

基本の12カラム

Bootstrapのグリッドは12カラム構成。

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">左カラム</div>
        <div class="col-12 col-md-6">右カラム</div>
    </div>
</div>

767px以下は縦並び、768px以上は2カラム。

Container

container：画面幅に応じた最大幅
container-fluid：常に幅100%
container-md：768px以上で最大幅を設定
container-lg：992px以上で最大幅を設定

Row Columns

親要素に列数を指定。

<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4">
    <div class="col">項目1</div>
    <div class="col">項目2</div>
    <div class="col">項目3</div>
    <div class="col">項目4</div>
</div>

スマホ2列、768px以上で3列、992px以上で4列。

Gutter / カラム間の余白

g-0：余白なし
g-1～g-5：縦横の余白
gx-3：横方向の余白
gy-3：縦方向の余白
g-md-4：768px以上で変更
<div class="row g-3">
    <div class="col-6">項目1</div>
    <div class="col-6">項目2</div>
</div>

Flex

Flexコンテナ

d-flex：Flexbox
d-inline-flex：インラインFlexbox
d-md-flex：768px以上でFlexbox

並び方

flex-row：横並び
flex-row-reverse：横並び・逆順
flex-column：縦並び
flex-column-reverse：縦並び・逆順

折り返し

flex-wrap：折り返しあり
flex-nowrap：折り返しなし
flex-wrap-reverse：逆方向に折り返し

主軸方向の整列

justify-content-start：開始側
justify-content-center：中央
justify-content-end：終了側
justify-content-between：両端揃え
justify-content-around：各要素の周囲に均等な余白
justify-content-evenly：要素間と両端の余白を均等にする

flex-rowでは横方向、flex-columnでは縦方向に適用。

交差軸方向の整列

align-items-start：開始側
align-items-center：中央
align-items-end：終了側
align-items-baseline：ベースライン
align-items-stretch：引き伸ばし

flex-rowでは縦方向、flex-columnでは横方向に適用。

アイテムごとの整列

上揃え：align-self-start

項目1
上
項目3

中央揃え：align-self-center

項目1
中央
項目3

下揃え：align-self-end

項目1
下
項目3

ベースライン：align-self-baseline

項目1
基準線
項目3

ストレッチ：align-self-stretch

項目1
伸縮
項目3

Gap / Flexアイテム間の余白

gap-0：余白なし
gap-1～gap-5：縦横の余白
row-gap-3：行方向の余白
column-gap-3：列方向の余白
gap-md-4：768px以上で変更
<div class="d-flex flex-wrap gap-3">
    <div>項目1</div>
    <div>項目2</div>
    <div>項目3</div>
</div>

並び順

order-first：最初
order-0～order-5：順序指定
order-last：最後
order-md-1：768px以上で変更

伸縮

flex-fill：幅を埋める
flex-grow-1：伸長
flex-grow-0：伸長しない
flex-shrink-1：縮小を許可
flex-shrink-0：縮小しない

Display

表示・非表示

d-none：非表示
d-inline：inline
d-inline-block：inline-block
d-block：block
d-grid：grid
d-flex：flex
d-inline-flex：inline-flex

レスポンシブ表示

<div class="d-none d-md-block">768px以上で表示</div>
<div class="d-block d-md-none">767px以下で表示</div>

印刷時の表示切り替え

d-print-none：印刷時に非表示
d-print-block：印刷時にblock
d-print-inline：印刷時にinline
d-print-inline-block：印刷時にinline-block
<div class="d-none d-print-block">印刷時のみ表示</div>
<div class="d-print-none">印刷時は非表示</div>

Offset

6カラムを中央寄せ

col-6 offset-3
<div class="row">
    <div class="col-6 offset-3">中央寄せ</div>
</div>

右側に4カラム分の空間

col-4
offset-4
<div class="row">
    <div class="col-4">左</div>
    <div class="col-4 offset-4">右</div>
</div>

レスポンシブオフセット

<div class="row">
    <div class="col-12 col-md-6 offset-md-3">コンテンツ</div>
</div>

767px以下は全幅、768px以上は中央に6カラム。

Image

画像関連クラス

img-fluid：レスポンシブ画像
img-thumbnail：サムネイル風の枠線
rounded：角丸
rounded-circle：円形
float-start：開始側に回り込み
float-end：終了側に回り込み
<img src="image.jpg" class="img-fluid rounded" alt="サンプル画像">

Object Fit

object-fit-contain：全体を収める
object-fit-cover：領域いっぱいに表示
object-fit-fill：領域に合わせて変形
object-fit-none：サイズ調整なし
object-fit-scale：scale-down
<img src="image.jpg" class="w-100 object-fit-cover" style="height:200px;" alt="サンプル画像">

Border

枠線

border：全方向
border-0：枠線なし
border-top：上
border-bottom：下
border-start：開始側
border-end：終了側

線の太さ・色

border-1～border-5：太さ
border-primary：primary色
border-secondary：secondary色
border-danger：danger色

角丸

rounded-0：角丸なし
rounded-1～rounded-5：角丸の大きさ
rounded-circle：円形
rounded-pill：カプセル型

Position

位置指定

position-static
position-relative
position-absolute
position-fixed
position-sticky

配置

top-0：上端
bottom-0：下端
start-0：開始側
end-0：終了側
top-50：上から50%
start-50：開始側から50%
translate-middle：中央補正
<div class="position-relative" style="height:150px;">
    <div class="position-absolute top-50 start-50 translate-middle">
        中央配置
    </div>
</div>

Size

幅・高さ

w-25：幅25%
w-50：幅50%
w-75：幅75%
w-100：幅100%
w-auto：幅auto
h-25：高さ25%
h-50：高さ50%
h-75：高さ75%
h-100：高さ100%
h-auto：高さauto
mw-100：最大幅100%
mh-100：最大高さ100%
min-vh-100：最小高さ100vh
vh-100：高さ100vh
vw-100：幅100vw

List / Clearfix

リストスタイル

list-unstyled：マーカーなし
list-inline：横並びリストの親要素
list-inline-item：横並びの各項目
<ul class="list-inline">
    <li class="list-inline-item">項目1</li>
    <li class="list-inline-item">項目2</li>
    <li class="list-inline-item">項目3</li>
</ul>

clearfix

clearfix：floatした子要素の回り込みを解除。

<div class="clearfix">
    <div class="float-start">左</div>
    <div class="float-end">右</div>
</div>

通常のレイアウトにはFlexboxやGridの使用を優先。

Bootstrap 4からの変更点

text-left → text-start
text-right → text-end
ml-* → ms-*
mr-* → me-*
pl-* → ps-*
pr-* → pe-*
font-weight-bold → fw-bold
font-italic → fst-italic
no-gutters → g-0
float-left → float-start
float-right → float-end

公式：Bootstrap 5.3 Documentation