Bootstrap5の使い方

簡単にレスポンシブWebデザインのサイトができるBootstrap5 の使い方について説明します。
詳細は、本家（英文）の Bootstrap を参照ください。
グリッドシステムについては、画面幅を動かして画面表示の変化をご確認ください。 .XXX の . は class です。

１．Bootstrapの適用【htmlに記載】

<!DOCTYPE html>
<html lang="ja">
<head>

　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1>
　　<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
　
　　<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
　
　<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
　　<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>

２．Layout レイアウト

2.1 Breakpoints ブレークポイント(カスタマイズ可能な幅)

BP名	クラス	画面幅
極小	(xs)	<576px
小	sm	=>576px
中	md	=>768px

BP名	クラス	画面幅
大	lg	=>992px
特大	xl	=>1200px
超特大	xxl	=>1400px

2.2 Containers コンテナ(デバイスに合わせたコンテンツ幅)

コンテナ	(xs) <576px	sm =>576px	md =>768px	lg =>992px	xl =>1200px	xxl =>1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.containe-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

2.3 Grid グリッド(分割配置)

.row グリッドの行指定。<div class="row">---</div>
.col 行を12分割し、1/12の-n倍指定又は指定なしの等間隔及びブレークポイントクラスを指定したフレキシブルレイアウトが可能。　　上記行指定に挿入。<div class="col(-n)">(グリッド挿入図/テキスト)</div> <div class="col-(BP)-n">(グリッド挿入図/テキスト)</div>
グリッド間余白は 1.5rem(24px)
例１等間隔(12をcol数割)及び指定n数と残りcol数割

.col(12/3)

.col(12/3)

.col(12/3)

.col(6/2)

.col-6

.col(6/2)
例２ Responsive classes 分割を表示幅ブレークポイントによりフレキシブルに変える

.col-6 col-sm-4 col-md-3 col-lg-2

.col-6 col-sm-4 col-md-3 col-lg-2

.col-6 col-sm-4 col-md-3 col-lg-2

.col-6 col-sm-4 col-md-3 col-lg-2

.col-6 col-sm-4 col-md-3 col-lg-2

.col-6 col-sm-4 col-md-3 col-lg-2

.col-sm-6 col-md-4 col-lg-3 col-xl-2

.col-sm-6 col-md-4 col-lg-3 col-xl-2

.col-sm-6 col-md-4 col-xl-3 col-xxl2

.col-sm-6 col-md-4 col-xl-3 col-xxl2

.col-6 col-sm-4 col-md-3 col-xl-2
例３可変幅コンテンツ <div class="col-(BP)-auto">

.col-12 col-md-auto（可変長のコンテンツ）

.col

.col col-md-4 col-lg-3
例４行列 <div class="row row-cols-n(auto)">

.col

.col

.col

.col

.col
例５ Nesting ネスティング(入れ子.row親に.row子を入れる)

.col-sm-3 親1

.col-sm-9 親2の.row子１.col-8 .col-sm-6

.col-sm-9 親2の.row子２.col-4 .col-sm-6
例６可変幅の整列配置　div .row justify-content-start/center/end/around/between

start行の1/2

start行の2/2

center行の1/2

center行の2/2

end行の1/2

end行の2/2

around行の1/2

around行の2/2

between行の1/2

between行の2/2
例７　左に余白のグリッドを挿入 .offset-sm-1 .offset-md-2

.col-6 col-sm-4 col-md-3

.col-6 col-sm-4 offset-sm-1 col-md-3 offset-md-2

.col-6 col-sm-4 col-md-3 offset-md-1
例８　グリッドの順番を変更 .order-md-3 .order-sm-1 .order-sm-first(1より前)

.col-sm-3 order-sm-2 order-md-1 oder-lg-2

.col-sm-4 order-sm-1 order-md-3 order-lg-1

.col-md-5 order-sm-first order-md-2 order-lg-3

