div
bootstrap5.css
bootstrap5.css
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
html bootstrap5 Sample
等幅カラム、レスポンシブなし、そのまま縮小：rowとcol
合計12になるようにカラムの幅を指定する：col-2
1カラムのみ幅を設定、残りは等価：col-6
可変幅カラム(コンテンツの文字数により幅が可変になる)：col-auto
col
col-auto：コンテンツ文字数によってが幅が可変
col
col
col-md-auto：Medium以上でコンテンツ文字数によって幅が可変
col
<div class="row">
<div class="col">col</div>
<div class="col-auto">col-auto：コンテンツ文字数によってが幅が可変</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col">col</div>
<!-- col-mdは、Medium以上の指定方法 -->
<div class="col-md-auto">col-md-auto：Medium以上でコンテンツ文字数によって幅が可変</div>
<div class="col">col</div>
</div>
１つのrow内で12を超える場合、勝手に折り返り：col-9
colなしを挿入すると、そこで折り返しが起こる：w-100
ブレイクポイントによる切り替え：col-sm-8
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
グリッドレイアウトのネスト（入れ子、階層化）：colとrow
第1階層: col-sm-9
第2階層: col-8
第2階層: col-4
第1階層: col-sm-3
<!-- rowの幅は、ひとつ上のhtmlタグの幅に制約を受けて100%になる -->
<div class="row">
<div class="col-sm-9">第1階層: col-sm-9
<!-- 階層化colの中にrow、colの幅を基準にして12の計算が始まる -->
<div class="row">
<!-- colを２つ書くと、それぞれの画面の状況により適用されるものが変わる -->
<div class="col-8">第2階層: col-8</div>
<div class="col-4">第2階層: col-4</div>
</div>
</div>
<div class="col-sm-3">第1階層: col-sm-3</div>
</div>
左寄せで配置：justify-content:flex-start
中央寄せで配置：justify-content:flex-center
右寄せで配置：justify-content:flex-end
等間隔に配置：justify-content:space-around
両端から均等に配置：justify-content:space-between
カラム単位での垂直方向整列：align-self-*
align-self-start
align-self-center
align-self-end
<div class="row">
<!-- 垂直上寄せ -->
<div class="col align-self-start">align-self-start</div>
<!-- 垂直中央寄せ -->
<div class="col align-self-center">align-self-center</div>
<!-- 垂直下寄せ -->
<div class="col align-self-end">align-self-end</div>
</div>
画面の状況でカラムの幅を変える、Medium以上：col-md-8
col-12とcol-md-8
col-6とcol-md-4
<div class="row">
<!-- Medium以上：だとmdが優先的に選択される -->
<!-- xl：デスクトップ PC などの大画面モニタ 1200px 以上 -->
<!-- lg：ノート PC などの省サイズモニタ 992px 以上 -->
<!-- md：タブレット端末など 768px 以上 -->
<!-- sm：スマートフォン（横持ち）など 576px 以上 -->
<!-- -:スマートフォン（縦持ち）、IoT 端末など 576px 未満 -->
<div class="col-12 col-md-8">col-12とcol-md-8</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
</div>
画面の状況で変える、Medium以上：Medium以上：col-md-4
行の分割をブレイクポイントで切り替える：d-none d-md-block
ガターなしカラム：no-gutters
何も書かなければガターあり（はみ出る）：rowとcol
カラムのオフセット offset-md-4
オフセットのリセット：offset-md-0
col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
<div class="row">
<div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
<!-- Medium以上でオフセットをクリア -->
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
</div>
コンテンツの並べ替え：order-1～order-12
コンテンツの並べ替え：order-first
第1のカラム（順序指定なし）
第2のカラム（順序指定なし）
第3のカラム（順序指定は1）
<div class="row">
<div class="col">第1のカラム（順序指定なし）</div>
<div class="col">第2のカラム（順序指定なし）</div>
<!-- order-firstが最初に並ぶ、プログラムでhtmlを書くときは便利 -->
<div class="col order-first">第3のカラム（順序指定は1）</div>
</div>
垂直整列：align-items-startとalign-items-centerとalign-items-end
col
col
col
col
col
col
col
col
col
<!-- 上寄せ高さは隣接rowで決まる模様 -->
<div class="row align-items-start">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row align-items-center">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<!-- 下寄せ高さは隣接rowで決まる模様 -->
<div class="row align-items-end">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
flexデフォルト、左から並ぶ、改行はしない：d-flex
flexの折り返しなし：flex-nowrap
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-nowrap">
<!-- d-flex以下は、インラインになるとrowとcolと同じ関係になる -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
flexのいい感じで自動で折り返す：flex-wrap
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
flex文字13
flex文字14
flex文字15
flex文字16
flex文字17
flex文字18
flex文字19
flex文字20
<!-- 羅列すれば、勝手に自動で折り返してくれる（制御する必要なし） -->
<!-- 文字数より大きさも自動で決まる） -->
<!-- rowとcolとの違いは、ひたすら列挙して、改行や幅や位置などを自動整列していくれるところ -->
<div class="d-flex flex-wrap">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
<div>flex文字13</div>
<div>flex文字14</div>
<div>flex文字15</div>
<div>flex文字16</div>
<div>flex文字17</div>
<div>flex文字18</div>
<div>flex文字19</div>
<div>flex文字20</div>
</div>
特定のflex文字の表示順序を入れ替えるクラス：order
flexコンテナを左と右側でそれぞれ真ん中空ける形式：mr-auto
flexコンテナを左と右側でそれぞれ真ん中空ける形式：ml-auto
flex文字の伸縮 デフォルト：d-flex
flexの幅を伸縮で埋める機能：flex-grow
flexの幅を縮小で調整する（他を優先）：flex-shrink
flex文字01（flex-shrink-1）
flex文字02
flex文字03
<!-- flex文字の幅を縮小で調整する -->
<div class="d-flex" style="height: 100px">
<div class="p-2 flex-shrink-1">flex文字01（flex-shrink-1）</div>
<div class="p-2 w-100">flex文字02</div>
<div class="p-2 w-100">flex文字03</div>
</div>
flex幅を隙間をなくして伸縮均衡：flex-fill
flexコンテナの主軸方向 左から右：flex-row
flex横の均等配置/左詰めで整列：justify-content-start
flex横の均等配置/右詰めで整列：justify-content-end
flex横の均等配置/センタに整列：justify-content-center
flex横の均等配置/左と右は合わせて、間隔、余白ありで整列：justify-content-between
flex横の均等配置/センターで間隔、余白ありで整列：justify-content-around
flex縦の均等配置/トップからスタートする：align-content-start
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-start flex-wrap" style="height: 200px">
<!-- 文字列01が上段の左端からスタートする -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
flex縦の均等配置/順序を反転させて下段からスタートする：flex-wrap-reverse
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-wrap-reverse">
<!-- 文字列01が下段からスタートする、最新情報を上に出す場合など -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
flex縦の均等配置/高さ固定で、中央寄せ：align-content-center
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-center flex-wrap" style="height: 200px">
<!-- height固定で、中央寄せ -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
flex縦の均等配置/高さ固定で、ボトム詰め：align-content-end
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-end flex-wrap" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
flex縦の均等配置/高さ固定で、上と下：align-content-between
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
<div class="d-flex align-content-between flex-wrap" style="height: 200px">
<!-- height固定で、上と下 -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
</div>
flex縦の均等配置/高さ固定で、行間自動調整：align-content-around
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
<div class="d-flex align-content-around flex-wrap" style="height: 200px">
<!-- height固定で、行間自動調整 -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
</div>
flex縦の均等配置/縦の高さも勝手に合わせてくる：align-content-stretch
flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-stretch flex-wrap" style="height: 400px">
<!-- height固定のサイズで、flaxの高さも自動で調整する -->
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
<div>flex文字04</div>
<div>flex文字05</div>
<div>flex文字06</div>
<div>flex文字07</div>
<div>flex文字08</div>
<div>flex文字09</div>
<div>flex文字10</div>
<div>flex文字11</div>
<div>flex文字12</div>
</div>
flexコンテナー内のアイテムの配置/上：align-items-start
flexコンテナー内のアイテムの配置/下：align-items-end
flexコンテナー内のアイテムの配置/ストレッチ：align-items-stretch
flexコンテナー内のアイテムの配置/中央：align-items-center
flexコンテナー内のアイテムの配置/ベースライン：align-items-baseline
flex文字01
（padding: 2rem）
（padding: 2rem）
flex文字02
（padding: 4rem）
（padding: 4rem）
flex文字03
（padding: 1rem）
（padding: 1rem）
<div class="d-flex align-items-baseline" style="height: 200px">
<!-- paddingも含めて、flaxの大きさが決まる 文字の位置の高さが同じ-->
<div style="padding: 2rem">flex文字01 <br>（padding: 2rem）</div>
<div style="padding: 4rem">flex文字02 <br>（padding: 4rem）</div>
<div style="padding: 1rem">flex文字03 <br>（padding: 1rem）</div>
</div>
flexコンテナー内のアイテムの配置/自身ストレッチ：align-self-stretch
flex文字01
flex文字02（align-self-stretch）
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-stretch">flex文字02（align-self-stretch）</div>
<div>flex文字03</div>
</div>
flexコンテナー内のアイテムの配置/自身上：align-self-start
flex文字01
flex文字02（align-self-start）
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-start">flex文字02（align-self-start）</div>
<div>flex文字03</div>
</div>
flexコンテナー内のアイテムの配置/自身下：align-self-end
flex文字01
flex文字02（align-self-end）
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-end">flex文字02（align-self-end）</div>
<div>flex文字03</div>
</div>
flexコンテナー内のアイテムの配置/自身中央：align-self-center
flex文字01
flex文字02（align-self-center）
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-center">flex文字02（align-self-center）</div>
<div>flex文字03</div>
</div>
flexコンテナー内のアイテムの配置/自身ベースライン：align-self-baseline
flex文字01
flex文字02（align-self-baseline）
flex文字03
<div class="d-flex" style="height: 100px">
<div>flex文字01</div>
<div class="align-self-baseline">flex文字02（align-self-baseline）</div>
<div>flex文字03 </div>
</div>
flexコンテナー内のアイテムの配置/rowで右から左：flex-row-reverse
flexコンテナー内のアイテムの配置/上から下：flex-column
flexコンテナー内のアイテムの配置/下から上：flex-column-reverse
カード、画像あり、タイトル、本文、ボタンのセット：card
<!-- カードの枠：card -->
<div class="card" style="max-width: 25rem;">
<!-- レイアウトされる画像：card-img-top -->
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="...">
<!-- カード本文：card-body -->
<div class="card-body">
<!-- カードタイトル：card-title -->
<h4 class="card-title">カードのタイトル</h4>
<!-- カードの内容文：card-text -->
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードの背景色と文字色の設定：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;">
<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-transparent
ヘッダー初期設定の背景色
カードのタイトル
カードの内容
ヘッダー背景色の除去：bg-transparent
カードのタイトル
カードの内容
<div class="card 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 class="card-footer">フッター初期設定の背景色</div>
</div>
<div class="card mb-3" style="max-width: 25rem;">
<!-- デフォルトの背景色を変える場合：bg-transparent -->
<div class="card-header bg-transparent">ヘッダー背景色の除去：bg-transparent</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer bg-transparent">フッター背景色の除去：bg-transparent</div>
</div>
カードのデフォルトのボーダー色を変更する：border-primary
カードのヘッダー
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<div class="card 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>
<!-- カード枠のボーダー色：青 border-primary -->
<div class="card border-primary mb-3" style="max-width: 25rem;">
<!-- ヘッダーのボーダー色：青 border-primary -->
<div class="card-header border-primary">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
カードデッキによるレイアウト：card-deck
カード01
カードの内容
カード02
カードの内容
カード03
カードの内容
カードの内容
<div class="card-deck">
<!-- 複数のカードをレイアウトするためにcard-deckを使う、隙間ができる -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/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">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
カードグループによるレイアウト：card-group
カード01
カードの内容
カード02
カードの内容カードの内容
カード03
カードの内容
カードの内容
<div class="card-group">
<!-- 複数のカードをレイアウトするためにcard-groupを使う、隙間が出来ない -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード2 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード3 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/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">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
カードカラムによるレイアウト：card-columns
カード01
ここに文章が入ります
カード02
文章
カード03
文章
文章
カード04
文章
カード05
文章
文章
カード07
文章
カード08
文章
文章
<div class="card-columns">
<!-- ★複数のカードをレイアウトするために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">
<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-right">
<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>
グリッドレイアウトとカード→カード幅の制約が決まる：card
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
</div>
</div>
カードに画像を配置する：card-img-top
カードの内容
<!-- カード上部に画像を配置：card-img-top -->
<div class="card mb-3" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
</div>
カードに下画像を配置する：card-img-bottom
カードの内容
<!-- カード下部に画像を配置：card-img-bottom -->
<div class="card" style="max-width: 25rem;">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
<img class="card-img-bottom" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-bottom"
alt="...">
</div>
カードの画像とテキストを重ね合わせる：card-img-overlay
<div class="card">
<img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
<div class="card-img-overlay">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
カード内のボーダーの無いリストグループ：list-group-flush
<div class="card" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<!-- list-group-flushは、ボーダーの無いリストグループ-->
<ul class="list-group list-group-flush">
<li class="list-group-item">リスト01</li>
<li class="list-group-item">リスト02</li>
<li class="list-group-item">リスト03</li>
</ul>
<!-- カードの本文：card-body -->
<div class="card-body">
<a href="#" class="card-link">カード内リンク</a>
<a href="#" class="card-link">カード内リンク</a>
</div>
</div>
カードにピル型ナビゲーションを組み込む：nav-pillsとcard-header-pills
<div class="card">
<div class="card-header">
<!-- ピル型のナビゲーション：card-header-pills -->
<ul class="nav nav-pills card-header-pills">
<li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードにナビゲーションを組み込む：nav-tabs
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- タブ型のナビゲーション：card-header-tabs -->
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードのサイズを変更する：w-75
カード内のテキストを左寄せ、中央、右寄せ：text-centerとtext-right
<!-- 標準（左寄せ） -->
<div class="card">
<div class="card-body">
<h4 class="card-title">標準（左寄せ）</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- divに設定する、中央寄せ：text-center -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">中央寄せ：text-center</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- divに設定する、右寄せ：text-right -->
<div class="card text-right">
<div class="card-body">
<h4 class="card-title">右寄せ：text-right</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
文字に色をつける：text-primary
<div class="text-center">
<p><a href="#" class="text-primary">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>
幅を指定する：w-25
高さを指定する：h-25
インラインのコード表記：code
黒背景に白抜き文字/ユーザインプット表記：kbd
サンプル出力：samp
アラートの背景色：alert-*
alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark
<div class="alert alert-primary" role="alert">alert-primary</div>
<div class="alert alert-secondary" role="alert">alert-secondary</div>
<div class="alert alert-success" role="alert">alert-success</div>
<div class="alert alert-danger" role="alert">alert-danger</div>
<div class="alert alert-warning" role="alert">alert-warning</div>
<div class="alert alert-info" role="alert">alert-info</div>
<div class="alert alert-light" role="alert">alert-light</div>
<div class="alert alert-dark" role="alert">alert-dark</div>
アラートを閉じるボタンで消す：alert-dismissible
右側の「×」マークをクリックするとアラートが閉じます
<div class="alert alert-warning alert-dismissible fade show" role="alert">
右側の「×」マークをクリックするとアラートが閉じます
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
アラート内にコンテンツを追加する：alert
devで背景色とテキストの文字
インライン表示のdiv：d-inline
要素の表示／非表示を設定する：d-lg-none
印刷時の表示／非表示を設定する：d-print-none
スクリーンのみ表示（印刷時のみ非表示）
印刷時のみ表示（スクリーンでは非表示）
<div class="d-print-none">スクリーンのみ表示（印刷時のみ非表示）</div>
<div class="d-none d-print-block">印刷時のみ表示（スクリーンでは非表示）</div>
Embed埋め込み/アスペクト比16:9：embed-responsive
<!-- 大きさが自動調整される -->
<!-- アスペクト比を持つ親要素に iframe のような埋め込みをラップします -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/SGqg_ZzThDU?rel=0"
allowfullscreen></iframe>
</div>
フロートを解除する：clearfix
フロートを解除しない（重なっているので背景色がでない）
Float(画像と文字)：float-left
<div class="clearfix mb-2">
<div class="float-left"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
文字が重ならない、画像と同じ位置からスタート
</div>
<div class="clearfix mb-2">
<div class="float-right"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
文字が重ならない、画像と同じ位置からスタート
</div>
<div class="clearfix">
<div class="float-none"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
画像の位置から改行されて、文字がスタート
</div>
Float（画像同士）左と右：float-leftとfloat-right
<!-- divでclearfixなので、/div後はfloatを引きずらない -->
<div class="clearfix">
<img src="https://via.placeholder.com/200x200" class="float-left" alt="左寄せ画像">
<img src="https://via.placeholder.com/200x200" class="float-right" alt="右寄せ画像">
</div>
divとaタグでリストグループ：list-groupとlist-group-item
<!-- サイドメニューでリンクさせる -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
<a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
<a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
</div>
リストグループ背景色：list-group-item-*
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">これは「primary」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">これは「secondary」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">これは「success」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">これは「danger」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">これは「warning」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">これは「info」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">これは「light」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">これは「dark」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action">これは「デフォルト」のリスト項目です。</a>
</div>
クラスのリストグループアクティブ状態：active
<!-- activeを付けると、背景色が濃くなる -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary active">これはアクティブ状態の「primary」。</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-secondary active">これはアクティブ状態の「secondary」</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success active">これはアクティブ状態の「success」。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger active">これはアクティブ状態の「danger」</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning active">これはアクティブ状態の「warning」</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info active">これはアクティブ状態の「info」</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light active">これはアクティブ状態の「light」</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark active">これはアクティブ状態の「dark」</a>
<a href="#" class="list-group-item list-group-item-action active">これはアクティブ状態の「デフォルト（何も設定なし）」</a>
</div>
aタグに複数の要素を入れる：list-group-itemとflex-column
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<!-- justify-content-betweenを使って左右に設置する -->
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">hヘッダ</h5>
<small>smallコンテンツ</small>
</div>
<p class="mb-1">pコンテンツ</p>
<small>smallコンテンツ</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">hヘッダ</h5>
<small class="text-muted">smallコンテンツ</small>
</div>
<p class="mb-1">pコンテンツ</p>
<small class="text-muted">smallコンテンツ</small>
</a>
</div>
li 枠なしのリストグループ：list-group-flush
- リスト項目1
- リスト項目2
- リスト項目3
<div>
<ul class="list-group list-group-flush">
<li class="list-group-item">リスト項目1</li>
<li class="list-group-item">リスト項目2</li>
<li class="list-group-item">リスト項目3</li>
</ul>
</div>
ボタンのリストグループ：list-group-item-action
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
<button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
<button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
</div>
レスポンシブテーブル：table-responsive
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<!-- tableタグに設定するのではなく、divで囲む -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<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>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルsm未満：table-responsive-sm
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-sm mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<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>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルmd未満：table-responsive-md
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-md mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<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>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルlg未満：table-responsive-lg
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-lg mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<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>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルxl未満：table-responsive-xl
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-xl mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<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>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
button要素を使用したドロップダウン：dropdownとdata-toggle
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
ボタングループに設定するドロップダウン：btn-group
<!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
メニュー項目にbuttonを使用する：dropdown-menu
<div class="dropdown">
<!-- 切り替えボタン -->
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="dropdown-item" type="button">メニュー01</button>
<button class="dropdown-item" type="button">メニュー02</button>
<button class="dropdown-item" type="button">メニュー03</button>
</div>
</div>
メニューの位置をボタンと右寄せにする：dropdown-menu-right
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
メニューの位置を右寄せにしたドロップダウン
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">メニュー01</button>
<button class="dropdown-item" type="button">メニュー02</button>
<button class="dropdown-item" type="button">メニュー03</button>
</div>
</div>
切り替えボタンにaタグ要素を使用したドロップダウン：dropdown-toggle
<div class="dropdown">
<!-- 切り替えボタン -->
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
メニュー項目にアクティブの状態を設定する：active
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item disabled" href="#">メニュー02（無効）</a>
<a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
</div>
</div>
左側表示のドロップメニュー：dropleft
<div class="container py-5 d-flex justify-content-center">
<!-- 左方向へのドロップ -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">左方向へのドロップ</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
右側表示のドロップメニュー：dropright
<div class="container py-5 d-flex justify-content-center">
<!-- 右方向へのドロップ -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">右方向へのドロップ</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
上側表示のドロップメニュー：dropup
<div class="container py-5 d-flex justify-content-center">
<!-- 上方向へのドロップ -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">上方向へのドロップ</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
オーバーフロー（枠から飛び出す）を制約する設定：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-toggle="dropdown"
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>
スペースがない場合に、反対側にドロップダウンを表示させる：data-flip
<div class="box" style="overflow: auto">
<br><br><br><br><br>
<div class="dropdown">
<!-- data-flip="true"-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
</div>
ドロップダウンのオフセット値を設定する：data-offset
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
ドロップダウンメニューにdivでテキストを配置する：text-muted
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
<p>メニュー内のテキストその1</p>
<p class="text-danger">メニュー内のテキストその2</p>
</div>
</div>
トグルボタンでdivコンテンツに様々な要素を追加する：dropdown-toggleとdropdown-menu
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<!-- divで作成するコンテンツありのメニュー -->
<div class="dropdown-menu">
<h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
<form class="px-4 py-3">
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="password">パスワード</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> ログイン情報を記憶 </label>
</div>
<button type="submit" class="btn btn-secondary">ログイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#1">初めての方</a>
<a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
</div>
</div>
ドロップダウンにリンクなしの項目を追加する：dropdown-item-text
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">ドロップダウン</button>
<div class="dropdown-menu">
<!-- メニューの説明分など入れたい場合に利用 -->
<span class="dropdown-item-text">非リンクテキスト</span>
<a class="dropdown-item" href="#1">メニュー1</a>
<a class="dropdown-item" href="#2">メニュー2</a>
<a class="dropdown-item" href="#3">メニュー3</a>
</div>
</div>
ドロップダウンで用意されているJSメソッド：dropdpown('toggle')
<!-- ドロップダウン -->
<div class="dropdown">
<!-- 切り替えボタン -->
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- 最初から選択肢を出しておく -->
<div class="dropdown-menu" aria-labelledby="dropdownExample">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
<script>
$(function () {
$('#dropdownExample').dropdown('toggle');
});
</script>
ドロップダウンのオフセット値を設定する：offset
<!-- data-offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。 -->
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
<script>
$(function () {
$('#dropdownMenuButton').dropdown({
offset: '10, 20'
})
});
</script>
スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split
<div class="btn-group">
<button type="button" class="btn btn-secondary">スプリットボタン</button>
<!-- ボタンとメニューを分割して表示する -->
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
画像の中央寄せ：text-center
<!-- divにclassを設定する -->
<div class="text-center">
<img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
</div>
ジャンボトロン：jumbotron
ジャンボトロンを全幅で表示する：jumbotron-fluid
Fluid jumbotron
これは全幅のジャンボトロンのサンプルです。
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h4 class="display-3">Fluid jumbotron</h4>
<p class="lead">これは全幅のジャンボトロンのサンプルです。</p>
</div>
</div>
影：Shadows
影なし（shadow-none）
小さめの影（shadow-sm）
標準の影（shadow）
大きめの影（shadow-lg）
フォームの基本要素：form-groupとform-control
<form>
<div class="form-group">
<!-- 入力要素ごとにform-group、入力エリアはform-control -->
<label for="email1">メールアドレス</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
<small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
</div>
<div class="form-group">
<label for="password1">パスワード</label>
<input type="password" class="form-control" id="password1" placeholder="パスワードを入力">
</div>
<div class="form-group">
<label for="select1">プルダウンメニューから選んでください</label>
<select class="form-control" id="select1">
<option>メニュー1</option>
<option>メニュー2</option>
<option>メニュー3</option>
<option>メニュー4</option>
<option>メニュー5</option>
</select>
</div>
<!-- 複数選択のプルダウンメニュー -->
<div class="form-group">
<label for="select2">複数選択のプルダウンメニュー</label>
<select multiple class="form-control" id="select2">
<option>複数選択可A</option>
<option>複数選択可B</option>
<option>複数選択可C</option>
<option>複数選択可D</option>
<option>複数選択可E</option>
</select>
</div>
<div class="form-group">
<label for="textarea1">複数行のテキスト入力欄</label>
<textarea class="form-control" id="textarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="file1">ファイルを選択</label>
<input type="file" class="form-control-file" id="file1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox01">
<label class="form-check-label" for="">チェックする</label>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
フォームタイトル：block-title-infoとfa-shopping-basket
formタイトル
<!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
<!-- font-awesomeによるアイコン -->
<h3 class="block-title-info">
<i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトル
</h3>
<div class="form-row">
<!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
<div class="form-group col-sm-6">
<label for="text4a">First name</label>
<input type="text" class="form-control" id="text4a" placeholder="First name" />
</div>
<div class="form-group col-sm-6">
<label for="text4b">Last name</label>
<input type="text" class="form-control" id="text4b" placeholder="Last name" />
</div>
<div class="form-group col-sm-6">
<label for="text4a">First name</label>
<input type="text" class="form-control" id="text4a" placeholder="First name" />
</div>
<div class="form-group col-sm-6">
<label for="text4b">Last name</label>
<input type="text" class="form-control" id="text4b" placeholder="Last name" />
</div>
<div class="form-group col-sm-6">
<label for="select1a">Select:</label>
<select id="select1a" class="form-control">
<option>Select A</option>
<option>Select B</option>
</select>
</div>
<div class="form-group col-sm-6">
<label for="file1">File:</label>
<input type="file" id="file1" class="form-control-file" />
</div>
<div class="form-group col-sm-6">
<label for="select1a">check:</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1a" checked />
<label class="form-check-label" for="check1a">Check A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1b" />
<label class="form-check-label" for="check1b">Check B</label>
</div>
</div>
<div class="form-group col-sm-6">
<label for="select1a">radio:</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
<label class="form-check-label" for="radio1a">Check A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio1" id="radio1b" />
<label class="form-check-label" for="radio1b">Check B</label>
</div>
</div>
</div>
読み取りテキストを、枠を非表示にする：form-control-plaintext
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<!-- inputの枠を表示しない -->
<input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
<div class="col-sm-10">
<!-- passwordを使うと、入力内容が*として表示される -->
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
</form>
入力コントロールのサイズを調整する：-lgと-sm
<form>
<!-- 大サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input1">大サイズのテキスト入力欄 form-control-lg</label>
<input type="text" class="form-control form-control-lg" id="input1" placeholder="form-control-lg">
</div>
<!-- 標準サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input2">標準サイズのテキスト入力欄</label>
<input type="text" class="form-control" id="input2" placeholder="Default size">
</div>
<!-- 小サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input3">小サイズのテキスト入力欄 form-control-sm</label>
<input type="text" class="form-control form-control-sm" id="input3" placeholder="form-control-sm">
</div>
<hr>
<!-- 大サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select1">大サイズのプルダウンメニュー form-control-lg</label>
<select class="form-control form-control-lg" id="select1">
<option>form-control-lg</option>
</select>
</div>
<!-- 標準サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select2">標準サイズのプルダウンメニュー</label>
<select class="form-control" id="select2">
<option>Default size</option>
</select>
</div>
<!-- 小サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select3">小サイズのプルダウンメニュー form-control-sm</label>
<select class="form-control form-control-sm" id="select3">
<option>form-control-sm</option>
</select>
</div>
</form>
ファイル選択：custom-file
<form>
<div class="mb-5">
<input type="file" id="dafaultFile" lang="ja">
<label for="dafaultFile">ファイル選択...</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" lang="ja">
<label class="custom-file-label" for="customFile">ファイル選択...</label>
</div>
</form>
チェックボックスを横並びに変更する：form-check-inline
<form>
<!-- form-groupではなく、form-checkを使う -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkbox02" value="option1">
<label class="form-check-label" for="checkbox02">1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkbox03" value="option2">
<label class="form-check-label" for="checkbox03">2</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkbox04" value="option3" disabled>
<label class="form-check-label" for="checkbox04">3</label>
</div>
</form>
チェックボックスを無効にする：disabled
ラベル表示のない項目を作成する
<form>
<div class="form-check">
<input type="checkbox" class="form-check-input position-static" id="checkbox07" value="option1" aria-label="...">
</div>
<div class="form-check">
<input type="radio" class="form-check-input position-static" name="blankRadio" id="blankRadio1" value="option1"
aria-label="...">
</div>
</form>
カスタムのチェックボックスに不確定を指定する：indeterminate
<form>
<!-- カスタムフォームのチェックボックス -->
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="checkbox08" checked>
<label class="custom-control-label" for="checkbox08">選択済み</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="checkbox09" unchecked>
<label class="custom-control-label" for="checkbox09">未選択</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input indeterminate-box" id="checkbox10">
<label class="custom-control-label" for="checkbox10">不確定</label>
</div>
</form>
カスタムのチェックボックスとラジオボタンを無効にする
<form>
<!-- チェックボックスを無効にする -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox11" disabled>
<label class="custom-control-label" for="checkbox11">
チェック（無効）
</label>
</div>
<!-- ラジオボタンを無効にする -->
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="checkbox12" class="custom-control-input" disabled>
<label class="custom-control-label" for="checkbox12">
オプション（無効）
</label>
</div>
</form>
読み取り専用のテキストを表示する：readonly
カスタムのチェックボックスとラジオボタンを作成する：custom-checkboxとcustom-radio
<form>
<!-- カスタムフォームのチェックボックス -->
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="checkbox13">
<label class="custom-control-label" for="checkbox13">チェックする</label>
</div>
<!-- カスタムフォームのラジオボタン -->
<div class="custom-control custom-radio">
<input type="radio" id="option1" name="option" class="custom-control-input">
<label class="custom-control-label" for="option1">オプション1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="option2" name="option" class="custom-control-input">
<label class="custom-control-label" for="option2">オプション2</label>
</div>
</form>
froｍにグリッドレイアウトを利用する：rowとcol
自動サイズ調整のカラムを作成する：form-rowとcol-auto
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inputName">氏名</label>
<input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
</div>
<div class="col-auto">
<label class="sr-only" for="inputUsername">ユーザーネーム</label>
<div class="input-group mb-2">
<input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> チェックする </label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">送信</button>
</div>
</div>
</form>
コンパクトなカラム間隔のフォーム：form-rowとform-groupとcol-md-6
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail">メールアドレス</label>
<input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
</div>
<div class="form-group col-md-6">
<label for="inputPassword">パスワード</label>
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">国</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">郵便番号</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="form-group col-md-6">
<label for="inputCity">都道府県</label>
<input type="text" class="form-control" id="inputCity">
</div>
</div>
<div class="form-group">
<label for="inputAddress1">住所1</label>
<input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
</div>
<div class="form-group">
<label for="inputAddress2">住所2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check">
<label class="form-check-label" for="check">チェックする</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
一連の入力グループをまとめて無効にする：disabled
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">無効な入力欄</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">無効なプルダウンメニュー</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
<label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
</div>
<button type="submit" class="btn btn-primary">無効な送信ボタン</button>
</fieldset>
</form>
水平配置のフォームを作成する：form-groupとrowとcol
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
<label class="form-check-label" for="radios1">
オプション1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
<label class="form-check-label" for="radios2">
オプション2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
<label class="form-check-label" for="radios3">
オプション3（無効）
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">チェックボックス</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1">
<label class="form-check-label" for="check1">
チェックする
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">サインイン</button>
</div>
</div>
</form>
インラインのフォーム：form-inline
<!-- formにclassを設定する -->
<form class="form-inline">
<label class="sr-only" for="name">氏名</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
<label class="sr-only" for="username">ユーザーネーム</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="checkbox20">
<label class="form-check-label" for="checkbox20">
チェックする
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">送信</button>
</form>
ラベルサイズを調整する：col-form-label-smとform-control-sm
<form>
<div class="form-group row">
<!-- 小サイズのラベル -->
<label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ：col-form-label-sm</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm">
</div>
</div>
<div class="form-group row">
<!-- 標準サイズのラベル -->
<label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="labelDefault" placeholder="Default size">
</div>
</div>
<div class="form-group row">
<!-- 大サイズのラベル -->
<label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ：col-form-label-lg</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg">
</div>
</div>
</form>
サーバー側で入力検証を行う場合：is-valid
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">姓</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="山田"
required>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">名</label>
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="太郎"
required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">市町村</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="市町村名を入力" required>
<div class="invalid-feedback">市町村名を入力してください</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">都道府県</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="都道府県名を入力" required>
<div class="invalid-feedback">都道府県名を入力してください</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">郵便番号</label>
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="郵便番号を入力" required>
<div class="invalid-feedback">郵便番号を入力してください</div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
カスタムセレクト：custom-select
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">オプション</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>選択してください</option>
<option value="1">オプション1</option>
<option value="2">オプション2</option>
<option value="3">オプション3</option>
</select>
</div>
入力コントロールの前にアドオンを配置：input-group-prepend
@
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
入力コントロールの後にアドオンを配置：input-group-append
ラベル付きの入力グループ：input-group-append
https://example.com/users/
<!-- 固定の文字列を書いておいて、その続きを入力してもらう -->
<label for="basic-url">サイトのURL</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon5">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon5">
</div>
入力グループ アドオンをチェックボックスやラジオボタンにする：input-group-append
<!-- input=groupを使う -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="次のテキスト入力用のチェックボックス">
</div>
</div>
<input type="text" class="form-control" aria-label="チェックボックス付テキスト入力欄">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="次のテキスト入力用のラジオボタン">
</div>
</div>
<input type="text" class="form-control" aria-label="ラジオボタン付テキスト入力欄">
</div>
入力グループ ボタン付きアドオン：input-group-append
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">検索</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button">好き</button>
</div>
<input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">嫌い</button>
</div>
</div>
入力グループ ドロップダウン付きアドオン：input-group-append
<div class="input-group">
<input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
<div class="input-group-append">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">アクション</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
</div>
</div>
</div>
入力グループ 複数の入力コントロール：input-group-append
入力グループ 複数のアドオンを組み合わせる：input-group-append
$ 0.00
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="次のテキスト入力用のラジオボタン">
</div> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="金額">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="金額">
<div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
<div class="input-group-text">
<input type="checkbox" aria-label="前のテキスト入力用のチェックボックス">
</div>
</div>
</div>
入力グループ スプリットボタン付きアドオン：input-group-append
<div class="input-group">
<input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
<div class="input-group-append">
<button type="button" class="btn btn-secondary">アクション</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="sr-only">ドロップダウン切替</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
</div>
</div>
</div>
入力グループのサイズ調整/中デフォルト：input-group
Default
<!-- 標準サイズの入力グループ -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
入力グループのサイズ調整/小： input-group-sm
Small
<!-- 小サイズの入力グループ -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
入力グループのサイズ調整/大：input-group-lg
Large
<!-- 大サイズの入力グループ -->
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
フォームバリデーション：novalidate
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation01">姓</label>
<input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
<div class="valid-feedback">
入力済！
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validation02">名</label>
<input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
<div class="valid-feedback">
入力済！
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation03">市町村</label>
<input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
<div class="invalid-feedback">
市町村名を入力してください
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation04">都道府県</label>
<input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
<div class="invalid-feedback">
都道府県名を入力してください
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation05">郵便番号</label>
<input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
<div class="invalid-feedback">
郵便番号を入力してください
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
<!-- 無効な入力がある場合にフォームの送信を無効にする -->
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
// Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
var forms = document.getElementsByClassName('needs-validation');
// ループして帰順を防ぐ
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
ツールチップJS：valid-tooltip
<!-- マウスオンで説明文を表示する -->
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation01">姓</label>
<input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
<div class="valid-tooltip"> 入力済！ </div>
</div>
<div class="col-md-6 mb-3">
<label for="validation02">名</label>
<input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
<div class="valid-tooltip"> 入力済！ </div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation03">市町村</label>
<input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
<div class="invalid-tooltip"> 市町村名を入力してください </div>
</div>
<div class="col-md-3 mb-3">
<label for="validation04">都道府県</label>
<input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
<div class="invalid-tooltip"> 都道府県名を入力してください </div>
</div>
<div class="col-md-3 mb-3">
<label for="validation05">郵便番号</label>
<input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
<div class="invalid-tooltip"> 郵便番号を入力してください </div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
<!-- 無効な入力がある場合にフォームの送信を無効にする -->
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
// Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
var forms = document.getElementsByClassName('needs-validation');
// ループして帰順を防ぐ
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
レンジ入力：form-control-range
<!-- レンジ上の●をマウスで動かして入力させる -->
<form>
<div class="form-group">
<label for="formControlRange">レンジ入力の例</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
カスタムレンジ入力：custom-range
<!-- レンジ上の●をマウスで動かして入力させる -->
<form>
<div class="form-group mb-5">
<label for="customRange1">カスタムレンジ入力の例</label>
<input type="range" class="custom-range" id="customRange1">
</div>
<div class="form-group mb-5">
<label for="customRange2">0－５まで（min="0",max="5"）</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
</div>
<div class="form-group mb-5">
<label for="customRange3">0－５まで、0.5刻み（step="0.5"）</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
</div>
</form>
ラジオボタンをボタンに変更する：labelとbtnとdata-toggle=buttons
<div class="btn-group" data-toggle="buttons">
<!-- labelでinputを囲む -->
<label class="btn btn-secondary active">
<input type="radio" checked autocomplete="off">ラジオ1
</label>
<label class="btn btn-secondary">
<input type="radio" autocomplete="off">ラジオ2
</label>
<label class="btn btn-secondary">
<input type="radio" autocomplete="off">ラジオ3
</label>
</div>
チェックボックスをボタン変更する：labelとbtnとdata-toggle=buttons
<!-- data-toggle="button" を指定すると、トグルボタンを作成することができます -->
<!-- トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持される -->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off">チェック1
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">チェック2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off">チェック3
</label>
</div>
ボタングループ：btn-group
ボタンツールバー：btn-toolbar
<div class="btn-toolbar" role="toolbar" aria-label="ボタンツールバー">
<!-- ボタンをひとまとめにすることができる -->
<div class="btn-group mr-2" role="group" aria-label="ボタングループ1">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="ボタングループ2">
<button type="button" class="btn btn-secondary">A</button>
<button type="button" class="btn btn-secondary">B</button>
<button type="button" class="btn btn-secondary">C</button>
</div>
<div class="btn-group" role="group" aria-label="ボタングループ3">
<button type="button" class="btn btn-secondary">D</button>
</div>
</div>
ボタングループ：ボタンのサイズ変更：btn-group-lg
<div class="btn-group btn-group-lg" role="group" aria-label="グループ1">
<button type="button" class="btn btn-secondary">大左ボタン</button>
<button type="button" class="btn btn-secondary">大中ボタン</button>
<button type="button" class="btn btn-secondary">大右ボタン</button>
</div>
<hr>
<div class="btn-group" role="group" aria-label="グループ2">
<!-- 何もなければデフォルト -->
<button type="button" class="btn btn-secondary">左ボタン</button>
<button type="button" class="btn btn-secondary">中ボタン</button>
<button type="button" class="btn btn-secondary">右ボタン</button>
</div>
<hr>
<!-- btn-group-sm -->
<div class="btn-group btn-group-sm" role="group" aria-label="グループ3">
<button type="button" class="btn btn-secondary">小左ボタン</button>
<button type="button" class="btn btn-secondary">小中ボタン</button>
<button type="button" class="btn btn-secondary">小右ボタン</button>
</div>
ドロップダウンメニュー：data-toggleとdropdown
<!-- .dropdown, .dropdown-toggle, data-toggle="dropdown", .dropdown-menu, .dropdown-item を組み合わせてドロップダウンメニューを作成する -->
<div class="btn-group" role="group" aria-label="ドロップダウンを含むボタングループ">
<button type="button" class="btn btn-secondary">1</button>
<div class="btn-group" role="group">
<button id="dropmenu1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="dropmenu1">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
</div>
</div>
</div>
垂直方向ボタングループ：btn-group-vertical
<div class="btn-group-vertical" role="group" aria-label="ドロップダウンを含むボタングループ">
<button type="button" class="btn btn-secondary">上ボタン</button>
<button type="button" class="btn btn-secondary">中ボタン</button>
<div class="btn-group" role="group">
<button id="drop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="drop2">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
</div>
</div>
<button type="button" class="btn btn-secondary">下ボタン</button>
</div>
メディアオブジェクト画像とタイトルと説明のセット：media
メディアオブジェクト上部に画像を配置：align-self-start
タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります <div class="media">
<!-- アイキャッチなどに利用 -->
<img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
</div>
</div>
メディアオブジェクト画像の配置を変える：order-*
タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。メディアオブジェクトのリスト：mediaとmedia-body
-
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります
<!-- マーカなし -->
<ul class="list-unstyled">
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
</ul>
メディアオブジェクトの入れ子：media
タイトル
ここに文章が入りますここに文章が入ります子のタイトル
ここに文章が入りますここに文章が入ります <div class="media">
<img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入りますここに文章が入ります
<!-- media-bodyの中にさらにmedia -->
<div class="media mt-3">
<a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
<div class="media-body">
<h5>子のタイトル</h5>
ここに文章が入りますここに文章が入ります
</div>
</div>
</div>
</div>
タブとタブパネル：navとnav-tabsとtab-contentとtab-pane
ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
<!-- タブ部分 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">プロフィール</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
aria-controls="contact" aria-selected="false">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<!-- herfの#とidで切り替える -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
</div>
タブ型ナビゲーション（JavaScript経由）：thisとtabとshow
ホームのコンテンツが入ります。
プロフィールのコンテンツが入ります。
コンタクトのコンテンツが入ります。
<ul class="nav nav-tabs" id="myTab_js" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" href="#home_js" role="tab" aria-controls="home"
aria-selected="true">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" href="#profile_js" role="tab" aria-controls="profile"
aria-selected="false">プロフィール</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" href="#contact_js" role="tab" aria-controls="contact"
aria-selected="false">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home_js" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツが入ります。</div>
<div class="tab-pane fade" id="profile_js" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツが入ります。</div>
<div class="tab-pane fade" id="contact_js" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツが入ります。</div>
</div>
<script>
$('#myTab_js a').on('click', function (e) {
// 本来のaの通常処理をしない
e.preventDefault()
$(this).tab('show')
})
</script>
ナビゲーションバー基本：navbarとnavbar-brandとcollapse
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- TOPは常に表示 -->
<a class="navbar-brand" href="#">TOP</a>
<!-- navbar-togglerでレスポンシブ -->
<!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
<!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<!-- メニューはulとliを使う -->
<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>
ナビバーとコンテナ：container
コンテンツcontainer
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">TOP</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav22">
<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>
</div>
</nav>
<!-- ここから、コンテンツが始まる -->
<div class="container bg-light">
<h4>コンテンツcontainer</h4>
<p>
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
</p>
</div>
ナビバーの検索窓：form-inline
<nav class="navbar navbar-expand navbar-dark bg-dark">
<!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-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="#">メニュー２</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー３</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
外部コンテンツの表示／非表示：navbar-togglerとnavbar-toggler-icon
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">折り畳みコンテンツ</h4>
<span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
ナビバーの中に入力グループ
<nav class="navbar navbar-dark bg-dark">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>
ナビゲーションドロップダウンメニュー：dropdown-toggle
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<!-- dropdown-toggleを使う -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ドロップダウンメニュー
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
<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>
</nav>
ナビゲーションバー内テキスト：navbar-text
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-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 ml-auto">ナビゲーションバーテキスト</span>
</div>
</nav>
ピル型ナビゲーションドロップダウン：nav-linkとdropdown-toggle
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">ドロップダウン</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
タブ型ナビゲーションドロップダウン：dropdown-toggle
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">ドロップダウン</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
ナビゲーションバー 切替ボタンを左寄せに表示：mr-auto
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02"
aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="navbarNav02">
<ul class="navbar-nav mr-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="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビゲーションバーアイコンしか出さない
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- navbar-brand -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-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="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</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="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビバーのデザイン：navbar-darkとbg-dark
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-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="form-inline my-2 my-lg-0">
<input class="form-control 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>
ナビバーのデザイン：navbar-darkとbg-primary
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mr-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>
</div>
</nav>
navbar-lightで文字色を暗くし、背景色をCSSで設定
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<ul class="navbar-nav mr-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="form-inline my-2 my-lg-0">
<input class="form-control 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>
プログレスバー：progressとprogress-barとw-50
<!-- divで、progressとprogress-barの組み合わせで実装する -->
<!-- 進捗度は、aria-valuenowの値を変える -->
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" style="width: 20%" role="progressbar" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
<div class="progress-bar" style="width: 80%" role="progressbar" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</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>
20pxの太さのプログレスバー：style
プログレスバーにテキストラベルを追加する
複数のプログレスバーを積み重ねる
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="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 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 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 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 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 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 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 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 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 progress-bar-animated bg-danger" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
アコーディオンを作成する：data-toggleとcollapse
カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
カード01の切替ボタン
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
カード02の切替ボタン
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
カード03の切替ボタン
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
</div>
</div>
</div>
</div>
折り畳みのJavaScript使用：show.bs.collapse
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
<div class="collapse" id="sample2">
表示と非表示が切り替わるコンテンツ
</div>
<script>
// hide.bs.collapseはイベント
$(function () {
$('#sample2').on('hide.bs.collapse', function () {
$('.toggle-btn').html('表示する');
});
$('#sample2').on('show.bs.collapse', function () {
$('.toggle-btn').html('非表示にする');
});
});
</script>
アコーディオンタイプのメニュー：data-parent
<!-- data-parentをclassにすることで複数の対象を同時に開閉可能（開いたら、他が閉じる） -->
<div id="sample3">
<div class="container">
<p>
<a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button"
aria-expanded="false" aria-controls="collapseContent01">ボタン1</a>
</p>
<div class="collapse" id="collapseContent01" data-parent="#sample3">
<div class="card card-body">
コンテンツ1
</div>
</div>
</div>
<div class="container">
<p>
<a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent02" role="button"
aria-expanded="false" aria-controls="collapseContent02">ボタン2</a>
</p>
<div class="collapse" id="collapseContent02" data-parent="#sample3">
<div class="card card-body">
コンテンツ2
</div>
</div>
</div>
<div class="container">
<p>
<a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent03" role="button"
aria-expanded="false" aria-controls="collapseContent03">ボタン3</a>
</p>
<div class="collapse" id="collapseContent03" data-parent="#sample3">
<div class="card card-body">
コンテンツ3
</div>
</div>
</div>
</div>
表示と非表示が切り替わるJS：collapse()
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
<div class="collapse2">
表示と非表示が切り替わるコンテンツ
</div>
<script>
$('.toggle-btn').click(function () {
$('.collapse2').collapse();
});
</script>
表示と非表示が切り替わるボタン：collapse('toggle')
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
<div class="collapse">
表示と非表示が切り替わるコンテンツ
</div>
<!-- ボタンにイベントを設定して、切り替えるclassを指定して、toggleで切り替わる -->
<script>
$('.toggle-btn').click(function () {
$('.collapse').collapse('toggle');
});
</script>
複数の要素の表示と非表示とを切り替：data-target
ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
<!-- 切替ボタン、data-targetで切り替え先を指定する -->
<p>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-01"
aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-02"
aria-expanded="false" aria-controls="content-02">ID「content-02」</button>
</p>
<!-- 切り替え先は、IDで指定する「content-01」、クラス「contents」 -->
<div class="row">
<div class="col">
<div class="collapse contents" id="content-01">
<div class="card card-body">
ID「content-01」、クラス「contents」
</div>
</div>
</div>
<div class="col">
<div class="collapse contents" id="content-02">
<div class="card card-body">
ID「content-02」、クラス「contents」
</div>
</div>
</div>
</div>
アコーディオン折り畳み：collapse
a要素とhref属性によるボタン
罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
<div class="row">
<div class="col-sm-6 mb-4">
<!-- a要素とhref属性による切替ボタン -->
<p>
<a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
a要素とhref属性によるボタン<br>
罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる
</a>
</p>
<div class="collapse" id="collapseContent01">
<div class="card card-body">
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
</div>
カルーセル基本的な使用例：carouselとcarousel-innerとcarousel-item
<div class="container">
<!-- 複数の画像を用意して、回転木馬のように自動で切り替えていく -->
<!-- slideさせていく -->
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide"
src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide"
src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide"
src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
</div>
</div>
</div>
</div>
インジケータ、タイトル、キャプション付きカルーセル：carousel-indicatorsとcarousel-control-prev
<div id="carouselSample" class="carousel slide" data-ride="carousel">
<!-- インジケーターによるフェード遷移（好きな場所にクリックでいける） -->
<ol class="carousel-indicators">
<li data-target="#carouselSample" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample" data-slide-to="1"></li>
<li data-target="#carouselSample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" slide"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前と次のアイコン付きカルーセル -->
<a class="carousel-control-prev" href="#carouselSample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
カルーセルのJSイベント：slid.bs.carousel
<div class="container">
<div id="carouselExample" class="carousel slide">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$('#carouselExample').on('slide.bs.carousel', function () {
$('#carouselExample .carousel-caption').hide();
});
$('#carouselExample').on('slid.bs.carousel', function () {
$('#carouselExample .carousel-caption').show();
});
</script>
カルーセルをJavaScript経由で呼び出す
<div class="container">
<div id="carouselExample2" class="carousel slide">
<!-- data-ride="carousel"は不要 -->
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル１</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル２</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル３</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$(function () {
$('#carouselExample2').carousel();
});
</script>
コントローラー付きカルーセルJS：carousel
<div class="container">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
<!-- コントロールボタン -->
<div class="control-buttons my-3">
<input type="button" class="btn btn-primary start-slide" value="開始">
<input type="button" class="btn btn-primary pause-slide" value="停止">
<input type="button" class="btn btn-primary prev-slide" value="前へ">
<input type="button" class="btn btn-primary next-slide" value="次へ">
<input type="button" class="btn btn-primary slide-first" value="第1スライドに">
<input type="button" class="btn btn-primary slide-second" value="第2スライドに">
<input type="button" class="btn btn-primary slide-third" value="第3スライドに">
</div>
</div>
<script>
$(function () {
// 循環開始
$(".start-slide").on('click', function () {
$("#carousel").carousel('cycle');
});
// 一時停止
$(".pause-slide").on('click', function () {
$("#carousel").carousel('pause');
});
// 前へ循環
$(".prev-slide").on('click', function () {
$("#carousel").carousel('prev');
});
// 次へ循環
$(".next-slide").on('click', function () {
$("#carousel").carousel('next');
});
// 特定のフレームに循環
$(".slide-first").on('click', function () {
$("#carousel").carousel(0);
});
$(".slide-second").on('click', function () {
$("#carousel").carousel(1);
});
$(".slide-third").on('click', function () {
$("#carousel").carousel(2);
});
});
</script>
データ属性でオプションを指定：data-interval
<div class="container">
<!-- intervalの設定 -->
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
モーダル 表示ボタン、外枠（非表示）、本体、コンテンツ、閉じるボタンの５点セット
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<!-- 「data-dismiss=”modal”」が閉じる動作 -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
モーダルのアニメーション設定：fade
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
垂直方向中央に配置するモーダル：modal-dialog-centered
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<!-- モーダルの×ボタン -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col,
.row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(0, 0, 0, .1);
border: 1px solid #aaa;
}
</style>
グリッドレイアウトを使用したモーダル：rowとcol
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ml-auto">col-md-4、ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">col-md-3、ml-auto</div>
<div class="col-md-2 ml-auto">col-md-2、ml-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
長いコンテンツのモーダル：modal-body
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
大きなサイズのモーダル サイズのオプション：modal-lg
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
<!-- モーダル -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
aria-hidden="true">
<!-- 大きなモーダルのダイアログ本体modal-lg -->
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文</div>
<!-- モーダルのフッター -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
小さなサイズのモーダル：modal-sm
<button type="button" class="btn btn-secondary" data-toggle="modal"
data-target="#smallModal">モーダルボタン（modal-sm）</button>
<!-- モーダル -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
aria-hidden="true">
<!-- 小さなモーダルのダイアログ本体modal-sm -->
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
モーダル：JavaScript使用
<div class="container">
<p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
<!-- モーダル -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">モーダルの本文</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">変更を保存</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').click(function () {
$('#myModal').modal('show');
});
</script>