Bootstrap5サンプル検索

bootstrap5.css

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

bootstrap5.css

img {
  vertical-align: middle;
  border-style: none;
}

bootstrap5.css

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

bootstrap5.css

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

bootstrap5.css

.list-inline {
  padding-left: 0;
  list-style: none;
}

bootstrap5.css

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

bootstrap5.css

.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

bootstrap5.css

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

bootstrap5.css

.breadcrumb {
  /* パン屑 */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

bootstrap5.css

.pagination {
  /* ページネーション */
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

bootstrap5.css

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

bootstrap5.css

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

bootstrap5.css

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

bootstrap5.css

.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

bootstrap5.css

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}

bootstrap5.css

.font-italic {
  font-style: italic !important;
}

flex文字の伸縮デフォルト：d-flex

flex文字01

flex文字02

flex文字03

  <!-- flex文字の幅で伸長する -->
  <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-grow

flex文字01（flex-grow-1）

flex文字02

flex文字03

  <div class="d-flex" style="height: 100px">
    <!--flex文字の幅を伸長で調整する(残り全部） -->
    <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-shrink

flex文字01（flex-shrink-1）

flex文字02

flex文字03

  <!-- flex文字の幅を縮小で調整する -->
  <div class="d-flex" style="height: 100px">
    <div class="p-2 flex-shrink-1">flex文字01（flex-shrink-1）</div>
    <div class="p-2 w-100">flex文字02</div>
    <div class="p-2 w-100">flex文字03</div>
  </div>

flex縦の均等配置/トップからスタートする：align-content-start

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

  <div class="d-flex align-content-start flex-wrap" style="height: 200px">
    <!-- 文字列01が上段の左端からスタートする -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

flex縦の均等配置/高さ固定で、中央寄せ：align-content-center

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

  <div class="d-flex align-content-center flex-wrap" style="height: 200px">
    <!-- height固定で、中央寄せ -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

flex縦の均等配置/高さ固定で、ボトム詰め：align-content-end

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

  <div class="d-flex align-content-end flex-wrap" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

flex縦の均等配置/高さ固定で、上と下：align-content-between

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

  <div class="d-flex align-content-between flex-wrap" style="height: 200px">
    <!-- height固定で、上と下 -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
  </div>

flex縦の均等配置/高さ固定で、行間自動調整：align-content-around

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

  <div class="d-flex align-content-around flex-wrap" style="height: 200px">
    <!-- height固定で、行間自動調整 -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
  </div>

flex縦の均等配置/縦の高さも勝手に合わせてくる：align-content-stretch

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

  <div class="d-flex align-content-stretch flex-wrap" style="height: 400px">
    <!-- height固定のサイズで、flaxの高さも自動で調整する -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

flexコンテナー内のアイテムの配置/上：align-items-start

flex文字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コンテナー内のアイテムの配置/下：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コンテナー内のアイテムの配置/ストレッチ：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コンテナー内のアイテムの配置/中央：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コンテナー内のアイテムの配置/ベースライン：align-items-baseline

flex文字01
（padding: 2rem）

flex文字02
（padding: 4rem）

flex文字03
（padding: 1rem）

  <div class="d-flex align-items-baseline" style="height: 200px">
    <!-- paddingも含めて、flaxの大きさが決まる 文字の位置の高さが同じ-->
    <div style="padding: 2rem">flex文字01 <br>（padding: 2rem）</div>
    <div style="padding: 4rem">flex文字02 <br>（padding: 4rem）</div>
    <div style="padding: 1rem">flex文字03 <br>（padding: 1rem）</div>
  </div>

flexコンテナー内のアイテムの配置/自身ストレッチ：align-self-stretch

flex文字01

flex文字02（align-self-stretch）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-stretch">flex文字02（align-self-stretch）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身上：align-self-start

flex文字01

flex文字02（align-self-start）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-start">flex文字02（align-self-start）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身下：align-self-end

flex文字01

flex文字02（align-self-end）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-end">flex文字02（align-self-end）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身中央：align-self-center

flex文字01

flex文字02（align-self-center）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-center">flex文字02（align-self-center）</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/自身ベースライン：align-self-baseline

flex文字01

flex文字02（align-self-baseline）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-baseline">flex文字02（align-self-baseline）</div>
    <div>flex文字03 </div>
  </div>

カード、画像あり、タイトル、本文、ボタンのセット：card

カードのタイトル

カードの内容

ボタン

  <!-- カードの枠：card -->
  <div class="card" style="max-width: 25rem;">
    <!-- レイアウトされる画像：card-img-top -->
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="...">
    <!-- カード本文：card-body -->
    <div class="card-body">
      <!-- カードタイトル：card-title -->
      <h4 class="card-title">カードのタイトル</h4>
      <!-- カードの内容文：card-text -->
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

カードの背景色と文字色の設定：text-whiteとbg-primary

背景色、文字色指定なし

カードのタイトル

カードの内容

背景色：bg-primary、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-secondary、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-success、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-danger、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-warning、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-info、文字色：text-white

カードのタイトル

カードの内容

背景色：bg-light

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色、文字色指定なし</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-primary、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-secondary、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-success mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-success、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-danger、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-warning、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-info mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-info、文字色：text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card bg-light mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色：bg-light</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

カードのヘッダとフッターの背景色を変える：bg-transparent

ヘッダー初期設定の背景色

カードのタイトル

カードの内容

フッター初期設定の背景色

ヘッダー背景色の除去：bg-transparent

カードのタイトル

カードの内容

フッター背景色の除去：bg-transparent

  <div class="card mb-3" style="max-width: 25rem;">
    <!-- ヘッダとフッターでデフォルトの背景色 -->
    <div class="card-header">ヘッダー初期設定の背景色</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <div class="card-footer">フッター初期設定の背景色</div>
  </div>
  <div class="card mb-3" style="max-width: 25rem;">
    <!-- デフォルトの背景色を変える場合：bg-transparent -->
    <div class="card-header bg-transparent">ヘッダー背景色の除去：bg-transparent</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <div class="card-footer bg-transparent">フッター背景色の除去：bg-transparent</div>
  </div>

カードのデフォルトのボーダー色を変更する：border-primary

カードのヘッダー

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <!-- カード枠のボーダー色：青 border-primary -->
  <div class="card border-primary mb-3" style="max-width: 25rem;">
    <!-- ヘッダーのボーダー色：青 border-primary -->
    <div class="card-header border-primary">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

カードに画像を配置する：card-img-top

カードの内容

  <!-- カード上部に画像を配置：card-img-top -->
  <div class="card mb-3" style="max-width: 25rem;">
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
    <div class="card-body">
      <p class="card-text">カードの内容</p>
    </div>
  </div>

カードに下画像を配置する：card-img-bottom

カードの内容

  <!-- カード下部に画像を配置：card-img-bottom -->
  <div class="card" style="max-width: 25rem;">
    <div class="card-body">
      <p class="card-text">カードの内容</p>
    </div>
    <img class="card-img-bottom" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-bottom"
      alt="...">
  </div>

カード内のボーダーの無いリストグループ：list-group-flush

カードのタイトル

カードの内容

リスト01
リスト02
リスト03

カード内リンクカード内リンク

  <div class="card" style="max-width: 25rem;">
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <!-- list-group-flushは、ボーダーの無いリストグループ-->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト01</li>
      <li class="list-group-item">リスト02</li>
      <li class="list-group-item">リスト03</li>
    </ul>
    <!-- カードの本文：card-body -->
    <div class="card-body">
      <a href="#" class="card-link">カード内リンク</a>
      <a href="#" class="card-link">カード内リンク</a>
    </div>
  </div>

リストマーカーのないリストグループ：list-unstyled

リストマーカーの無いリスト項目
リストマーカーの無いリスト項目
リストマーカーの無いリスト項目

  <ul class="list-unstyled">
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
  </ul>

オーバーフロー（枠から飛び出す）を制約する設定：data-boundary

  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <!-- ata-boundary="scrollParent"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>

スペースがない場合に、反対側にドロップダウンを表示させる：data-flip

  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- data-flip="true"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
      </div>
    </div>
  </div>

ドロップダウンメニューにdivでテキストを配置する：text-muted

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
      <p>メニュー内のテキストその1</p>
      <p class="text-danger">メニュー内のテキストその2</p>
    </div>
  </div>

メディアオブジェクトのリスト：mediaとmedia-body

タイトル
ここに文章が入ります
タイトル
ここに文章が入ります

  <!-- マーカなし -->
  <ul class="list-unstyled">
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
  </ul>

navbar-lightで文字色を暗くし、背景色をCSSで設定

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3"
      aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent3">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

プログレスバー：progressとprogress-barとw-50

  <!-- divで、progressとprogress-barの組み合わせで実装する -->
  <!-- 進捗度は、aria-valuenowの値を変える -->
  <div class="progress mb-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 20%" role="progressbar" aria-valuenow="25" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 80%" role="progressbar" aria-valuenow="75" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

プログレスバーの色：progress-barとbg-*

  <div class="progress mb-3">
    <div class="bg-warning text-dark">progress-bar bg-success" role="progressbar" bg-warning text-dark">style="width: 25%" aria-valuenow="25" aria-valuemin="0"
      aria-valuemax="100"></div>
    <div class="bg-warning text-dark">progress-bar bg-info" role="progressbar" bg-warning text-dark">style="width: 50%" aria-valuenow="50" aria-valuemin="0"
      aria-valuemax="100"></div>
    <div class="bg-warning text-dark">progress-bar bg-warning" role="progressbar" bg-warning text-dark">style="width: 75%" aria-valuenow="75" aria-valuemin="0"
      aria-valuemax="100"></div>
    <div class="bg-warning text-dark">progress-bar bg-danger" role="progressbar" bg-warning text-dark">style="width: 100%" aria-valuenow="100" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>

20pxの太さのプログレスバー：style

  <!-- 高さはstyleで設定する -->
  <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>

プログレスバーにテキストラベルを追加する

25%

  <div class="progress" style="height: 20px;">
    <!-- divにテキストを書くだけ -->
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>

複数のプログレスバーを積み重ねる

  <div class="progress" style="height: 20px;">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
      aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0"
      aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
      aria-valuemax="100"></div>
  </div>

プログレスバーをストライプにする：progress-bar-striped

  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10"
      aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
      aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
      aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
      aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
      aria-valuemin="0" aria-valuemax="100"></div>
  </div>

プログレスバーのアニメーションさせる：progress-bar-animated

  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25"
      aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
      aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="75"
      aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"
      aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>

垂直方向中央に配置するモーダル：modal-dialog-centered

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <!-- モーダルの×ボタン -->
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: rgba(0, 0, 0, .1);
      border: 1px solid #aaa;
    }
  </style>

style

bootstrap5.css

html bootstrap5 Sample

flex文字の伸縮 デフォルト：d-flex

flexの幅を伸縮で埋める機能：flex-grow

flexの幅を縮小で調整する（他を優先）：flex-shrink

flex縦の均等配置/トップからスタートする：align-content-start

flex縦の均等配置/高さ固定で、中央寄せ：align-content-center

flex縦の均等配置/高さ固定で、ボトム詰め：align-content-end

flex縦の均等配置/高さ固定で、上と下：align-content-between

flex縦の均等配置/高さ固定で、行間自動調整：align-content-around

flex縦の均等配置/縦の高さも勝手に合わせてくる：align-content-stretch

flexコンテナー内のアイテムの配置/上：align-items-start

flexコンテナー内のアイテムの配置/下：align-items-end

flexコンテナー内のアイテムの配置/ストレッチ：align-items-stretch

flexコンテナー内のアイテムの配置/中央：align-items-center

flexコンテナー内のアイテムの配置/ベースライン：align-items-baseline

flexコンテナー内のアイテムの配置/自身ストレッチ：align-self-stretch

flexコンテナー内のアイテムの配置/自身上：align-self-start

flexコンテナー内のアイテムの配置/自身下：align-self-end

flexコンテナー内のアイテムの配置/自身中央：align-self-center

flexコンテナー内のアイテムの配置/自身ベースライン：align-self-baseline

カード、画像あり、タイトル、本文、ボタンのセット：card

カードのタイトル

カードの背景色と文字色の設定：text-whiteとbg-primary

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのヘッダとフッターの背景色を変える：bg-transparent

カードのタイトル

カードのタイトル

カードのデフォルトのボーダー色を変更する：border-primary

カードのタイトル

カードのタイトル

カードに画像を配置する：card-img-top

カードに下画像を配置する：card-img-bottom

カード内のボーダーの無いリストグループ：list-group-flush

カードのタイトル

リストマーカーのないリストグループ：list-unstyled

オーバーフロー（枠から飛び出す）を制約する設定：data-boundary

スペースがない場合に、反対側にドロップダウンを表示させる：data-flip

ドロップダウンメニューにdivでテキストを配置する：text-muted

メディアオブジェクトのリスト：mediaとmedia-body

タイトル

タイトル

navbar-lightで文字色を暗くし、背景色をCSSで設定

プログレスバー：progressとprogress-barとw-50

プログレスバーの色：progress-barとbg-*

20pxの太さのプログレスバー：style

プログレスバーにテキストラベルを追加する

複数のプログレスバーを積み重ねる

プログレスバーをストライプにする：progress-bar-striped

プログレスバーのアニメーションさせる：progress-bar-animated

垂直方向中央に配置するモーダル：modal-dialog-centered

flex文字の伸縮デフォルト：d-flex