bootstrap4.css
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid #e9ecef;
}
■レイアウト：rowとcol：なにもしなければ等幅カラムになる、レスポンシブなし、そのまま縮小される
1列目
2列目
1列目
2列目
3列目
<section>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
</div>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
<div class="col">3列目</div>
</div>
</section>
■レイアウト：rowとcol：合計12にして、カラムの幅を指定する 2列カラム + 4列カラム + 6列カラム = 12列分
col-2
col-4
col-6
<div class="row">
<div class="col-2">col-2</div>
<div class="col-4">col-4</div>
<div class="col-6">col-6</div>
</div>
■レイアウト：rowとcol：1カラムのみ幅を設定 残りは等価
col
col-6
col
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div><!-- 指定幅：6列カラム -->
<div class="col">col</div>
</div>
■レイアウト：rowとcol：可変幅カラム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>
<div class="col-md-auto">col-md-auto：Medium以上でコンテンツによって幅が可変</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：12を超える場合 勝手に折り返りが起こる、行単位で１２で計算され、折り返しが決まる
col-9
col-4
col-6
<div class="row">
<div class="col-9">col-9</div>
<div class="col-4">col-4</div>
<div class="col-6">col-6</div>
</div>
■レイアウト：rowとcol：等幅カラムを複数行に分割する これも勝手に折り返しが起こる
col
col
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：グリッドレイアウトのネスト 入れ子
構造が再帰的に繰り返されて記述されること 自分が自分に戻ってくること
第一階層: col-sm-9
第二階層: col-8とcol-sm-6
第二階層: ￥col-4とcol-sm-6
第一階層: col-sm-3
<p>構造が再帰的に繰り返されて記述されること 自分が自分に戻ってくること</p>
<div class="row">
<div class="col-sm-9">第一階層: col-sm-9
<div class="row">
<div class="col-8 col-sm-6">第二階層: col-8とcol-sm-6</div>
<div class="col-4 col-sm-6">第二階層: ￥col-4とcol-sm-6</div>
</div>
</div>
<div class="col-sm-3">第一階層: col-sm-3</div>
</div>
■レイアウト：rowとcol：水平方向整列 残りは勝手に余白になる 左寄せ：justify-content:flex-start
col-4
col-4
<div class="row justify-content-start">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト：rowとcol：水平方向整列 残りは勝手に余白になる 中央寄せ：justify-content:flex-center
col-4
col-4
<div class="container">
<div class="row justify-content-center">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
</div>
■レイアウト：rowとcol：水平方向整列 残りは勝手に余白になる 右寄せ：justify-content:flex-end
col-4
col-4
<div class="row justify-content-end">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト：rowとcol：水平方向整列 残りは勝手に余白になる 等間隔に配置：justify-content:space-around
col-4
col-4
<div class="row justify-content-around">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト：rowとcol：水平方向整列 残りは勝手に余白になる 両端から均等に配置：justify-content:space-between
col-4
col-4
<div class="row justify-content-between">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
■レイアウト：rowとcol：カラム単位での垂直方向整列
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>
■レイアウト：rowとcol：複数クラスの組み合わせ：全幅カラム＋半幅カラム、Medium以上：8列＋4列カラム
col-12とcol-md-8
col-6とcol-md-4
<div class="row">
<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>
■レイアウト：rowとcol：複数クラスの組み合わせ：半幅カラム×3、Medium以上：4列カラム×3
col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4
<div class="row">
<div class="col-6 col-md-4">col-6とcol-md-4</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
<div class="col-6 col-md-4">col-6とcol-md-4</div>
</div>
■レイアウト：rowとcol：行の分割をブレイクポイントで切り替える
col
col
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100 d-none d-md-block"></div>
<!-- Medium以上では{dsplay:block}、未満では{display:none} -->
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：ガターを削除したカラム no-guttersありの場合
col
col
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：ガターを削除したカラム no-guttersなしの場合（はみ出るね）
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：ガターを削除したカラム コンテナなし（画面いっぱいに広がる）、no-guttersありの場合
col
col
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：オフセットのリセット
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>
■レイアウト：rowとcol：Spacingユーティリティのマージン設定を指定したオフセット
col-md-3とml-md-auto
col-md-3とml-md-auto
<div class="row">
<!-- Medium以上でml（margin-left）を自動設定 -->
<div class="col-md-3 ml-md-auto">col-md-3とml-md-auto </div>
<!-- Medium以上でml（margin-left）を自動設定 -->
<div class="col-md-3 ml-md-auto">col-md-3とml-md-auto </div>
</div>
■レイアウト：rowとcol：オフセット用クラスによるカラムのオフセット
col-md-4
col-md-4とoffset-md-4
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div><!-- Medium以上で4列分左に移動 -->
</div>
■レイアウト：rowとcol：コンテンツの並べ替え：order-1～order-12
第1のカラム（順序指定なし）
第2のカラム（順序指定は12）
第3のカラム（順序指定は1）
<div class="row">
<div class="col">第1のカラム（順序指定なし）</div>
<div class="col order-12">第2のカラム（順序指定は12）</div>
<div class="col order-1">第3のカラム（順序指定は1）</div>
</div>
■レイアウト：rowとcol：コンテンツの並べ替え：orderfirst
第1のカラム（順序指定なし）
第2のカラム（順序指定なし）
第3のカラム（順序指定は1）
<div class="row">
<div class="col">第1のカラム（順序指定なし）</div>
<div class="col">第2のカラム（順序指定なし）</div>
<div class="col order-first">第3のカラム（順序指定は1）</div>
</div>
■レイアウト：rowとcol：ブレイクポイントによる切り替え
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
■レイアウト：rowとcol：垂直整列上寄せ：align-items-start
col
col
col
<div class="row align-items-start">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：垂直整列中央寄せ：align-items-center
col
col
col
<div class="row align-items-center">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
■レイアウト：rowとcol：垂直整列下寄せ：align-items-end
col
col
col
<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">
<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 d-flex：ユーティリティ：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
<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 d-flex：ユーティリティ：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">
<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 d-flex：ユーティリティ：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">
<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 d-flex：ユーティリティ：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 d-flex：ユーティリティ：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">
<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 d-flex：ユーティリティ：flexの自動整列 align-content-between 高さ固定
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-between 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 d-flex：ユーティリティ：flexの自動整列 align-content-around 高さ固定
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-around 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 d-flex：ユーティリティ：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">
<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 d-flex：ユーティリティ：flex交差軸方向の整列 align-items-stretch
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-stretch" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex交差軸方向の整列 align-items-start
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-start" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex交差軸方向の整列 align-items-end
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-end" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex交差軸方向の整列 align-items-center
flex文字01
flex文字02
flex文字03
<div class="d-flex align-items-center" style="height: 200px">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：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">
<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 d-flex：ユーティリティ：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 d-flex：ユーティリティ：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 d-flex：ユーティリティ：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 d-flex：ユーティリティ：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 d-flex：ユーティリティ：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 d-flex：ユーティリティ：flexコンテナ全幅等幅整列 デフォルト 左から並ぶ 改行はしない
flex文字01
flex文字02
flex文字03
<div class="d-flex">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナ全幅等幅整列 flex-fill 横幅で等幅
flex文字01
flex文字02
flex文字03
<div class="d-flex">
<div class="flex-fill">flex文字01</div>
<div class="flex-fill">flex文字02</div>
<div class="flex-fill">flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向 左から右（flex-row）
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-row">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向右から左（flex-row-reverse）
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-row-reverse">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向上から下（flex-column）縦並びも横並びと同じ発想
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-column">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向下から上（flex-column-reverse）
flex文字01
flex文字02
flex文字03
<div class="d-flex flex-column-reverse">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex文字の伸縮 デフォルト
flex文字01
flex文字02
flex文字03
<div class="d-flex" style="height: 100px">
<div class="p-2">flex文字01</div>
<div class="p-2">flex文字02</div>
<div class="p-2">flex文字03</div>
</div>
<!-- flex文字の幅を伸長する -->
■レイアウト：Flex d-flex：ユーティリティ：flex文字の伸縮 flex-grow 余白を埋める機能
flex文字01（flex-grow-1）
flex文字02
flex文字03
<div class="d-flex" style="height: 100px">
<div class="p-2 flex-grow-1">flex文字01（flex-grow-1）</div>
<div class="p-2">flex文字02</div>
<div class="p-2">flex文字03</div>
</div>
<!-- flex文字の幅を縮小する -->
■レイアウト：Flex d-flex：ユーティリティ：flex文字の伸縮 flex-shrink 余白で縮小される（他を優先）
flex文字01（flex-shrink-1）
flex文字02
flex文字03
<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 d-flex：ユーティリティ：特定のflex文字の表示順序を入れ替えるクラス
flex文字01
flex文字02
flex文字03
<div class="d-flex">
<div class="order-1">flex文字01</div>
<div class="order-3">flex文字02</div>
<div class="order-2">flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向の整列 justify-content-start
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-start">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向の整列 justify-content-end
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-end">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向の整列 justify-content-center
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-center">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向の整列 justify-content-between
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-between">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flexコンテナの主軸方向の整列 justify-content-around
flex文字01
flex文字02
flex文字03
<div class="d-flex justify-content-around">
<div>flex文字01</div>
<div>flex文字02</div>
<div>flex文字03</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex自動マージン デフォルト（自動マージンなし）
flex文字1
flex文字2
flex文字3
<div class="d-flex">
<div>flex文字1</div>
<div>flex文字2</div>
<div>flex文字3</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex自動マージン 右側に分離（mr-auto）ナビ的な場合に、左と右側でそれぞれ真ん中空ける形式
flex文字1
flex文字2
flex文字3
<div class="d-flex">
<div class="mr-auto">flex文字1</div>
<div>flex文字2</div>
<div>flex文字3</div>
</div>
■レイアウト：Flex d-flex：ユーティリティ：flex自動マージン 左側に分離（ml-auto）
flex文字1
flex文字2
flex文字3
<div class="d-flex">
<div>flex文字1</div>
<div>flex文字2</div>
<div class="ml-auto p-2">flex文字3</div>
</div>
■カード：card：コンポーネント：基本的な使用例 divでcard、card-body、imgでcard-img-top、pでcard-title、card-text
<!-- カードの枠：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>
■カード：card：コンポーネント：カードの背景色と文字色の設定
背景色、文字色指定なし
カードのタイトル
カードの内容
背景色：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>
■カード：card：コンポーネント：カードの背景色を除去する
ヘッダー初期設定の背景色
カードのタイトル
カードの内容
ヘッダー背景色の除去：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>
<!-- 背景色の除去：bg-transparent -->
<div class="card-footer bg-transparent">フッター背景色の除去：bg-transparent</div>
</div>
■カード：card：コンポーネント：カードのボーダー色を変更する
カードのヘッダー
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<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：コンポーネント：カードデッキによるレイアウトcard-deck
カード01
カードの内容
カード02
カードの内容
カード03
カードの内容
カードの内容
<div class="card-deck">
<!-- カード01 -->
<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>
<!-- カード02 -->
<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>
<!-- カード03 -->
<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：コンポーネント：カードグループによるレイアウト card-group
カード01
カードの内容
カード02
カードの内容カードの内容
カード03
カードの内容
カードの内容
<div class="card-group">
<!-- カード01 -->
<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>
<!-- カード02 -->
<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>
<!-- カード03 -->
<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：コンポーネント：カードカラムによるレイアウト card-columns
カード01
ここに文章が入ります
カード02
ここに文章が入ります
カード03
ここに文章が入ります
ここに文章が入ります
カード04
ここに文章が入ります
カード05
ここに文章が入ります
この文章はダミーです。
カード07
ここに文章が入ります
カード08
ここに文章が入ります
ここに文章が入ります
<div class="card-columns">
<!-- カード01 -->
<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">
<!-- カラム01 -->
<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>
<!-- カラム02 -->
<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：コンポーネント：カードのヘッダーとフッター card-title
カードのヘッダー
カードのタイトル
カードの内容
<div class="card" 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>
■カード：card：コンポーネント：カードに画像を配置する card-img-top card-img-bottom
カードの内容
カードの内容
<!-- カード上部に画像を配置：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 -->
<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>
</div>
■カード：card：コンポーネント：カードの画像とテキストを重ね合わせる 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>
■カード：card：コンポーネント：カード内にコンテンツを複合する
<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="Card image cap">
<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>
■カード：card：コンポーネント：カードにナビゲーションを組み込む ピル型のナビゲーション
<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>
■カード：card：コンポーネント：カードにナビゲーションを組み込む タブ型のナビゲーション
<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>
■カード：card：コンポーネント：カードのサイズを変更する Sizingユーティリティクラスw-75
<!-- Sizingユーティリティクラス：w-{%値}による幅指定 -->
<div class="card w-75">
<div class="card-body">
<h4 class="card-title">カードの幅指定：w-75</h4>
<p class="card-text">カードの幅が親要素の幅の75%になります。</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■カード：card：コンポーネント：カード内のテキストを左寄せ、中央、右寄せ
<!-- 標準（左寄せ） -->
<div class="card" style="max-width: 25rem;">
<div class="card-body">
<h4 class="card-title">標準（左寄せ）</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- 中央寄せ：text-center -->
<div class="card text-center" style="max-width: 25rem;">
<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>
<!-- 右寄せ：text-right -->
<div class="card text-right" style="max-width: 25rem;">
<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>
■色Color：bg-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>
■色Color：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>
■幅、高さ：Sizing：ユーティリティ：幅を指定するクラスw-25
w-25
w-50
w-75
w-100
<div class="w-25 border">w-25</div>
<div class="w-50 border">w-50</div>
<div class="w-75 border">w-75</div>
<div class="w-100 border">w-100</div>
■幅、高さ：Sizing：ユーティリティ：高さを指定するクラスh-25
親要素に高さを指定済（height: 200px;）
h-25
h-50
h-75
h-100
<p class="text-center">親要素に高さを指定済（height: 200px;）</p>
<div class="h-25 d-inline-block border">h-25</div>
<div class="h-50 d-inline-block border">h-50</div>
<div class="h-75 d-inline-block border">h-75</div>
<div class="h-100 d-inline-block border">h-100</div>
■テキスト：Text：ユーティリティ：インラインのコード表記
インラインのコード表示部分を
<code>タグで囲みます。
<div>
インラインのコード表示部分を<code><code></code>タグで囲みます。
</div>
■テキスト：Text：ユーティリティ：ユーザーインプットの表記 kbd
ディレクトリを切り替えるには、
cdと続けてディレクトリ名を入力します。設定を編集するには、
ctrl + ,を押します。
<div>
ディレクトリを切り替えるには、
<kbd>cd</kbd>と続けてディレクトリ名を入力します。設定を編集するには、
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>を押します。
</div>
■テキスト：Text：ユーティリティ：サンプル出力 samp
This text is meant to be treated as sample output from a computer program.
<div>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
</div>
■テキスト：Text：ユーティリティ：変数の表記 var
y = mx + b
<div>
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</div>
■アラート：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：コンポーネント：アラートを閉じるボタンで、アラート表示を消す
右側の「×」マークをクリックするとアラートが閉じます
<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：コンポーネント：アラート内にコンテンツを追加する
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">アラートのタイトル（h4）</h4>
<p>アラートの文字</p>
<hr>
<p>アラート内のリンクを見やすくする</p>
<p class="mb-0"><a href="#" class="alert-link">リンク alert-primary</a></p>
<p class="mb-0"><a href="#">リンク alert-primary</a></p>
</div>
■ディスプレー：Display：ユーティリティ：devで背景色とテキストの文字
ブロック表示のdiv
ブロック表示のdiv
<div class="bg-primary text-white">ブロック表示のdiv</div>
<div class="bg-dark text-white">ブロック表示のdiv</div>
■ディスプレー：Display：ユーティリティ：divをd-inlineで利用
インライン表示のdiv
インライン表示のdiv
<div class="d-inline bg-primary text-white">インライン表示のdiv</div>
<div class="d-inline bg-dark text-white">インライン表示のdiv</div>
■ディスプレー：Display：ユーティリティ：要素の表示／非表示を設定するレスポンシブなクラス
lgより大きい画面幅で非表示
lgより大きい画面幅で表示
<div class="d-lg-none bg-primary text-white">lgより大きい画面幅で非表示</div>
<div class="d-none d-lg-block bg-secondary text-white">lgより大きい画面幅で表示</div>
■ディスプレー：Display：ユーティリティ：印刷時の表示／非表示を設定するクラス
スクリーンのみ表示（印刷時のみ非表示）
印刷時のみ表示（スクリーンでは非表示）
<div class="d-print-none">スクリーンのみ表示（印刷時のみ非表示）</div>
<div class="d-none d-print-block">印刷時のみ表示（スクリーンでは非表示）</div>
■ディスプレー：Display：ユーティリティ：Embedユーティリティ 埋め込みクラス アスペクト比 16:9
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
■親要素でフロートを解除する：Clearfix：ユーティリティ：親要素で設定して、フロートを解除するためのクラス（重なっていない浮いているから背景色出る）
右フロート
<div class="w-50 mx-auto bg-danger clearfix">
<div class="float-right bg-success">右フロート</div>
</div>
■親要素でフロートを解除する：Clearfix：ユーティリティ：フロートを解除しない（重なっているので背景色がでない）
右フロート
<div class="w-50 mx-auto bg-danger">
<div class="float-right bg-success">右フロート</div>
</div>
■親要素でフロートを解除する：Clearfix：ユーティリティ：Floatクラス float-left float-right clearfixはあってもなくても同じみたい
<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>
■リストグループ：list-group：コンポーネント：aタグ リストグループ
<section class="w-50 m-auto">
<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>
</section>
■リストグループ：list-group：コンポーネント：アクティブ状態のアクション可能な背景色クラスのリストグループ
<section class="w-50 m-auto my-5">
<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>
</section>
■リストグループ：list-group：コンポーネント：アクション可能な背景色クラスのリストグループ
<section class="w-50 m-auto my-5">
<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>
</section>
■リストグループ：list-group：コンポーネント：リストグループ aタグ
<section class="w-50 m-auto">
<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>
</section>
■リストグループ：list-group：コンポーネント：カスタムコンテンツの リストグループ aタグ
<section class="w-50 m-auto my-5">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目1のヘッダ</h5>
<small>3日前</small>
</div>
<p class="mb-1">リスト項目1のコンテンツの見本です。</p>
<small>リスト項目1のサブコンテンツです</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">リスト項目2のヘッダ</h5>
<small class="text-muted">3日前</small>
</div>
<p class="mb-1">リスト項目2のコンテンツの見本です。</p>
<small class="text-muted">リスト項目2のサブコンテンツです。</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">リスト項目3のヘッダ</h5>
<small class="text-muted">3日前</small>
</div>
<p class="mb-1">リスト項目3のコンテンツの見本です。</p>
<small class="text-muted">リスト項目3のサブコンテンツです。</small>
</a>
</div>
</section>
■リストグループ：list-group：コンポーネント：li 枠なしのリストグループ
- リスト項目1
- リスト項目2
- リスト項目3
<section class="w-50 m-auto">
<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>
</section>
■リストグループ：list-group：コンポーネント：ボタンのリストグループ button
<section class="w-50 m-auto my-5">
<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>
</section>
■テーブル：table：：レスポンシブテーブル：table-responsive
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<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>
<hr>
■テーブル：table：：レスポンシブテーブル：画面幅table-responsive-sm未満
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-sm mb-5">
<table class="table">
<caption>レスポンシブ対応テーブル（画面幅sm未満）</caption>
<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>
■テーブル：table：：レスポンシブテーブル：画面幅table-responsive-md未満
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-md mb-5">
<table class="table">
<caption>レスポンシブ対応テーブル（画面幅md未満）</caption>
<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>
<hr>
■テーブル：table：：レスポンシブテーブル：画面幅table-responsive-lg未満
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-lg mb-5">
<table class="table">
<caption>レスポンシブ対応テーブル（画面幅lg未満）</caption>
<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>
■テーブル：table：：レスポンシブテーブル：画面幅table-responsive-xl未満
| タイトル | タイトル | タイトル | タイトル | タイトル |
|---|---|---|---|---|
| データ | データ | データ | データ | データ |
<div class="table-responsive-xl mb-5">
<table class="table">
<caption>レスポンシブ対応テーブル（画面幅xl未満）</caption>
<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>
■ドロップダウン：dropdown-menu：コンポーネント：フォームとボタン 切り替えボタンにbutton要素を使用したドロップダウン
<!-- ドロップダウン -->
<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>
■ドロップダウン：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 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>
■ドロップダウン：dropdown-menu：コンポーネント：切り替えボタンにaタグ要素を使用したドロップダウン
<!-- ドロップダウン -->
<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>
■ドロップダウン：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 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>
■ドロップダウン：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 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>
■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウン方向を変更する
<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>
■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウンメニューのオーバーフローを制約する境界を設定する
<div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
<br><br><br>
<div class="dropdown">
<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>
■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウンメニューを表示させるスペースがない場合に、反対側に表示させる
<div class="box" style="overflow: auto">
<br><br><br><br><br>
<div class="dropdown">
<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>
■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウンのオフセット値を設定する
<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>
■ドロップダウン：dropdown-menu：コンポーネント：メニュー項目にbutton要素を使用する
<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：コンポーネント：ドロップダウンメニューに様々な要素を追加する
<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">
<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="#">初めての方</a>
<a class="dropdown-item" href="#">パスワードをお忘れの方</a>
</div>
</div>
■ドロップダウン：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">
<span class="dropdown-item-text">非リンクテキスト</span>
<a class="dropdown-item" href="#">メニュー1</a>
<a class="dropdown-item" href="#">メニュー2</a>
<a class="dropdown-item" href="#">メニュー3</a>
</div>
</div>
■ドロップダウン：dropdown-menu：js：ドロップダウンメニューのイベント
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sale!</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() {
$(".dropdown").on("show.bs.dropdown", function(event) {
var x = $(event.relatedTarget).text(); // ボタンのテキストを取得
alert(x + '無くなり次第終了！');
});
});
</script>
■ドロップダウン：dropdown-menu：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>
■ドロップダウン：dropdown-menu：js：ドロップダウンのオフセット値を設定する
<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-menu：js：メニュー項目に自由形式のテキストを配置する
<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="mb-0">ドロップダウンメニュー内のテキストその2。</p>
</div>
</div>
■ドロップダウン：dropdown-menu：js：スプリットボタン（分割ボタン）のドロップダウン
<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">
<span class="sr-only">ドロップダウン切り替え</span>
</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>
■ドロップダウン：dropdown-menu：js：自動サイズ調整のカラムを作成する 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">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<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>
■レスポンシブ画像：img：：Textユーティリティークラスを使用した配置例 text-center
<div class="text-center">
<img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
</div>
■影shadow 角丸rounded：ユーティリティ：影Shadowsユーティリティ
影なし（shadow-none）
小さめの影（shadow-sm）
標準の影（shadow）
大きめの影（shadow-lg）
<div class="shadow-none p-3 mb-5 bg-light rounded">影なし（shadow-none）</div>
<div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影（shadow-sm）</div>
<div class="shadow p-3 mb-5 bg-light rounded">標準の影（shadow）</div>
<div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影（shadow-lg）</div>
■フォーム：form-group：コンポーネント：フォームの基本要素
<form>
<div class="form-group">
<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>
■フォーム：form-group：コンポーネント：読み取り専用テキストの枠を非表示にする
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<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">
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
</form>
■フォーム：form-group：コンポーネント：入力コントロールのサイズを調整する -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>
■フォーム：form-group：コンポーネント：ファイル選択
<div class="container">
<form>
<div class="default-file 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-group：コンポーネント：カスタムフォームのチェックボックスに不確定（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-group：コンポーネント：カスタムフォームのチェックボックスとラジオボタンを無効にする
<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>
■フォーム：form-group：コンポーネント：読み取り専用のテキストを表示する readonly
<form>
<!-- 読み取り専用のテキストを表示する -->
<div class="form-group">
<label for="input1">読み取り専用のテキストを表示</label>
<input type="text" class="form-control" id="input1" placeholder="読み取り専用のテキスト" readonly> </div>
</form>
■フォーム：form-group：コンポーネント：グリッドレイアウトを利用する 2グリット限定？
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="姓">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="名">
</div>
</div>
</form>
■フォーム：form-group：コンポーネント：カスタムフォームのチェックボックスとラジオボタンを作成する
<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>
■フォーム：form-group：コンポーネント：コンパクトなカラム間隔のフォーム 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>
■フォーム：form-group：コンポーネント：テキストエリアの前にアドオンを配置
テキストエリア用
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">テキストエリア用</span>
</div>
<textarea class="form-control" aria-label="テキストエリア用"></textarea>
</div>
■フォーム：form-group：コンポーネント：入力コントロールの前後にアドオンを配置
$
.00
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text">$</span> </div>
<input type="text" class="form-control" aria-label="金額">
<div class="input-group-append"> <span class="input-group-text">.00</span> </div>
</div>
■フォーム：form-group：コンポーネント：一連の入力グループをまとめて無効にする
<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：コンポーネント：水平配置のフォームを作成する
<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-group：コンポーネント：インラインのフォームを作成する
<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>
■フォーム：form-group：コンポーネント：ラベルサイズを調整する
<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>
■フォーム：form-group：コンポーネント：サーバー側で入力検証を行う場合のフィードバック例
<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>
■フォーム：form-group：コンポーネント：入力グループ カスタムフォームの組み込み
<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>
■フォーム：form-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>
■フォーム：form-group：コンポーネント：入力グループ ボタン付きアドオン
<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>
■フォーム：form-group：コンポーネント：入力グループ ドロップダウン付きアドオン
<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>
■フォーム：form-group：コンポーネント：入力グループ 複数の入力コントロール
姓名
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text" id="...">姓名</span> </div>
<input type="text" class="form-control" placeholder="姓">
<input type="text" class="form-control" placeholder="名">
</div>
■フォーム：form-group：コンポーネント：入力グループ 複数のアドオンを組み合わせる
$ 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>
■フォーム：form-group：コンポーネント：入力グループ スプリットボタン付きアドオン
<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>
■フォーム：form-group：コンポーネント：入力グループのサイズ調整 大、(中/標準)、小 input-group
Small
Default
Large
<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>
<!-- 標準サイズの入力グループ -->
<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>
<!-- 大サイズの入力グループ -->
<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>
■フォーム：form-group：コンポーネント：Bootstrap フォームバリデーション(入力検証機能) needs-validation
<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>
■フォーム：form-group：コンポーネント：フォームツールチップ：valid-tooltip：JS
<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-group：コンポーネント：カスタムレンジ入力
<form>
<div class="form-group mb-5">
<label for="formControlRange">レンジ入力の例</label>
<input type="range" class="form-control-range" id="defaultRange"> </div>
<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">カスタムレンジ入力の例（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">カスタムレンジ入力の例（step="0.5"）</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"> </div>
</form>
■フォーム：form-group：コンポーネント：レンジ入力
<form>
<div class="form-group">
<label for="formControlRange">レンジ入力の例</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
■ボタン：button：コンポーネント：ラジオボタンをボタンに変更する
<div class="btn-group" data-toggle="buttons">
<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>
■ボタン：button：コンポーネント：チェックボックスをボタン変更する data-toggle=buttons
<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>
■ボタン：button：コンポーネント：ボタングループ 基本的な使用例 btn-group
<div class="btn-group" role="group" aria-label="基本的な使用例">
<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>
■ボタン：button：コンポーネント：ボタンツールバー：ボタングループ
<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>
■ボタン：button：コンポーネント：ボタングループ：ボタンのサイズ変更 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>
<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>
■ボタン：button：コンポーネント：ドロップダウンメニュー data-toggle=dropdown
<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>
■ボタン：button：コンポーネント：垂直方向ボタングループ 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：メディアオブジェクトmedia-bodyは画像と説明を配置すること
タイトル
ここに文章が入ります <div class="media">
<img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</div>
■メディアオブジェクト：media：メディアオブジェクトの上部に画像を配置
タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります <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>
■メディアオブジェクト：media：メディアオブジェクト：並べ替え order
タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。 <div class="media">
<img class="order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body order-1">
<h5>タイトル</h5>
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
</div>
</div>
■メディアオブジェクト：media：ulリストにメディアオブジェクト
-
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります
<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>
<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：メディアオブジェクトの入れ子media-bodyの中にさらに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>
ここに文章が入りますここに文章が入ります
<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：JavaScript：タブとコンテンツ（データ属性API）
ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
<!-- タブ部分 -->
<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>
<!-- パネル部分 -->
<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>
■ナビゲーション：nav：JavaScript：タブ型ナビゲーション（JavaScript経由）
ホームのコンテンツが入ります。
プロフィールのコンテンツが入ります。
コンタクトのコンテンツが入ります。
<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) {
e.preventDefault()
$(this).tab('show')
})
</script>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーションバー 初期設定
<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="#navbarNav1" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav1">
<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>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーションバーを水平中央に配置
<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="#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"><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>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：サブコンポーネントを水平中央に配置
コンテンツ
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">ブランド</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>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</div>
</nav>
<div class="container bg-light">
<h4>コンテンツ</h4>
<p>コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。</p>
</div>
■ナビゲーションバー：navbar：コンポーネント：レスポンシブ対応の設定
<nav class="navbar navbar-expand 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 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：コンポーネント：外部コンテンツの表示／非表示
<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>
■ナビゲーションバー：navbar：コンポーネント：ナビバーの中に入力グループ
<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>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーション：div要素を使用したナビゲーション
<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">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">リンク1<span class="sr-only">(現位置)</span></a>
<a class="nav-item nav-link" href="#">リンク2</a>
<a class="nav-item nav-link" href="#">リンク3</a>
<a class="nav-item nav-link disabled" href="#">無効</a>
</div>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーション：ドロップダウン
<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">
<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<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：ナビゲーション：ul要素を使用したナビゲーション
<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 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>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：テキスト
<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="#">ホーム <span class="sr-only">(現位置)</span></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>
■ナビゲーションバー：navbar：コンポーネント：ドロップダウンを組み込んだピル型ナビゲーション
<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>
■ナビゲーションバー：navbar：コンポーネント：ドロップダウンを組み込んだタブ型ナビゲーション
<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>
■ナビゲーションバー：navbar：コンポーネント：ナビバーの基本例 navbar
<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="#target_div" aria-controls="target_div" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="target_div">
<ul class="navbar-nav mr-auto">
<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 active"><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：コンポーネント：ナビゲーションバー レスポンシブにブランドを左寄せ、切替ボタンを右寄せに表示
<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="#navbarNav01" aria-controls="navbarNav01" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav01">
<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：コンポーネント：ナビゲーションバー レスポンシブにブランドを右寄せ、切替ボタンを左寄せに表示
<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<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：コンポーネント：ブランドの表示・非表示 初期設定のナビゲーションバー
<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="#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<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：コンポーネント：ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<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：コンポーネント：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>
<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：コンポーネント：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>
<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-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー：navbar：コンポーネント：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：：基本的な使用例
<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：：プログレスバーの背景 bg-success
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
■プログレスバー：progress：：プログレスバーの背景 bg-info
<div class="progress mb-3">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
■プログレスバー：progress：：プログレスバーの背景 bg-warning
<div class="progress mb-3">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
■プログレスバー：progress：：プログレスバーの背景 bg-danger
<div class="progress mb-3">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
■プログレスバー：progress：：プログレスバーのストライプをアニメーションさせる
<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>
■プログレスバー：progress：：プログレスバーの太さ（高さ） 1pxの太さのプログレスバー
<div class="progress mb-5" style="height: 1px;">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
■プログレスバー：progress：：プログレスバーの太さ（高さ）20pxの太さのプログレスバー
<div class="progress" style="height: 20px;">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
■プログレスバー：progress：：プログレスバーにテキストラベルを追加する
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
■プログレスバー：progress：：複数のプログレスバーを積み重ねる
<div class="progress">
<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：：プログレスバーをストライプにする
<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>
■アコーディオン：accordion：JavaScript：アコーディオンを作成する
カード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>
■アコーディオン：accordion：JavaScript：折り畳みのJavaScript使用
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
<div class="collapse" id="sample2">
表示と非表示が切り替わるコンテンツ
</div>
<script>
$(function(){
$('#sample2').on('hide.bs.collapse', function(){
$('.toggle-btn').html('表示する');
});
$('#sample2').on('show.bs.collapse', function(){
$('.toggle-btn').html('非表示にする');
});
});
</script>
■アコーディオン：accordion：JavaScript：data-parentを指定
<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>
■アコーディオン：accordion：JavaScript：表示と非表示が切り替わるコンテンツ toggle-btn
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
<div class="collapse">
表示と非表示が切り替わるコンテンツ
</div>
<script>
$('.toggle-btn').click(function(){
$('.collapse').collapse();
});
</script>
■折り畳み：collapse：JavaScript：表示と非表示が切り替わるコンテンツ
表示と非表示が切り替わるコンテンツ
<p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
<div class="collapse">
表示と非表示が切り替わるコンテンツ
</div>
<script>
$('.toggle-btn').click(function(){
$('.collapse').collapse('toggle');
});
</script>
■折り畳み：collapse：JavaScript：複数の要素の表示と非表示とを切り替える
ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
<p>
<!-- ID「content-01」の切替ボタン -->
<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>
<!-- ID「content-02」の切替ボタン -->
<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>
<!-- クラス「contents」の切替ボタン -->
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target=".contents" aria-expanded="false" aria-controls="contents-01 contents-02">クラス「contents」を同時に表示切り替え</button>
</p>
<div class="row">
<div class="col">
<!-- ID「content-01」、クラス「contents」 -->
<div class="collapse contents" id="content-01">
<div class="card card-body">
ID「content-01」、クラス「contents」
</div>
</div>
</div>
<div class="col">
<!-- ID「content-02」、クラス「contents」 -->
<div class="collapse contents" id="content-02">
<div class="card card-body">
ID「content-02」、クラス「contents」
</div>
</div>
</div>
</div>
■折り畳み：collapse：JavaScript：アコーディオン折り畳みcollapse
a要素とhref属性によるボタン
a要素とhref属性
によるボタン
罫線なし、色なしでやれば、それっぽく見えるはず
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
<div class="row">
<div class="col-sm-6 mb-4">
<!-- a要素とhref属性による切替ボタン -->
<p>
<a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button" aria-expanded="false" aria-controls="collapseContent01">a要素とhref属性によるボタン</a>
<a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
a要素とhref属性<br>
によるボタン<br>
罫線なし、色なしでやれば、それっぽく見えるはず
</a>
</p>
<!-- 切り替えるターゲットとなるコンテンツ -->
<div class="collapse" id="collapseContent01">
<div class="card card-body">
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
<!-- button要素とdata-target属性による切替ボタン -->
<p>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapseContent02" aria-expanded="false" aria-controls="collapseContent02"> button要素とdata-target属性によるボタン</button>
</p>
<!-- 切り替える対象となるコンテンツ -->
<div class="collapse" id="collapseContent02">
<div class="card card-body">
button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
</div>
■カルーセル回転木馬：carousel：JavaScript：カルーセル基本的な使用例
<div class="container">
<div class="carousel slide" data-ride="carousel">
<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/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/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/FFFF00/000000?text=Third slide">
</div>
</div>
</div>
</div>
■カルーセル回転木馬：carousel：JavaScript：タイトル、キャプション付きカルーセル
<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">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="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>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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>
■カルーセル回転木馬：carousel：JavaScript：前と次のアイコン付きカルーセル
<section>
<div class="container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<!-- カルーセル部分 -->
<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/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/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/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselControls" 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="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
</section>
■カルーセル回転木馬：carousel：JavaScript：インジケーターによるフェード遷移（好きな場所にクリックでいける）
<div class="container">
<div id="carouselSample2" class="carousel slide carousel-fade" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample2" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample2" data-slide-to="1"></li>
<li data-target="#carouselSample2" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="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>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" 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="#carouselSample2" 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="#carouselSample2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬：carousel：JavaScript：イベント：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">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" 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="slide" 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="slide" 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>
■カルーセル回転木馬：carousel：JavaScript：インジケーター付きカルーセル
<div class="container">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<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>
■カルーセル回転木馬：carousel：JavaScript：カルーセルをJavaScript経由で呼び出す
<div class="container">
<div id="carouselExample" 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="slide" 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="slide" 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="slide" 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>
$(function(){
$('#carouselExample').carousel({
interval: 1000
});
});
</script>
■カルーセル回転木馬：carousel：JavaScript：コントローラー付きカルーセル
<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>
■カルーセル回転木馬：carousel：JavaScript：データ属性でオプションを指定
<div class="container">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- インジケーター部分 -->
<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="slide" 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="slide" 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="slide" 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>
■モーダル：modal：モーダル 表示ボタン、外枠（非表示）、本体、コンテンツ、閉じるボタンの５点セット
<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">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル：modal：モーダルのアニメーション設定 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：垂直方向中央に配置するモーダル
<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>
■モーダル：modal：グリッドレイアウトを使用したモーダル
<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：長いコンテンツのモーダル
<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：大きなサイズのモーダル サイズのオプション 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">
<!-- モーダルのダイアログ本体 -->
<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：小さなサイズのモーダル 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">
<!-- モーダルのダイアログ本体 -->
<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>
■モーダル：modal：モーダルの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>
■モーダル：modal：モーダルを閉じるときにメッセージを出す：JavaScript使用