BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。
公式サイト | https://getbootstrap.com/ |
開発者 | Twitter, Inc. |
ライセンス | MIT |
グリッド | 12列 |
GitHub stars | 159k |
@getbootstrap |
モジュール | サイズ |
---|---|
bootstrap.min.css | 231.9KB |
bootstrap.bundle.min.js | 80.7KB |
Bootstrap CSSフレームワークを使うときの基本テンプレートは次のとおり。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<!--
content
-->
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Bootstrap CSSフレームワークはCDN (Contents Delivery Network) を通じて導入できる。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
crossorigin="anonymous">
</head>
<body>
<!--
content
-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
crossorigin="anonymous">
</script>
</body>
</html>
Bootstrapを使って要素を非表示にするには、d-none
クラスを指定する。
<p class="d-none">このテキストは表示されません。</p>
このテキストは表示されません。
サフィックス(接尾辞)にブレークポイントを指定することもできる。
<p class="d-none-sm">画面サイズがsmの場合、このテキストは表示されません。</p>
<p class="d-none-md">画面サイズがmdの場合、このテキストは表示されません。</p>
<p class="d-none-lg">画面サイズがlgの場合、このテキストは表示されません。</p>
<p class="d-none-xl">画面サイズがxlの場合、このテキストは表示されません。</p>
<p class="d-none-xxl">画面サイズがxxlの場合、このテキストは表示されません。</p>
Bootstrap で左右に適切な余白を持たせるには、container クラスを指定する。
<div class="container">
初春の令月にして、気淑よく風和やわらぎ、
梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
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">
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>
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>
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>
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>
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>
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>
Bootstrapで画像をレスポンシブにするには、img
要素に img-fluid
クラスを指定する。
※fluidとは「流動的」という意味
レスポンシブな画像には、次のCSSプロパティが設定される。
これにより、親要素の幅に合わせて画像が拡大・縮小する。
<img class="img-fluid" src="1280x720.png">
Bootstrapで画像の角を丸くするには、img
要素に rounded
クラスを指定する。
<img class="rounded" src="portrait.webp">
Bootstrapでサムネイル画像を表示するには、img
要素に img-thumbnail
クラスを指定する。
<img class="img-thumbnail" src="portrait.webp">
Bootstrapで画像を左寄せにするには、img
要素に float-start
クラスを指定する。
float-start
は後続の要素にも影響を与えるので、左寄せにしたい部分の親要素に clearfix
クラスを指定する。
<div class="clearfix">
<img class="float-start" src="portrait.webp">
</div>
Bootstrapで画像を右寄せにするには、img
要素に float-end
クラスを指定する。
float-end
は後続の要素にも影響を与えるので、左寄せにしたい部分の親要素に clearfix
クラスを指定する。
<div class="clearfix">
<img class="float-end" src="portrait.webp">
</div>
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 クラスを指定すると、開くときにフェードイン、閉じるときにフェードアウトのアニメーション効果がつく。
<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>
表示
モーダルダイアログにヘッダをつけることができる。
<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>
表示
モーダルダイアログにフッタをつけることができる。
<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>
表示
Bootstrapでナビゲーション・メニューを作成するには、nav クラスを指定する。
<nav class="nav">
<a class="nav-link" href="/css/bulma/">Bulma</a>
<a class="nav-link" href="/css/materialize/">Materialize</a>
</nav>
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>
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>
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>
<div class="p-auto bg-info">p-auto</div>
<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>
<div class="ps-auto bg-info">ps-auto</div>
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 |
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>
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.
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.
Bootstrap CSS フレームワークを使ってテキストの下線や打ち消し線を消すには、text-decoration-none
クラスを指定する。
<a hef="#" class="text-decoration-none">
The quick brown fox jumps over the lazy dog.
</a>
Bootstrap CSSフレームワークでマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA |
---|---|---|
m-0 |
margin: 0; |
|
m-1 |
margin: .25rem; |
|
m-2 |
margin: .5rem; |
|
m-3 |
margin: 1rem; |
|
m-4 |
margin: 1.5rem; |
|
m-5 |
margin: 3rem; |
|
m-auto |
margin: auto; |
<div class="m-0 bg-info">m-0</div>
<div class="m-1 bg-info">m-1</div>
<div class="m-2 bg-info">m-2</div>
<div class="m-3 bg-info">m-3</div>
<div class="m-4 bg-info">m-4</div>
<div class="m-5 bg-info">m-5</div>
<div class="m-auto w-75 bg-info">m-auto</div>
Bootstrap CSSフレームワークで上側のマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA |
---|---|---|
mt-0 |
margin-top: 0; |
|
mt-1 |
margin-top: .25rem; |
|
mt-2 |
margin-top: .5rem; |
|
mt-3 |
margin-top: 1rem; |
|
mt-4 |
margin-top: 1.5rem; |
|
mt-5 |
margin-top: 3rem; |
|
mt-auto |
margin-top: auto; |
<div class="row">
<div class="col mt-0">mt-0</div>
<div class="col mt-1">mt-1</div>
<div class="col mt-2">mt-2</div>
<div class="col mt-3">mt-3</div>
<div class="col mt-4">mt-4</div>
<div class="col mt-5">mt-5</div>
<div class="col mt-auto">mt-auto</div>
</div>
Bootstrap CSSフレームワークで下側のマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA |
---|---|---|
mb-0 |
margin-bottom: 0; |
|
mb-1 |
margin-bottom: .25rem; |
|
mb-2 |
margin-bottom: .5rem; |
|
mb-3 |
margin-bottom: 1rem; |
|
mb-4 |
margin-bottom: 1.5rem; |
|
mb-5 |
margin-bottom: 3rem; |
|
mb-auto |
margin-bottom: auto; |
<div class="row">
<div class="col mb-0 bg-info">mb-0</div>
<div class="col mb-1 bg-info">mb-1</div>
<div class="col mb-2 bg-info">mb-2</div>
<div class="col mb-3 bg-info">mb-3</div>
<div class="col mb-4 bg-info">mb-4</div>
<div class="col mb-5 bg-info">mb-5</div>
<div class="col mb-auto bg-info">mb-auto</div>
</div>
Bootstrap CSSフレームワークで左側のマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA |
---|---|---|
ms-0 |
margin-left: 0; |
|
ms-1 |
margin-left: .25rem; |
|
ms-2 |
margin-left: .5rem; |
|
ms-3 |
margin-left: 1rem; |
|
ms-4 |
margin-left: 1.5rem; |
|
ms-5 |
margin-left: 3rem; |
|
ms-auto |
margin-left: auto; |
|
ms-sm-0 |
margin-left: 0; |
@media (min-width: 576px) |
ms-sm-1 |
margin-left: .25rem; |
@media (min-width: 576px) |
ms-sm-2 |
margin-left: .5rem; |
@media (min-width: 576px) |
ms-sm-3 |
margin-left: 1rem; |
@media (min-width: 576px) |
ms-sm-4 |
margin-left: 1.5rem; |
@media (min-width: 576px) |
ms-sm-5 |
margin-left: 3rem; |
@media (min-width: 576px) |
ms-md-0 |
margin-left: 0; |
@media (min-width: 768px) |
ms-md-1 |
margin-left: .25rem; |
@media (min-width: 768px) |
ms-md-2 |
margin-left: .5rem; |
@media (min-width: 768px) |
ms-md-3 |
margin-left: 1rem; |
@media (min-width: 768px) |
ms-md-4 |
margin-left: 1.5rem; |
@media (min-width: 768px) |
ms-md-5 |
margin-left: 3rem; |
@media (min-width: 768px) |
ms-lg-0 |
margin-left: 0; |
@media (min-width: 992px) |
ms-lg-1 |
margin-left: .25rem; |
@media (min-width: 992px) |
ms-lg-2 |
margin-left: .5rem; |
@media (min-width: 992px) |
ms-lg-3 |
margin-left: 1rem; |
@media (min-width: 992px) |
ms-lg-4 |
margin-left: 1.5rem; |
@media (min-width: 992px) |
ms-lg-5 |
margin-left: 3rem; |
@media (min-width: 992px) |
ms-xl-0 |
margin-left: 0; |
@media (min-width: 1200px) |
ms-xl-1 |
margin-left: .25rem; |
@media (min-width: 1200px) |
ms-xl-2 |
margin-left: .5rem; |
@media (min-width: 1200px) |
ms-xl-3 |
margin-left: 1rem; |
@media (min-width: 1200px) |
ms-xl-4 |
margin-left: 1.5rem; |
@media (min-width: 1200px) |
ms-xl-5 |
margin-left: 3rem; |
@media (min-width: 1200px) |
<div class="ms-0 bg-info">ms-0</div>
<div class="ms-1 bg-info mt-1">ms-1</div>
<div class="ms-2 bg-info mt-1">ms-2</div>
<div class="ms-3 bg-info mt-1">ms-3</div>
<div class="ms-4 bg-info mt-1">ms-4</div>
<div class="ms-5 bg-info mt-1">ms-5</div>
<div class="ms-auto w-75 bg-info mt-1">ms-auto</div>
Bootstrap CSSフレームワークで右側のマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA | |
---|---|---|---|
me-0 |
margin-right: 0; |
||
me-1 |
margin-right: .25rem; |
||
me-2 |
margin-right: .5rem; |
||
me-3 |
margin-right: 1rem; |
||
me-4 |
margin-right: 1.5rem; |
||
me-5 |
margin-right: 3rem; |
||
me-auto |
margin-right: auto; |
||
me-sm-0 |
margin-right: 0; |
@media (min-width: 576px) |
|
me-md-0 |
margin-right: 0; |
@media (min-width: 768px) |
|
me-lg-0 |
margin-right: 0; |
@media (min-width: 992px) |
|
me-xl-0 |
margin-right: 0; |
@media (min-width: 1200px) |
<div class="me-0 bg-info">me-0</div>
<div class="me-1 bg-info mt-1">me-1</div>
<div class="me-2 bg-info mt-1">me-2</div>
<div class="me-3 bg-info mt-1">me-3</div>
<div class="me-4 bg-info mt-1">me-4</div>
<div class="me-5 bg-info mt-1">me-5</div>
Bootstrap CSSフレームワークで水平方向のマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA |
---|---|---|
mx-0 |
margin-right: 0; |
|
mx-1 |
margin-right: .25rem; |
|
mx-2 |
margin-right: .5rem; |
|
mx-3 |
margin-right: 1rem; |
|
mx-4 |
margin-right: 1.5rem; |
|
mx-5 |
margin-right: 3rem; |
|
mx-auto |
margin-right: auto; |
|
mx-sm-0 |
margin-right: 0; |
@media (min-width: 576px) |
mx-md-0 |
margin-right: 0; |
@media (min-width: 768px) |
mx-lg-0 |
margin-right: 0; |
@media (min-width: 992px) |
mx-xl-0 |
margin-right: 0; |
@media (min-width: 1200px) |
<div class="mx-0 bg-info">mx-0</div>
<div class="mx-1 bg-info mt-1">mx-1</div>
<div class="mx-2 bg-info mt-1">mx-2</div>
<div class="mx-3 bg-info mt-1">mx-3</div>
<div class="mx-4 bg-info mt-1">mx-4</div>
<div class="mx-5 bg-info mt-1">mx-5</div>
<div class="mx-auto bg-info mt-1 w-75">mx-auto</div>
Bootstrap CSSフレームワークで垂直方向のマージンを指定するには、以下に示すクラスを使う。
CLASS | STYLE | MEDIA |
---|---|---|
my-0 |
margin-top: 0; |
|
my-1 |
margin-top: .25rem; |
|
my-2 |
margin-top: .5rem; |
|
my-3 |
margin-top: 1rem; |
|
my-4 |
margin-top: 1.5rem; |
|
my-5 |
margin-top: 3rem; |
|
my-auto |
margin-top: auto; |
<div class="row">
<div class="col my-0 bg-info">my-0</div>
<div class="col my-1 bg-info">my-1</div>
<div class="col my-2 bg-info">my-2</div>
<div class="col my-3 bg-info">my-3</div>
<div class="col my-4 bg-info">my-4</div>
<div class="col my-5 bg-info">my-5</div>
<div class="col my-auto bg-info">my-auto</div>
</div>
Bootstrap CSSフレームワークで要素の幅を指定するには、以下に示すクラスを使う。
CLASS | STYLE |
---|---|
w-25 |
width: 25%; |
w-50 |
width: 50%; |
w-75 |
width: 75%; |
w-100 |
width: 100%; |
<div class="w-25 bg-info">25%</div>
<div class="w-50 bg-info">50%</div>
<div class="w-75 bg-info">75%</div>
<div class="w-100 bg-info">100%</div>