３．Content コンテンツ

3.1 Typography 本文の体裁

Hedadings 見出しの大きさ <hn>/.hn　n:1-6
<h1>/.h1、　 <h2>/.h2、　 <h3>/.h3、　 <h4>/.h4、　 <h5>/.h5、　 <h6>/.h6
Display headings 見出しの拡大表示 .display-n　n：1-4
　 .display-1、　 .display-2
　 .display-3、　 .display-4
Lead 先頭の段落を際立てる場合 .lead
これは先頭の段落で、テキストの大きさが1.25remになっています。
Inline text elements インラインテキスト(html)

テキストの<mark>ハイライト</mark>
<del>~~削除したテキストとして扱う~~</del>
<s>~~正確ではないテキストとして扱う~~</s>
<ins>追加したテキストとして扱う</ins>

<u>下線付きテキスト表示</u>
<small>細字のテキスト</small>
<strong>太字のテキスト</strong>
<em>斜体のテキスト</em>
リスト(スタイル無)
- スタイル無リスト項目１
- スタイル無リスト項目２
- スタイル無リスト項目３
　　
<ul class="list-unstyled">
<li>スタイル無リスト項目１</li>
<li>スタイル無リスト項目２</li>
<li>スタイル無リスト項目３</li>
</ul> 　　
説明リスト

項目１

項目１の内容

項目２

項目２の内容

項目３

小項目3-1

小項目3-1の内容

小項目3-2

小項目3-2の内容

<dl class="row">
<dt class="col-sm-3">項目１</dt>
<dd class="col-sm-9">項目１の内容</dd>
<dt class="col-sm-3">項目２</dt>
<dd class="col-sm-9">項目２の内容</dd>
<dt class="col-sm-3">項目３</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-5">小項目3-1</dt>
<dd class="col-sm-7">小項目3-1の内容</dd>
<dt class="col-sm-5">小項目3-2</dt>
<dd class="col-sm-7">小項目3-2の内容</dd>
</dl></dd>
</dl>

3.2 Images 画像

インライン：<figure>、図下0.5em：img .figure-img、キャプションサイズ90%灰色：figcaption .figure-caption

レスポンシブ画像幅100% .img-fluid

サムネイル画像角丸枠1px .img-thumbnail

左右配置 div .clearfix、img .float-start/end

角丸 .rounded、丸 .rounded-circle

上下配置 div .d-flex .align-items-start/center/end

3.3 Table 表

表の行線 .table

項目１	項目２	項目３
列１行１	列２行１	列３行１
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

表のレスポンシブ .table-responsive-lg(規定幅以下スクロール)

項目１	項目２	項目３
列１行１ABCDEFG	列２行１ABCDEFG	列３行１ABCDEFG
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

表のストライブ .table-striped

項目１	項目２	項目３
列１行１	列２行１	列３行１
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

表の枠線 .table-bordered

項目１	項目２	項目３
列１行１	列２行１	列３行１
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

オンマウス表示 .table-hover

項目１	項目２	項目３
列１行１	列２行１	列３行１
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

背景色 .table-primary/secondary/success/info/warning/danger/light/dark

項目１	項目２	項目３
列１行１	列２行１	列３行１
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

行間を狭める .table-sm

項目１	項目２	項目３
列１行１	列２行１	列３行１
列１行２	列２行２	列３行２
列１行３	列２行３	列３行３

４．Form フォーム

