bg-light
bootstrap5.css
bootstrap5.css
.bg-light {
background-color: #f8f9fa !important;
}
html bootstrap5 Sample
rowとcolの整列垂直:align-items-startとalign-items-centerとalign-items-end
col
col
col
col
col
col
col
col
col
<!-- 上寄せ、高さは、隣接rのrowに設定する -->
<div class="row align-items-start border bg-light">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row align-items-center border bg-light">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<!-- 下寄せ高さは隣接rowで決まる模様 -->
<div class="row align-items-end border bg-light">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
水平方向のカラム間のガター:gx-5
p-3 border bg-light
p-3 border bg-light
<!-- ガターとは、カラム間のパディング、padding によって作られるカラムの隙間のことです。 -->
<!-- 各カラムに padding-right と padding-leftを設定し、各行の最初と最後にネガティブ margin でオフセットしてコンテンツを揃えます。。 -->
<!--不要なオーバーフローを避けるため .container や.container-fluid を親要素に設定することもできます。たとえば、次の例では .px-4 でパディングを増やしています -->
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
</div>
</div>
垂直方向のカラム間のガター、オーバーフロー処理:gy-5
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
<!--垂直方向のガターはページの最後にある .row の下にオーバーフローを引き起こす可能性があります。-->
<!-- container overflow-hidden で、はみ出しrow部分を無視する -->
<!-- このような場合は、.row を.overflow-hidden でラップするとも言う -->
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
</div>
</div>
水平・垂直方向の同時ガター:g-2
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
<div class="container">
<!-- g-* クラスは水平・垂直ガターを設定する -->
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
</div>
</div>
rowとcolのガター:g-2 g-lg-3
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
<!-- row columnsに ガタを使うことができるー-->
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
rowとcolのガターなしカラム:g-0
js ナビバーの検索窓:d-flex
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav3"
aria-controls="Nav3" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Nav3">
<!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
<a class="navbar-brand" href="#">TOP</a>
<ul class="navbar-nav me-auto">
<li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
</ul>
<form class="d-flex">
<!-- inputにform-controlを適用しない -->
<input class="me-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light" type="submit">検索</button>
</form>
</div>
</div>
</nav>
js ナビゲーションバー内テキスト:navbar-text
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
</ul>
<!-- ナビバー内にテキストを表示したい場合 -->
<span class="navbar-text ms-auto">ナビゲーションバーテキスト</span>
</div>
</nav>
js ナビゲーションバーアイコンしか出さない
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- navbar-brand -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav5" aria-controls="Nav5"
aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Nav5">
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="d-flex">
<input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
js ナビバーのデザイン:navbar-lightとbg-light
<!-- bg-*はbootstrapの背景色の指定方法、できるだけこれを使うとことで構造化が進む、Core Web Vitals(コアウェブバイタル)にも有効 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav_d"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav_d">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<!-- アウトラインの検索ボタン、darkだど映える -->
<form class="d-flex">
<input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
js ナビバーbg-以外で背景色を直接指定:background-color
<!-- navbar-*はテキストの色 -->
<!-- navbar-expand-* は@mediaだったら適用するという指定 -->
<nav class="navbar navbar-expand-sm navbar-light bg-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav9" aria-controls="Nav9"
aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Nav9">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="d-flex">
<input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
カードの背景色と文字色の設定:text-whiteとbg-primary
背景色、文字色指定なし
カードのタイトル
カードの内容
背景色:bg-primary、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-secondary、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-success、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-danger、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-warning、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-info、文字色:text-white
カードのタイトル
カードの内容
背景色:bg-light
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<!-- card-header ヘッダーオプション-->
<div class="card-header">背景色、文字色指定なし</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-primary、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-secondary、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-success、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-danger、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-warning、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-info、文字色:text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;">
<div class="card-header">背景色:bg-light</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
<div class="card-header">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
背景に色を付ける:bg-primary
<div class="text-center">
<p><a href="#" class="bg-primary text-white d-block py-2">bg-primary</a></p>
<p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
<p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
<p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
<p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
<p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
<p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
<p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
<p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
<p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
</div>
背景にグラデーション:bg-gradient
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primary.bg-gradient</div>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-success.bg-gradient</div>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-danger.bg-gradient</div>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warning.bg-gradient</div>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-info.bg-gradient</div>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-light.bg-gradient</div>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-dark.bg-gradient</div>
バッジ基本的な使用例:badge
primary NEW
secondary 11
success 111
danger 1111
warning 0
info99
light 999
dark 9999
<!-- バッチは、親要素のサイズに一致するように相対的なフォントサイズ em を使用 -->
<p>primary <span class="badge bg-primary">NEW</span></p>
<p>secondary <span class="badge bg-secondary">11</span></p>
<p>success <span class="badge bg-success">111</span></p>
<p>danger <span class="badge bg-danger">1111</span></p>
<p>warning <span class="badge bg-warning">0</span></p>
<p>info<span class="badge bg-info">99</span></p>
<p>light <span class="badge bg-light text-dark">999</span></p>
<p>dark <span class="badge bg-dark">9999</span></p>
ピル型のバッジを作成する:badge-pill
<!-- ビル型は、丸みを帯びた形状のデザインのこと -->
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
バッジによるカウンター表示:button
スクリーンリーダー視覚支援 非表示テキスト:visually-hidden
<!-- visually-hiddenは非表示で、スクリーンリーダのみ読み上げます -->
<button type="button" class="btn btn-primary">
未読メッセージ <span class="badge bg-light text-dark">9</span>
<span class="visually-hidden">未読メッセージ</span>
</button>
影:Shadows
影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-lg)
<!-- smとlgはサイズの指定 -->
<div class="shadow-none p-3 mb-5 bg-light rounded">影なし(shadow-none)</div>
<div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影(shadow-sm)</div>
<div class="shadow p-3 mb-5 bg-light rounded">標準の影(shadow)</div>
<div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影(shadow-lg)</div>