.col-*
Bootstrap を使って12列グリッドレイアウトを作成するには、次に示すクラスを指定する。
<div class="row mt-1">
<div class="col-1 bg-info">col-1</div>
<div class="col-11 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-2 bg-info">col-2</div>
<div class="col-10 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-3 bg-info">col-3</div>
<div class="col-9 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-4 bg-info">col-4</div>
<div class="col-8 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-5 bg-info">col-5</div>
<div class="col-7 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-6 bg-info">col-6</div>
<div class="col-6 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-7 bg-info">col-7</div>
<div class="col-5 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-8 bg-info">col-8</div>
<div class="col-4 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-9 bg-info">col-9</div>
<div class="col-3 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-10 bg-info">col-10</div>
<div class="col-2 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-11 bg-info">col-11</div>
<div class="col-1 bg-light"></div>
</div">
<div class="row mt-1">
<div class="col-12 bg-info">col-12</div>
</div">.col-xs-{n}
Bootstrap では、画面の横幅が Extra Small (<576px) の場合の列幅を col-xs-1 から col-xs-12 までのクラスで指定できる。
<div class="row">
<div class="col-6 col-xs-12">1</div>
<div class="col-6 col-xs-12">2</div>
</div>.col-sm-{n}
Bootstrap では、画面の横幅が Small (≥576px) の場合の列幅を col-sm-1 から col-sm-12 までのクラスで指定できる。
<div class="row">
<div class="col-12 col-sm-6">1</div>
<div class="col-12 col-sm-6">2</div>
</div>.col-md-{n}
Bootstrap では、画面の横幅が Medium (≥768px) の場合の列幅を col-md-1 から col-md-12 までのクラスで指定できる。
<div class="row">
<div class="col-12 col-md-4">1</div>
<div class="col-12 col-md-4">2</div>
<div class="col-12 col-md-4">3</div>
</div>.col-lg-{n}
Bootstrap では、画面の横幅が Large (≥992px) の場合の列幅を col-lg-1 から col-lg-12 までのクラスで指定できる。
<div class="row">
<div class="col-12 col-lg-3">1</div>
<div class="col-12 col-lg-3">2</div>
<div class="col-12 col-lg-3">3</div>
<div class="col-12 col-lg-3">4</div>
</div>.col-xl-{n}
Bootstrap では、画面の横幅が Extra Large (≥1200px) の場合の列幅を col-xl-1 から col-xl-12 までのクラスで指定できる。
<div class="row">
<div class="col-12 col-xl-2">1</div>
<div class="col-12 col-xl-2">2</div>
<div class="col-12 col-xl-2">3</div>
<div class="col-12 col-xl-2">4</div>
<div class="col-12 col-xl-2">5</div>
<div class="col-12 col-xl-2">6</div>
</div>.col-xxl-{n}
Bootstrap では、画面の横幅が Extra Extra Large (≥1400px) の場合の列幅を col-xxl-1 から col-xxl-12 までのクラスで指定できる。
<div class="row">
<div class="col-6 col-xxl-1">1</div>
<div class="col-6 col-xxl-1">2</div>
<div class="col-6 col-xxl-1">3</div>
<div class="col-6 col-xxl-1">4</div>
<div class="col-6 col-xxl-1">5</div>
<div class="col-6 col-xxl-1">6</div>
<div class="col-6 col-xxl-1">7</div>
<div class="col-6 col-xxl-1">8</div>
<div class="col-6 col-xxl-1">9</div>
<div class="col-6 col-xxl-1">10</div>
<div class="col-6 col-xxl-1">11</div>
<div class="col-6 col-xxl-1">12</div>
</div>.img-fluid
Bootstrapで画像をレスポンシブにするには、img 要素に img-fluid クラスを指定する。
※fluidとは「流動的」という意味
レスポンシブな画像には、次のCSSプロパティが設定される。
- max-width: 100%;
- height: auto;
これにより、親要素の幅に合わせて画像が拡大・縮小する。
<img class="img-fluid" src="1280x720.png">
.rounded
Bootstrapで画像の角を丸くするには、img 要素に rounded クラスを指定する。
<img class="rounded" src="portrait.webp">
.img-thumbnail
Bootstrapでサムネイル画像を表示するには、img 要素に img-thumbnail クラスを指定する。
<img class="img-thumbnail" src="portrait.webp">.float-start
Bootstrapで画像を左寄せにするには、img 要素に float-start クラスを指定する。
float-start は後続の要素にも影響を与えるので、左寄せにしたい部分の親要素に clearfix クラスを指定する。
<div class="clearfix">
<img class="float-start" src="portrait.webp">
</div>.float-end
Bootstrapで画像を右寄せにするには、img 要素に float-end クラスを指定する。
float-end は後続の要素にも影響を与えるので、左寄せにしたい部分の親要素に clearfix クラスを指定する。
<div class="clearfix">
<img class="float-end" src="portrait.webp">
</div>.modal
Bootstrapはモーダルダイアログのコンポーネントを提供している。
<a data-bs-toggle="modal" data-bs-target="#MODAL1" class="btn btn-primary">表示</a>
<div class="modal" id="MODAL1" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">ダイアログの外をクリックすると消えます。</div>
</div>
</div>
</div>.fade
モーダルに fade クラスを指定すると、開くときにフェードイン、閉じるときにフェードアウトのアニメーション効果がつく。
<a data-bs-toggle="modal" data-bs-target="#MODAL2" class="btn btn-primary">表示</a>
<div class="modal fade" id="MODAL2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">ダイアログの外をクリックすると消えます。</div>
</div>
</div>
</div>.modal-header
モーダルダイアログにヘッダをつけることができる。
<a data-bs-toggle="modal" data-bs-target="#MODAL3" class="btn btn-primary">表示</a>
<div class="modal" id="MODAL3" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h5 class="modal-title">タイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<button>
</div>
<div class="modal-body">右上のクローズボタンをクリックすると消えます。</div>
</div>
</div>.modal-footer
モーダルダイアログにフッタをつけることができる。
<a data-bs-toggle="modal" data-bs-target="#MODAL4" class="btn btn-primary">表示</a>
<div class="modal" id="MODAL4" tabindex="-1">
<div class="modal-dialog">
<div class="modal-body">右下のクローズボタンをクリックすると消えます。</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">
Close
<button>
</div>
</div>
</div>.nav
Bootstrapでナビゲーション・メニューを作成するには、nav クラスを指定する。
<nav class="nav">
<a class="nav-link" href="/css/bulma/">Bulma</a>
<a class="nav-link" href="/css/materialize/">Materialize</a>
</nav>.justify-content-center
Bootstrapでコンテンツを中央寄せにするには、justify-content-center クラスを指定する。
<nav class="nav justify-content-center">
<a class="nav-link" href="/css/milligram/">Milligram</a>
<a class="nav-link" href="/css/primer/">Primer CSS</a>
</nav>.justify-content-end
Bootstrapでコンテンツを右寄せにするには、justify-content-end クラスを指定する。
<nav class="nav justify-content-end">
<a class="nav-link" href="/css/pure/">Pure.css</a>
<a class="nav-link" href="/css/semantic/">Semantic UI</a>
</nav>.flex-column
Bootstrapで垂直ナビゲーション・メニューを作成するには、flex-column クラスを指定する。
<nav class="nav flex-column">
<a class="nav-link" href="/css/skeleton/">Skeleton</a>
<a class="nav-link" href="/css/spectre/">Spectre.css</a>
</nav>.p-auto
<div class="p-auto bg-info">p-auto</div>.ps-5
<div class="ps-sm-5 bg-info">ps-sm-5</div>
<div class="ps-md-5 bg-info">ps-md-5</div>
<div class="ps-lg-5 bg-info">ps-lg-5</div>
<div class="ps-xl-5 bg-info">ps-xl-5</div>
<div class="ps-xxl-5 bg-info">ps-xxl-5</div>.ps-auto
<div class="ps-auto bg-info">ps-auto</div>.table
Bootstrapで表をスタイリングするには、<table> タグに table クラスを指定する。
<table class="table">
<caption>ブレークポイント</caption>
<thead>
<tr>
<th>ブレークポイント</th>
<th>接中辞</th>
<th>寸法</th>
</tr>
</thead>
<tbody>
<tr>
<td>x-small</td>
<td>なし</td>
<td><576px</td>
</tr>
<tr>
<td>small</td>
<td>sm</td>
<td>≥576px</td>
</tr>
<tr>
<td>medium</td>
<td>md</td>
<td>≥768px</td>
</tr>
<tr>
<td>large</td>
<td>lg</td>
<td>≥992px</td>
</tr>
<tr>
<td>extra large</td>
<td>xl</td>
<td>≥1200px</td>
</tr>
<tr>
<td>extra extra large</td>
<td>xxl</td>
<td>≥1400px</td>
</tr>
</tbody>
</table>| ブレークポイント | 接中辞 | 寸法 |
|---|---|---|
| x-small | なし | <576px |
| small | sm | ≥576px |
| medium | md | ≥768px |
| large | lg | ≥992px |
| extra large | xl | ≥1200px |
| extra extra large | xxl | ≥1400px |
Text align
Bootstrap CSSフレームワークでテキストの揃え方を指定するには、以下に示すクラスを使う。
| CLASS | STYLE |
|---|---|
text-start |
text-align: left; |
text-center |
text-align: center; |
text-end |
text-align: right; |
<p class="text-start">左寄せテキスト</p>左寄せテキスト
<p class="text-center">中央揃えテキスト</p>中央揃えテキスト
<div class="text-center">
<img src="portrait.webp">
</div><p class="text-end">右寄せテキスト</p>右寄せテキスト
<div class="text-end">
<img src="portrait.webp">
</div>.text-decoration-underline
Bootstrap CSS フレームワークを使ってテキストに下線（アンダーライン）を引くには、text-decoration-underline クラスを指定する。
<p class="text-decoration-underline">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-decoration-line-through
Bootstrap CSS フレームワークを使ってテキストに打ち消し線（ストライク）を引くには、text-decoration-line-through クラスを指定する。
<p class="text-decoration-line-through">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-decoration-none
Bootstrap CSS フレームワークを使ってテキストの下線や打ち消し線を消すには、text-decoration-none クラスを指定する。
<a hef="#" class="text-decoration-none">
The quick brown fox jumps over the lazy dog.
</a>