<form>フォーム
<label for="inputEmail" class="form-label">Eメールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
<label for="inputPassword">パスワード</label>
<input type="password" class="form-control" id="Password" placeholder="パスワード">
<label for="textarea" class="form-label">テキスト入力欄</label>
<textarea class="form-control" id="inquiry" rows="3" placeholder="（3行 rows=3）"></textarea>
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg(箱大)" aria-label="lg">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm(箱小)" aria-label="sm">
<select class="form-select" aria-label="select">∨選択
<option selected>好きなペットは</option>
<option value="1">猫</option>
<option value="2">犬</option>
<option value="3">その他</option>
</select>
<div class="form-check">ラジオボタン
<input class="form-check-input" type="radio" name="Radio" id="Select1" checked>
<label class="form-check-label" for="Radio2">選択1(checkedでデフォルト)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radio" id="Select2">
<label class="form-check-label" for="Radio1">選択2</label>
</div>
<div class="form-check form-switch mb-2">スイッチボタン
<input class="form-check-input" type="checkbox" role="switch" id="Switch" checked>
<label class="form-check-label" for="Switch">スイッチボタン(checkedでデフォルトon)</label>
</div>
<label for="customRange1" class="form-label">スライド</label>
<input type="range" class="form-range" id="Range1">
<label for="customRange2" class="form-label">ステップ</label>
<input type="range" class="form-range" min="0" max="5" id="Range2">
<div class="input-group">入力グループ
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
</form>

５．Compornentc コンポーネント(構成要素)

5.1 Accordion アコーディオン

Accordion項目１の内容文。.aria-expanded="true"はデフォルトで開く

Accordion項目２の内容文。.aria-expanded="false"は項目クリックで開く

Accordion項目３の内容文。.aria-expanded="false"は項目クリックで開く

<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="heading1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collaps1"> Accordion項目１</button></h2>
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#accordion">
<div class="accordion-body"> Accordion項目１の内容文。.aria-expanded="true"はデフォルトで開く</div>
</div></div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> Accordion項目２</button></h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
<div class="accordion-body"> Accordion項目２の内容文。.aria-expanded="false"は項目クリックで開く</div>
</div></div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> Accordion項目３</button></h2>
<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
<div class="accordion-body"> Accordion項目３の内容文。.aria-expanded="false"は項目クリックで開く</div>
</div></div>

5.2 Alerts アラート

アラート! 確認後右の×で閉じます。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>アラート!</strong> 確認後右の×で閉じます。
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

5.3 Badge バッジ(表示)

Newの表示例 New

<h5>Newの表示例<span class="badge bg-danger">New</span></h5>

5.4 Breadcrumb パンくずリスト(階層構造の道順を示す)

ホーム

Bootstrap5

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap5</li>
</ol>
</nav>

5.5 Buttons ボタン

ボタンの色　button type="button" .btn btn-□

ボタン枠の色　button type="button" .btn btn-outline-□

タグボタン　リンク a .btn href="#"、インプット input .btn type="button/submit/reset"
リンク

ボタンの大きさとリンク表示　.btn btn-□

5.6 Button group ボタングループ

ボタングループ div .btn-group role="group" aria-label="Basic"　サイズ .btn-group-lg/sm

　

　

ボタンツールバー div .btn-toolbar role="toolbar" aria-label="Toolbar with button groups"
エリア分け div .btn-group mr-2 role="group" aria-label="First/Second/Third group"

5.7 Card カード

カード（枠：角丸、背景：白）div .card

タイトル

本文あいうえおかきくけこ
ボタン

タイトル

本文あいうえおかきくけこ
ボタン

<div class="row">
<div class="col-sm-△ col-md-▲ col-lg-◇">
<div class="card">
<img src="□.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">タイトル&brlt/h5>
<p class="card-text">本文あいうえおかきくけこ</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div></div></div>
<div class="col-sm-△ col-md-▲ col-lg-◇">
<div class="card">
<img src="img200.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">タイトル</h5>
<p class="card-text">本文あいうえおかきくけこ</p>
<a href="#" class="btn btn-primary">ボタン</a>
　</div></div></div>
</div>

カード・ボデイ(本体)（padding:1.25rem） div .card-body

カード・イメージ(角丸上/下) img .card-img-top(上部)/bottom(下部)

