bg-
bootstrap5.css
bootstrap5.css
.bg-primary {
background-color: #0d6efd !important;
}
bootstrap5.css
.bg-secondary {
background-color: #6c757d !important;
}
bootstrap5.css
.bg-success {
background-color: #198754 !important;
}
bootstrap5.css
.bg-info {
background-color: #0dcaf0 !important;
}
bootstrap5.css
.bg-warning {
background-color: #ffc107 !important;
}
bootstrap5.css
.bg-danger {
background-color: #dc3545 !important;
}
bootstrap5.css
.bg-light {
background-color: #f8f9fa !important;
}
bootstrap5.css
.bg-dark {
background-color: #212529 !important;
}
bootstrap5.css
.bg-body {
background-color: #fff !important;
}
bootstrap5.css
.bg-white {
background-color: #fff !important;
}
bootstrap5.css
.bg-transparent {
/* 完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。 */
background-color: transparent !important;
}
bootstrap5.css
.bg-gradient {
background-image: var(--bs-gradient) !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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">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 bg-warning text-dark">g-2 bg-warning text-dark">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 ナビゲーションバー基本:navbarとnavbar-togglerとcollapseとnavbar-toggler-icon
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- TOPは、ブラントとして常に表示 -->
<a class="navbar-brand" href="#">TOP</a>
<!-- navbar-togglerでレスポンシブ -->
<!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
<!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
<!-- data-bs-targetとidでコンテンツを連携させる -->
<button type="button" class="navbar-toggler" data-bs-toggle="bg-warning text-dark">collapse" data-bs-target="#Nav1" aria-controls="Nav1"
aria-expanded="false" aria-label="ナビゲーションの切替">
<!-- ハンバーガーメニューでボタンを表示 bg-warning text-dark">navbar-toggler-icon -->
<span class="bg-warning text-dark">navbar-toggler-icon"></span>
</button>
<!-- ボタンが押されたら、以下のメニューを開く、メニューはulとliを使う -->
<div class="bg-warning text-dark">collapse navbar-bg-warning text-dark">collapse" id="Nav1">
<ul class="navbar-nav">
<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>
</div>
</nav>
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="bg-warning text-dark">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 ナビゲーションドロップダウンメニュー:dropdown-toggle
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<!-- bg-warning text-dark">dropdown-toggleを使う -->
<a class="nav-link bg-warning text-dark">dropdown-toggle" href="#" id="navbarDropdownMenu" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウンメニュー
</a>
<div class="dropdown-menu" aria-labelledby="ドロップダウンメニュー">
<!-- dropdown-menuは display: none -->
<a class="dropdown-item" href="#">サブメニュー1</a>
<a class="dropdown-item" href="#">サブメニュー2</a>
<a class="dropdown-item" href="#">サブメニュー3</a>
</div>
</li>
<li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
<li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
</ul>
</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="bg-warning text-dark">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 ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">ブランドを隠す</a>
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="visually-hidden">(現位置)</span></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="bg-warning text-dark">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>
navbar-brandに画像:navbar-brand
カードの背景色と文字色の設定: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>
カードカラムによるレイアウト:card-columns
カード01
ここに文章が入ります
カード02
文章
カード03
文章
文章
カード04
文章
カード05
文章
文章
カード07
文章
カード08
文章
文章
<div class="bg-warning text-dark">card-columns">
<!-- ★複数のカードをレイアウトするためにbg-warning text-dark">card-columnsを使う、flex同様、自動整列される -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">ここに文章が入ります</p>
</div>
</div>
<!-- カード02 -->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>カード02</p>
<p>文章</p>
<footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
</blockquote>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">文章</p>
<p class="card-text"><small class="text-muted">文章</small></p>
</div>
</div>
<!-- カード04 -->
<div class="card bg-secondary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>カード04</p>
<p>文章</p>
<footer class="blockquote-footer"> <small> 文章 </small> </footer>
</blockquote>
</div>
<!-- カード05 -->
<div class="card text-center">
<!-- テキストのセンタリング text-center-->
<div class="card-body">
<h4 class="card-title">カード05</h4>
<p class="card-text">文章</p>
<p class="card-text"><small class="text-muted">文章</small></p>
</div>
</div>
<!-- カード06 -->
<div class="card">
<img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="...">
</div>
<!-- カード07 -->
<div class="card p-3 text-end">
<blockquote class="blockquote mb-0">
<p>カード07</p>
<p>文章</p>
<footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
</blockquote>
</div>
<!-- カード08 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">カード08</h4>
<p class="card-text">文章</p>
<p class="card-text"><small class="text-muted">文章</small></p>
</div>
</div>
</div>
文字に色をつける:text-primary
<div class="text-center">
<p><a href="#" class="bg-warning text-dark">text-primary">bg-warning text-dark">text-primary</a></p>
<p><a href="#" class="text-secondary">text-secondary</a></p>
<p><a href="#" class="text-success">text-success</a></p>
<p><a href="#" class="text-danger">text-danger</a></p>
<p><a href="#" class="text-warning">text-warning</a></p>
<p><a href="#" class="text-info">text-info</a></p>
<p><a href="#" class="text-light bg-dark">text-light</a></p>
<p><a href="#" class="text-dark">text-dark</a></p>
<p><a href="#" class="text-body">text-body</a></p>
<p><a href="#" class="text-muted">text-muted</a></p>
<p><a href="#" class="text-white bg-dark">text-white</a></p>
<p><a href="#" class="text-black-50">text-black-50</a></p>
<p><a href="#" class="text-white-50 bg-dark">text-white-50</a></p>
</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>
高さを指定する:h-25
h-25
h-50
h-75
h-100
<!-- 親で指定した高さに対して、割合を設定した高さになる -->
<div style="height: 100px;">
<div class="bg-warning text-dark">h-25 d-inline-block border bg-primary">bg-warning text-dark">h-25</div>
<div class="h-50 d-inline-block border bg-primary">h-50</div>
<div class="h-75 d-inline-block border bg-primary">h-75</div>
<div class="h-100 d-inline-block border bg-primary">h-100</div>
</div>
テキストの折り返し許可、不許可:text-wrapとtext-nowrap
テキスト折り返し許可している場合
テキスト折り返し許可していない場合
バッジ基本的な使用例:badge
primary NEW
secondary 11
success 111
danger 1111
warning 0
info99
light 999
dark 9999
<!-- バッチは、親要素のサイズに一致するように相対的なフォントサイズ em を使用 -->
<p>primary <span class="bg-warning text-dark">badge bg-primary">NEW</span></p>
<p>secondary <span class="bg-warning text-dark">badge bg-secondary">11</span></p>
<p>success <span class="bg-warning text-dark">badge bg-success">111</span></p>
<p>danger <span class="bg-warning text-dark">badge bg-danger">1111</span></p>
<p>warning <span class="bg-warning text-dark">badge bg-warning">0</span></p>
<p>info<span class="bg-warning text-dark">badge bg-info">99</span></p>
<p>light <span class="bg-warning text-dark">badge bg-light text-dark">999</span></p>
<p>dark <span class="bg-warning text-dark">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>
aタグ(リンク)のバッジを作成する:badge
バッジによるカウンター表示:button
<!-- bg-warning text-dark">buttonにspanでカウンターを設定する、ボタンをクリックすると動作する -->
<!-- spanにbadgeを設定し、badgeの色も設定する -->
<bg-warning text-dark">button type="bg-warning text-dark">button" class="btn btn-primary">
bg-warning text-dark">button <span class="badge bg-light text-dark">4</span>
</bg-warning text-dark">button>
スクリーンリーダー視覚支援 非表示テキスト:visually-hidden
devで背景色とテキストの文字
インライン表示のdiv:d-inline
インライン表示のspan:span
ブロック表示のspan:d-block
要素の表示/非表示を設定する:d-lg-none
フロートを解除する(親要素範囲内でfloatを使う):clearfix
フロートを解除なし(重なっているので背景色がでない)
Float左と右:float-startとfloat-end
背景色用のクラス:bg-*
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
なし(標準) | データ | データ | データ |
bg-primary | データ | データ | データ |
bg-success | データ | データ | データ |
bg-warning | データ | データ | データ |
bg-danger | データ | データ | データ |
bg-info | データ | データ | データ |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>なし(標準)</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-primary">
<td>bg-primary</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-success">
<td>bg-success</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-warning">
<td>bg-warning</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-danger">
<td>bg-danger</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-info">
<td>bg-info</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
js オーバーフロー(枠から飛び出すメニュー)を制約する設定:data-boundary
<div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
<br><br><br>
<div class="dropdown">
<!-- ata-boundary="scrollParent"-->
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
bg-warning text-dark">data-boundary="scrollParent">ドロップダウンボタン</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
<a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
<a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
</div>
</div>
</div>
影: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>
角丸:rounded
rounded
rounded-top
rounded-end
rounded-bottom
rounded-start
rounded-circle
rounded-0
<!-- 背景色を設定しない限り適用されない、背景に適用される -->
<!-- 角丸 -->
<div class="bg-warning text-dark">rounded bg-warning">bg-warning text-dark">rounded</div>
<div class="bg-warning text-dark">rounded-top bg-warning">bg-warning text-dark">rounded-top</div>
<div class="bg-warning text-dark">rounded-end bg-warning">bg-warning text-dark">rounded-end</div>
<div class="bg-warning text-dark">rounded-bottom bg-warning">bg-warning text-dark">rounded-bottom</div>
<div class="bg-warning text-dark">rounded-start bg-warning">bg-warning text-dark">rounded-start</div>
<!-- サークル -->
<div class="bg-warning text-dark">rounded-circle bg-warning">bg-warning text-dark">rounded-circle</div>
<div class="bg-warning text-dark">rounded-0 bg-warning">bg-warning text-dark">rounded-0</div>
影と角丸の両方適用:shadowとrounded
小さめの影
標準の影
大きめの影
<div class="bg-warning text-dark">shadow-sm p-3 mb-5 bg-white bg-warning text-dark">rounded">小さめの影</div>
<div class="bg-warning text-dark">shadow p-3 mb-5 bg-white bg-warning text-dark">rounded-0">標準の影</div>
<div class="bg-warning text-dark">shadow-lg p-3 mb-5 bg-white bg-warning text-dark">rounded">大きめの影</div>
プログレスバーの色:progress-barとbg-*
<div class="progress mb-3">
<div class="bg-warning text-dark">progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="bg-warning text-dark">progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="bg-warning text-dark">progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="bg-warning text-dark">progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
複数のプログレスバーを積み重ねるdiv:progress-bar
<div class="progress" style="height: 20px;">
<div class="bg-warning text-dark">progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="bg-warning text-dark">progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="bg-warning text-dark">progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
プログレスバーをストライプにする:progress-bar-striped
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark">progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark">progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark">progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark">progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark">progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
プログレスバーのアニメーションさせる:progress-bar-animated
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped bg-warning text-dark">progress-bar-animated" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped bg-warning text-dark">progress-bar-animated bg-success" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped bg-warning text-dark">progress-bar-animated bg-info" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped bg-warning text-dark">progress-bar-animated bg-danger" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>