カード・タイトル(padding-bottom:0.75rem) hn .card-title、サブタイトル(padding-top:-0.375rem) .card-subtitle

カード・テキスト(margin-bottom:0) p .card-text

カード・ボタン a .btn btn-(色)、リンク a　href="＊" .card-link

カード・ヘッダー div .card-header、フッター .card-footer

カード・ナビ ul .nav nav-tabs card-header-tabs

画像オーバーレイ
div .card-img-overlay

タイトル

本文あいうえおかきくけこ

色(例:白と青) .text-white .bg-primary

タイトル

本文あいうえおかきくけこ

枠色(例:青) .border-primary

タイトル

本文あいうえおかきくけこ

図と文を横配置

タイトル

本文あいうえおかきくけこ

<div class="row g-0">
<div class="col-sm-4">
<img src="..." class="img-fluid rounded-start">
</div>
<div class="col-sm-8">
<div class="card-body">本文の中身</div>
</div></div>

カードグループ　div .card-group

タイトル１

本文あいうえおかきくけこさしすせそたちつてと

タイトル２

本文あいうえおかきくけこ

タイトル３

本文あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ

5.8 Carousel カルーセル(画像のスライド)

左右コントロール付き

インジケータ付き

キャプション付き

１枚目のキャプション

２枚目のキャプション.

３枚目のキャプション

<div id="carouselControls" class="carousel slide" data-bs-ride="carousel">

インジケータを付ける場合
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="画像１枚目" class="d-block w-100" alt="..">

キャプションを付ける場合(2&3枚目も同様)
<div class="carousel-caption d-none d-md-block">
<p>１枚目のキャプション></p>
</div>
</div>
<div class="carousel-item">
<img src="画像２枚目" class="d-block w-100" alt="..">
</div>
<div class="carousel-item">
<img src="画像３枚目" class="d-block w-100" alt="..">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

5.9 Close button 閉じるボタン
<button type="button" class="btn-close" aria-label="Close"></button>
5.10 Collapse 折り畳み

表示/非表示

ボタンクリックでテキストボックスを表示したり隠したりします。

<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseEx" role="button" aria-expanded="false" aria-controls="collapseEx">表示/非表示</a>
<div class="collapse" id="collapseEx">
<div class="card card-body mb-2">
ボタンクリックでテキストボックスを表示したり隠したりします。
</div> </div>

5.11 Dropdowns ドロップダウン

ドロップダウン

項目１へ

項目２へ

<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> ドロップダウン</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">項目１へ</a></li>
<li><a class="dropdown-item" href="#">項目２へ</a></li>
</ul></div>

5.12 List group リストグループ

項目１(Active)

項目２

項目３

Horizontal 水平

１項

２項

３項

<ul class="list-group">
<li class="list-group-item active" aria-current="true">項目１(Active)</li>
<li class="list-group-item">項目２</li>
<li class="list-group-item">項目３</li>
</ul>

Horizontal 水平
<ul class="list-group lise-group-horizontal">
<li class="list-group-item">１</li>
<li class="list-group-item">２項</li>
<li class="list-group-item">３項</li>
</ul>

5.13 Modal モダル(通知用ダイアログ)

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Modal">タイトル</button>
<div class="modal fade" id="Modal" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">タイトル</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
本文
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存</button>
</div></div></div></div>
5.14 Navs & tabs ナビ＆タブ

基本

Active

Link1

Link2

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active></a></li>
<li class="nav-item">
<a class="nav-link" href="#">Link1</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a></li>
</ul>

中央配置 ul.nav justify-content-center

Active

Link1

Link2

垂直ナビ ul.nav flex-column

Active

Link1

Link2

タブ ul.nav nav-tabs 　

Active

Link1

Link2

囲み ul.nav nav-pills 　

Active

Link1

Link2

幅全体 ul.nav nav-fill 　

Active

Link1

Link2

5.15 Navbar ナビバー

ナビバー

ホーム

リンク

ドロップダウン

項目１

項目２

項目３

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">ナビバー</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">ホーム</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">ドロップダウン</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">項目１</a></li>
<li><a class="dropdown-item" href="#">項目２</a></li>
<li><a class="dropdown-item" href="#">項目３</a></li>
</ul></li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">検索</button>
</form>
</div></div>
</nav>

６．Helpers 補足

6.1 Clearfix 左右配置をクリアする

<div class="bg-info clearfix">
<button type="button" class="btn btn-info float-start">左側</button>
<button type="button" class="btn btn-info float-end">右側</button>
</div>

6.2 Colored links 色付リンク

a.link-primary a.link-secondary a.link-success a.link-danger a.link-warning a.link-info a.link-light a.link-dark

6.3 Ratio レシオ(比率)

div.retio.retio-1x1

div.retio.retio-4x3

div.retio.retio-16x9

div.retio.retio-21x9

6.4 Position 固定

<div class="fixed-top">画面上部に端から端まで表示される(header)</div>
<div class="fixed-bottom">画面下部に端から端まで表示される(footer)</div>

6.5 Stacks スタック

<div class="vstack gap-3">縦に配置する場合(この中に各項目をdiv挿入)</div>
<div class="hstack gap-3">水平(横)に配置する場合(この中に各項目をdivで挿入)</div>

6.6 Vertical rule 縦仕切り

<div class="vr"></div>

７．Utilities 便利な機能

7.1 Background 背景色

背景色{background-color:} .bg-□
.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-light .bg-dark .bg-white

7.2 Borders 罫線

罫線囲 .border(全) .border border-top/start/bottom/end-0(部分的に罫線なし上/右/下/左)
.border .border-top-0 .border-start-0 .border-bottom-0 .border-end-0

罫線の太さ .border border-n 注 n:1～5(px)
.border-1 .border-2 .border-3 .border-4 .border-5

罫線の色 .border-primary/secondary/success/info/warning/danger/light/dark/white
.border-primary .border-secondary .border-success .border-info .border-warning .border-danger .border-light .border-dark .border-white

罫線の角丸 .rounded-なし及び2(径0.25rem)/top/start/bottom/end/circle(径50%)/1(径0.2rem)/3((径0.3rem)
.rounded(-2) .rounded-top .rounded-start .rounded-bottom .rounded-end .rounded-circle .rounded-1 .rounded-3

7.3 Colors テキストの色

.text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-light .text-dark .text-black-50 .text-white .text-body

7.4 Float フロート

左側プロ―ト(smまで).float-sm-start

右側フロート(smまで).float-sm-end

フロートなし.float-none

7.5 Text seliection テキスト選択

クリックで全文選択.user-select-all

7.6 Opacity 不透明度

.opacity-100

.opacity-75

.opacity-50

.opacity-25

7.7 Overflow オーバーフロー

.overflow-auto
自動スクロール(設定された幅と高さを超えた場合)

.overflow-hidden
はみ出し部分は非表示(設定幅・高さ超え)

.verflow-visible
はみ出し部分は枠を超えて表示(設定幅・高さ超え)

.overflow-scroll
設定幅・高さを超えなくてもスクロール表示

7.8 Position 位置

位置の基準

.position-static(通常の位置)/relative(相対位置)/absolute(絶対位置)/fixed(画面の絶対位置)/sticky(スクロールに応じた絶対位置)

位置の指定

.top(上から)/bottom(下から)/start(左側から)/end(右側から)-0/50(50%)/100(100%)

要素の中心

.translate-middle(縦・横共中心) .translate-middle-x(横方向のみ)/y(縦方向のみ)

7.9 Shadows 影

.shadow-none 影なし

.shadow-sm 少しの影

.shadow 標準の影

.shadow-lg 大きめの影

7.10 Sizing サイズ

.w-25 幅25%

.w-50 幅50%

.w-75 幅75%

.w-100 幅100%

.w-auto 幅自動

.h-25 高さ

.h-50 高さ

.h-75 高さ

.h-100 高さ

.h-auto 高さ

7.11 Spacing スペース(間隔)

margin(外周)

.m-n(全)、.mx-n(左右)、.my-n(上下)、.ms-n(左)、me-n(右)、.mt-n(上)、.mb-n(下)

padding(内周)

.p-n(全)、px-n(左右)、.py-n(上下)、.ps-n(左)、.pe-n(右)、.pt-n(上)、.pb-n(下)

nの値(共通)

-n=0(0rem)/1(0.25rem)/2(0.5rem)/3(1rem)/4(1.5rem)/5(2rem)

中央配置

.mx-auto

7.12 Text テキスト

左寄せテキスト

中央テキスト

左寄せテキスト

.badge. text-wrap
テキストを指定幅で折り返して包む

.text-decoration-underline

.text-decoration-line-through

サイズ.fs-1

サイズ.fs-2

サイズ.fs-3

サイズ.fs-4

サイズ.fs-5

サイズ.fs-6

.fw-bold 太字

.fw-bolder 親要素に対し太字

.fw-normal 通常の太さ

.fw-light 薄字

.fw-lighter 親要素に対し薄字

fst-italic 斜体

.fst-normal 通常のフォント

.1h-1
狭い行間

.1h-sm
やや狭い行間

.ih-base
標準の行間

.1h-lg
広い行間

１．Bootstrapの適用【htmlに記載】

２．Layout レイアウト

2.1 Breakpoints ブレークポイント(カスタマイズ可能な幅)

2.2 Containers コンテナ(デバイスに合わせたコンテンツ幅)

2.3 Grid グリッド(分割配置)

３．Content コンテンツ

3.1 Typography 本文の体裁

3.2 Images 画像

3.3 Table 表

４．Form フォーム

4.1 Form control フォームコントロール

Sizing 箱の大きさ

4.2 Select 選択

4.3 Checks & radiou チェック＆ラジオ

4.4 Range レンジ

4.5 Input-group 入力グループ

５．Compornentc コンポーネント(構成要素)

5.1 Accordion アコーディオン

Accordion項目１

Accordion項目２

Accordion項目３

5.2 Alerts アラート

5.3 Badge バッジ(表示)

Newの表示例 New

5.4 Breadcrumb パンくずリスト(階層構造の道順を示す)

5.5 Buttons ボタン

5.6 Button group ボタングループ

5.7 Card カード

タイトル

タイトル

タイトル

タイトル

タイトル

タイトル

タイトル１

タイトル２

タイトル３

5.8 Carousel カルーセル(画像のスライド)

左右コントロール付き

インジケータ付き

キャプション付き

インジケータを付ける場合

キャプションを付ける場合(2&3枚目も同様)

5.9 Close button 閉じるボタン

5.10 Collapse 折り畳み

5.11 Dropdowns ドロップダウン

5.12 List group リストグループ

Horizontal 水平

Horizontal 水平

5.13 Modal モダル(通知用ダイアログ)

5.14 Navs & tabs ナビ＆タブ

5.15 Navbar ナビバー

６．Helpers 補足

6.1 Clearfix 左右配置をクリアする

6.2 Colored links 色付リンク

6.3 Ratio レシオ(比率)

6.4 Position 固定

6.5 Stacks スタック

6.6 Vertical rule 縦仕切り

７．Utilities 便利な機能

7.1 Background 背景色

7.2 Borders 罫線

7.3 Colors テキストの色

7.4 Float フロート

7.5 Text seliection テキスト選択

7.6 Opacity 不透明度

7.7 Overflow オーバーフロー

7.8 Position 位置

7.9 Shadows 影

7.10 Sizing サイズ

7.11 Spacing スペース(間隔)

7.12 Text テキスト