text

bootstrap5.css

bootstrap5.css
body {
  /* bodyの最初の設定 */
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
bootstrap5.css
abbr[title],
abbr[data-bs-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
bootstrap5.css
a {
  color: #0d6efd;
  text-decoration: underline;
}
bootstrap5.css
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
bootstrap5.css
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}
bootstrap5.css
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
bootstrap5.css
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
bootstrap5.css
button,
select {
  /* 文字の大文字等への変換 */
  text-transform: none;
}
bootstrap5.css
textarea {
  /* resizeは、ユーザーが要素のサイズを変更できるかどうか */
  resize: vertical;
}
bootstrap5.css
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}
bootstrap5.css
[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}
bootstrap5.css
.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}
bootstrap5.css
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #6c757d;
}
bootstrap5.css
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
textarea.form-control {
  min-height: calc(1.5em + 0.75rem + 2px);
}
bootstrap5.css
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
}
bootstrap5.css
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #212529;
}
bootstrap5.css
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
bootstrap5.css
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
bootstrap5.css
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.btn-link {
  font-weight: 400;
  color: #0d6efd;
  text-decoration: underline;
}
bootstrap5.css
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  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
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #0d6efd;
}
bootstrap5.css
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1rem;
  color: #212529;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item-text {
  color: #dee2e6;
}
bootstrap5.css
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
bootstrap5.css
.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}
bootstrap5.css
.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
bootstrap5.css
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
bootstrap5.css
.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-toggler:hover {
  text-decoration: none;
}
bootstrap5.css
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}
bootstrap5.css
.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.55);
}
bootstrap5.css
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.55);
}
bootstrap5.css
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}
bootstrap5.css
.card-text:last-child {
  margin-bottom: 0;
}
bootstrap5.css
.card-link:hover {
  text-decoration: none;
}
bootstrap5.css
.page-link {
  position: relative;
  display: block;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
bootstrap5.css
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #0d6efd;
  transition: width 0.6s ease;
}
bootstrap5.css
.list-group-item-action {
  /* 幅100%にして色を付けて、テキストの位置は継承する */
  /* aやbuttonのインラインをリストにするために使う */
  width: 100%;
  color: #495057;
  text-align: inherit;
}
bootstrap5.css
.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}
bootstrap5.css
.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.btn-close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
bootstrap5.css
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  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-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}
bootstrap5.css
.popover {
  position: absolute;
  top: 0;
  left: 0 /* rtl:ignore */;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: var(--bs-font-sans-serif);
  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
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
bootstrap5.css
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}
bootstrap5.css
.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
bootstrap5.css
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}
bootstrap5.css
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
}
bootstrap5.css
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: 0.75s linear infinite spinner-grow;
  animation: 0.75s linear infinite spinner-grow;
}
bootstrap5.css
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
bootstrap5.css
.align-text-bottom {
  vertical-align: text-bottom !important;
}
bootstrap5.css
.align-text-top {
  vertical-align: text-top !important;
}
bootstrap5.css
.text-lowercase {
  text-transform: lowercase !important;
}
bootstrap5.css
.text-uppercase {
  text-transform: uppercase !important;
}
bootstrap5.css
.text-capitalize {
  text-transform: capitalize !important;
}
bootstrap5.css
.text-start {
  text-align: left !important;
}
bootstrap5.css
.text-end {
  text-align: right !important;
}
bootstrap5.css
.text-center {
  text-align: center !important;
}
bootstrap5.css
.text-primary {
  color: #0d6efd !important;
}
bootstrap5.css
.text-secondary {
  color: #6c757d !important;
}
bootstrap5.css
.text-success {
  color: #198754 !important;
}
bootstrap5.css
.text-info {
  color: #0dcaf0 !important;
}
bootstrap5.css
.text-warning {
  color: #ffc107 !important;
}
bootstrap5.css
.text-danger {
  color: #dc3545 !important;
}
bootstrap5.css
.text-light {
  color: #f8f9fa !important;
}
bootstrap5.css
.text-dark {
  color: #212529 !important;
}
bootstrap5.css
.text-white {
  color: #fff !important;
}
bootstrap5.css
.text-body {
  color: #212529 !important;
}
bootstrap5.css
.text-muted {
  color: #6c757d !important;
}
bootstrap5.css
.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
bootstrap5.css
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}
bootstrap5.css
.text-reset {
  color: inherit !important;
}
bootstrap5.css
.text-wrap {
  white-space: normal !important;
}
bootstrap5.css
.text-nowrap {
  white-space: nowrap !important;
}
bootstrap5.css
.text-decoration-none {
  text-decoration: none !important;
}
bootstrap5.css
.text-decoration-underline {
  text-decoration: underline !important;
}
bootstrap5.css
.text-decoration-line-through {
  text-decoration: line-through !important;
}
bootstrap5.css
/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

html bootstrap5 Sample

js ナビゲーションバー内テキスト:navbar-text


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="#">ホーム </a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        </ul>
        <!-- ナビバー内にテキストを表示したい場合 -->
        <span class="navbar-text ms-auto">ナビゲーションバーテキスト</span>
      </div>
    </nav>

カード、画像あり、タイトル、本文、ボタンのセット:cardとcard-img-topとcard-bodyと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>

カードの背景色と文字色の設定: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;">
    <!-- card-header ヘッダーオプション-->
    <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>

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


Header
Primary card title

カード本文XXXXXXXXXXXX

Header
Secondary card title

カード本文XXXXXXXXXXXX

Header
Success card title

カード本文XXXXXXXXXXXX

Header
Danger card title

カード本文XXXXXXXXXXXX

Header
Warning card title

カード本文XXXXXXXXXXXX

Header
Info card title

カード本文XXXXXXXXXXXX

Header
Light card title

カード本文XXXXXXXXXXXX

Header
Dark card title

カード本文XXXXXXXXXXXX

  <div class="card text-dark">border-primary mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
      <h5 class="card-title">Primary card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-secondary mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Secondary card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-success mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-success">
      <h5 class="card-title">Success card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-danger mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-danger">
      <h5 class="card-title">Danger card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-warning mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Warning card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-info mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Info card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-light mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Light card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>
  <div class="card border-dark mb-3" style="max-width: 18rem">
    <div class="card-header">Header</div>
    <div class="card-body text-dark">
      <h5 class="card-title">Dark card title</h5>
      <p class="card-text">カード本文XXXXXXXXXXXX</p>
    </div>
  </div>

カードグループによるレイアウト:card-group


...

カード01

カードの内容

...

カード02

カードの内容カードの内容

...

カード03

カードの内容

カードの内容

  <div class="text-dark">card-group">
    <!-- 複数のカードをレイアウトするためにtext-dark">card-groupを使う、隙間が出来ない -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
    <!-- カード2 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード02</h4>
        <p class="card-text">カードの内容カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
    <!-- カード3 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">カードの内容</p>
        <p class="card-text">カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
  </div>

カードカラムによるレイアウト:card-columns


...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="text-dark">card-columns">
    <!-- ★複数のカードをレイアウトするためにtext-dark">card-columnsを使う、flex同様、自動整列される -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">ここに文章が入ります</p>
      </div>
    </div>
    <!-- カード02 -->
    <div class="card p-3">
      <blockquote class="blockquote mb-0 card-body">
        <p>カード02</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
      </blockquote>
    </div>
    <!-- カード03 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
    <!-- カード04 -->
    <div class="card bg-secondary text-white text-center p-3">
      <blockquote class="blockquote mb-0">
        <p>カード04</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small> 文章 </small> </footer>
      </blockquote>
    </div>
    <!-- カード05 -->
    <div class="card text-center">
      <!-- テキストのセンタリング 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-end">
      <blockquote class="blockquote mb-0">
        <p>カード07</p>
        <p>文章</p>
        <footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
      </blockquote>
    </div>
    <!-- カード08 -->
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">カード08</h4>
        <p class="card-text">文章</p>
        <p class="card-text"><small class="text-muted">文章</small></p>
      </div>
    </div>
  </div>

グリッドレイアウトとカード→カード幅の制約が決まる:card


カードのタイトル

カードの内容

ボタン

カードのタイトル

カードの内容

ボタン
  <div class="row">
    <div class="col-sm-6">
      <div class="text-dark">card">
        <div class="text-dark">card-body">
          <h4 class="text-dark">card-title">カードのタイトル</h4>
          <p class="text-dark">card-text">カードの内容</p>
          <a href="#" class="btn btn-primary">ボタン</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="text-dark">card">
        <div class="text-dark">card-body">
          <h4 class="text-dark">card-title">カードのタイトル</h4>
          <p class="text-dark">card-text">カードの内容</p>
          <a href="#" class="btn btn-primary">ボタン</a>
        </div>
      </div>
    </div>
  </div>

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


...

カードの内容

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

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


カードの内容

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

カードの画像とテキストを重ね合わせる:card-img-overlay


...

カードのタイトル

カードの内容

  <div class="card">
    <img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
    <div class="text-dark">card-img-overlay">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

画像の左寄せ:rowとcol


Placeholder Image
カードタイトル

カード本文××××××××××××××××××××××××××××××××××××××××

Last updated 3 mins ago

  <div class="card mb-3">
    <div class="row g-0">
      <div class="col-md-4">
        <svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img"
          aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96" />
          <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
        </svg>
      </div>
      <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">カードタイトル</h5>
          <p class="card-text">カード本文××××××××××××××××××××××××××××××××××××××××</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>
  </div>

カード内にリストグループ:list-group-flush


image

カードのタイトル

カードの内容

  • リスト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>
    <!-- text-dark">list-group-flushは、ボーダーの無いリストグループ-->
    <ul class="list-group text-dark">list-group-flush">
      <li class="list-group-item">リスト01</li>
      <li class="list-group-item">リスト02</li>
      <li class="list-group-item">リスト03</li>
    </ul>
    <!-- カードの本文:card-body -->
    <div class="card-body">
      <a href="#" class="card-link">カード内リンク</a>
      <a href="#" class="card-link">カード内リンク</a>
    </div>
  </div>

カード内にピル型ナビゲーションを組み込む:nav-pillsとcard-header-pills


カードのタイトル

カードの内容

ボタン
  <div class="card">
    <div class="card-header">
      <!-- ピル型のナビゲーション:text-dark">card-header-pills -->
      <ul class="nav text-dark">nav-pills text-dark">card-header-pills">
        <li class="nav-item"> <a class="nav-link active" href="">アクティブ</a> </li>
        <li class="nav-item"> <a class="nav-link" href="">リンク</a> </li>
        <li class="nav-item"> <a class="nav-link" href="">リンク</a> </li>
      </ul>
    </div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

カードにナビゲーションを組み込む:nav-tabs


カードのタイトル

カードの内容

ボタン
  <div class="card">
    <!-- カードのヘッダー -->
    <div class="card-header">
      <!-- タブ型のナビゲーション:card-header-tabs -->
      <ul class="nav text-dark">nav-tabs card-header-tabs">
        <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
      </ul>
    </div>
    <!-- カードの本文 -->
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

カードのサイズを変更する:w-75


カードの幅指定:w-75

カードの幅が親要素の幅の75%になります。

ボタン
  <!-- Sizingユーティリティクラス:w-{%値}による幅指定 -->
  <div class="card text-dark">w-75">
    <div class="card-body">
      <h4 class="card-title">カードの幅指定:text-dark">w-75</h4>
      <p class="card-text">カードの幅が親要素の幅の75%になります。</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

カード内のテキストを左寄せ、中央、右寄せ:text-centerとtext-end


標準(左寄せ)

カードの内容

ボタン

中央寄せ:text-center

カードの内容

ボタン

右寄せ:text-end

カードの内容

ボタン
  <!-- 標準(左寄せ) -->
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">標準(左寄せ)</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- divに設定する、中央寄せ:text-center -->
  <div class="card text-center">
    <div class="card-body">
      <h4 class="card-title">中央寄せ:text-center</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- divに設定する、右寄せ:text-end -->
  <div class="card text-end">
    <div class="card-body">
      <h4 class="card-title">右寄せ:text-end</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>

文字に色をつける:text-primary


  <div class="text-center">
    <p><a href="#" class="text-primary">text-primary</a></p>
    <p><a href="#" class="text-secondary">text-secondary</a></p>
    <p><a href="#" class="text-success">text-success</a></p>
    <p><a href="#" class="text-danger">text-danger</a></p>
    <p><a href="#" class="text-warning">text-warning</a></p>
    <p><a href="#" class="text-info">text-info</a></p>
    <p><a href="#" class="text-light bg-dark">text-light</a></p>
    <p><a href="#" class="text-dark">text-dark</a></p>
    <p><a href="#" class="text-body">text-body</a></p>
    <p><a href="#" class="text-muted">text-muted</a></p>
    <p><a href="#" class="text-white bg-dark">text-white</a></p>
    <p><a href="#" class="text-black-50">text-black-50</a></p>
    <p><a href="#" class="text-white-50 bg-dark">text-white-50</a></p>
  </div>

背景に色を付ける:bg-primary


  <div class="text-center">
    <p><a href="#" class="text-dark">bg-primary text-white d-block py-2">text-dark">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>

背景にグラデーション:bg-gradient


.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
  <div class="p-3 mb-2 bg-primary text-dark">bg-gradient text-white">.bg-primary.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-secondary text-dark">bg-gradient text-white">.bg-secondary.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-success text-dark">bg-gradient text-white">.bg-success.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-danger text-dark">bg-gradient text-white">.bg-danger.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-warning text-dark">bg-gradient text-dark">.bg-warning.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-info text-dark">bg-gradient text-dark">.bg-info.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-light text-dark">bg-gradient text-dark">.bg-light.text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-dark text-dark">bg-gradient text-white">.bg-dark.text-dark">bg-gradient</div>

リンクに色をつける:link-primary


  <div class="text-center">
    <a href="#" class="text-dark">link-primary">Primary link</a><br>
    <a href="#" class="link-secondary">Secondary link</a><br>
    <a href="#" class="link-success">Success link</a><br>
    <a href="#" class="link-danger">Danger link</a><br>
    <a href="#" class="link-warning">Warning link</a><br>
    <a href="#" class="link-info">Info link</a><br>
    <a href="#" class="link-light">Light link</a><br>
    <a href="#" class="link-dark">Dark link</a>
  </div>

最大値を指定する:mh-100


  <div style="height: 300px;">
    <img class="text-dark">mh-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
  </div>

最大幅を指定する:mw-100


  <div style="height: 300px;">
    <img class="text-dark">mw-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
  </div>

字の左寄せ/中央寄せ/右寄せを設定するクラス:text-start


text-start

text-center

text-end

  <p class="text-start">text-start</p>
  <p class="text-center">text-center</p>
  <p class="text-end">text-end</p>

ブレークポイント別の適用左寄せ/中央寄せ/右寄せを設定するクラス:text-start


text-sm-start

text-md-start

text-lg-start

text-xl-start

  <p class="text-sm-start">text-sm-start</p>
  <p class="text-md-start">text-md-start</p>
  <p class="text-lg-start">text-lg-start</p>
  <p class="text-xl-start">text-xl-start</p>

テキストの折り返し許可、不許可:text-wrapとtext-nowrap


テキスト折り返し許可している場合
テキスト折り返し許可していない場合
  <!-- 設定した文字数で折り返して全部を表示する -->
  <div class="badge bg-primary text-wrap" style="width: 6rem">テキスト折り返し許可している場合</div>
  <!-- divからはみ出してテキストが表示される -->
  <div class="text-nowrap bd-highlight" style="width: 6rem">テキスト折り返し許可していない場合</div>

文字を大文字や小文字に変換する:text-lowercase


text-Lowercase(すべて小文字)

text-uppercase(すべて大文字)

text-capitalize(最初の文字を大文字)

  <p class="text-lowercase">text-Lowercase(すべて小文字)</p>
  <p class="text-uppercase">text-uppercase(すべて大文字)</p>
  <p class="text-capitalize">text-capitalize(最初の文字を大文字)</p>

長いテキストを省略記号:text-truncate w-25


25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。

  <p class="text-truncate w-25">25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。</p>

サブタイトル:text-muted


主タイトル サブタイトル(text-muted)

  <h4>主タイトル <small class="text-muted">サブタイトル(text-muted)</small></h4>

引用の中央寄せ:blockquoteとtext-center


基本の引用文です。

文章の引用元が明示できます。
  <blockquote class="blockquote text-center">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

引用の右寄せ:blockquoteとtext-end


基本の引用文です。

文章の引用元が明示できます。
  <blockquote class="blockquote text-end">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>

引用符のフッター表記:figcaptionとblockquote-footer


基本の引用文です。

  <!-- HTML仕様では、ブロック引用符の帰属を blockquoteの外側に配置する必要があります。 -->
  <figure class="text-center">
    <blockquote class="blockquote">
      <p class="mb-0">基本の引用文です。</p>
    </blockquote>
    <text-dark">figcaption class="text-dark">blockquote-footer">文章の <cite title="引用元の名前">引用元</cite></text-dark">figcaption>
  </figure>

略語:abbr


HTML

HTML

  <!-- 略語にカーソルを合わせるとtitleの内容(正式名称)を表示される -->
  <p><text-dark">abbr title="HyperText Markup Language">HTML</text-dark">abbr></p>
  <p><text-dark">abbr title="HyperText Markup Language" class="initialism">HTML</text-dark">abbr></p>

HTML5 英語を斜体で表示:em


em要素のデフォルトスタイルを使って、テキストを強調したいテキスト(Emphasis text)としてイタリック体または斜体で表示させることができます。

  <p>em要素のデフォルトスタイルを使って、テキストを<em>強調したいテキスト(Emphasis text)</em>としてイタリック体または斜体で表示させることができます。</p>

プログラムからのサンプル出力を示す:samp


This text is meant to be treated as sample output from a computer program.
  <div>
    <text-dark">samp>This text is meant to be treated as text-dark">sample output from a computer program.</text-dark">samp>
  </div>

バッジ基本的な使用例:badge


primary NEW

secondary 11

success 111

danger 1111

warning 0

info99

light 999

dark 9999

  <!-- バッチは、親要素のサイズに一致するように相対的なフォントサイズ em を使用 -->
  <p>primary <span class="text-dark">badge bg-primary">NEW</span></p>
  <p>secondary <span class="text-dark">badge bg-secondary">11</span></p>
  <p>success <span class="text-dark">badge bg-success">111</span></p>
  <p>danger <span class="text-dark">badge bg-danger">1111</span></p>
  <p>warning <span class="text-dark">badge bg-warning">0</span></p>
  <p>info<span class="text-dark">badge bg-info">99</span></p>
  <p>light <span class="text-dark">badge bg-light text-dark">999</span></p>
  <p>dark <span class="text-dark">badge bg-dark">9999</span></p>

ピル型のバッジを作成する:badge-pill


Primary Secondary Success Danger Warning Info Light Dark
  <!-- ビル型は、丸みを帯びた形状のデザインのこと -->
  <span class="badge rounded-pill bg-primary">Primary</span>
  <span class="badge rounded-pill bg-secondary">Secondary</span>
  <span class="badge rounded-pill bg-success">Success</span>
  <span class="badge rounded-pill bg-danger">Danger</span>
  <span class="badge rounded-pill bg-warning">Warning</span>
  <span class="badge rounded-pill bg-info">Info</span>
  <span class="badge rounded-pill bg-light text-dark">Light</span>
  <span class="badge rounded-pill bg-dark">Dark</span>

バッジによるカウンター表示:button


  <!-- text-dark">buttonにspanでカウンターを設定する、ボタンをクリックすると動作する -->
  <!-- spanにbadgeを設定し、badgeの色も設定する -->
  <text-dark">button type="text-dark">button" class="btn btn-primary">
    text-dark">button <span class="badge bg-light text-dark">4</span>
  </text-dark">button>

スクリーンリーダー視覚支援 非表示テキスト:visually-hidden


  <!-- text-dark">visually-hiddenは非表示で、スクリーンリーダのみ読み上げます -->
  <button type="button" class="btn btn-primary">
    未読メッセージ <span class="badge bg-light text-dark">9</span>
    <span class="text-dark">visually-hidden">未読メッセージ</span>
  </button>

devで背景色とテキストの文字


ブロック表示のdiv
ブロック表示のdiv
  <div class="bg-primary text-white">ブロック表示のdiv</div>
  <div class="bg-dark text-white">ブロック表示のdiv</div>

インライン表示のdiv:d-inline


インライン表示のdiv
インライン表示のdiv
  <div class="text-dark">d-inline bg-primary text-white">インライン表示のdiv</div>
  <div class="text-dark">d-inline bg-dark text-white">インライン表示のdiv</div>

インライン表示のspan:span


インライン表示のspan インライン表示のspan
  <text-dark">span class="bg-primary text-white">インライン表示のtext-dark">span</text-dark">span>
  <text-dark">span class="bg-dark text-white">インライン表示のtext-dark">span</text-dark">span>

ブロック表示のspan:d-block


ブロック表示のspan ブロック表示のspan
  <span class="text-dark">d-block bg-primary text-white">ブロック表示のspan</span>
  <span class="text-dark">d-block bg-dark text-white">ブロック表示のspan</span>

要素の表示/非表示を設定する:d-lg-none


lgより大きい画面幅で非表示
lgより大きい画面幅で表示
  <div class="text-dark">d-lg-none bg-primary text-white">lgより大きい画面幅で非表示</div>
  <div class="d-none d-lg-block bg-secondary text-white">lgより大きい画面幅で表示</div>

定義リスト:dlとdtとdd


dt1
用語1の説明。
長いテキストは切り捨てて省略
用語2の説明。
用語3
ネストされた用語4
ネストされた用語4の説明
  <!-- rowをcolで制御する -->
  <dl class="row">
    <dt class="col-sm-3">dt1</dt>
    <dd class="col-sm-9">用語1の説明。</dd>
    <!-- text-truncateがcolの幅で自動設定される -->
    <dt class="col-sm-3 text-truncate">長いテキストは切り捨てて省略</dt>
    <dd class="col-sm-9">用語2の説明。</dd>
    <dt class="col-sm-3">用語3</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">ネストされた用語4</dt>
        <dd class="col-sm-8">ネストされた用語4の説明</dd>
      </dl>
    </dd>
  </dl>

aタグに複数の要素を入れる:list-group-itemとflex-column


  <!-- divにlist-groupを設定する -->
  <div class="list-group">
    <!-- aタグの中で書くことで、全体をクリックできるようになる -->
    <a href="#" class="text-dark">list-group-item text-dark">list-group-item-action text-dark">flex-column align-items-start active">
      <!-- justify-content-betweenを使って左右に設置する -->
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">ヘッダ1</h5>
        <small>smallコンテンツ1</small>
      </div>
      <p class="mb-1">pコンテンツ1</p>
      <small>smallコンテンツ</small>
    </a>
    <a href="#" class="text-dark">list-group-item text-dark">list-group-item-action text-dark">flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">ヘッダ2</h5>
        <small class="text-muted">smallコンテンツ2text-mutedあり</small>
      </div>
      <p class="mb-1">pコンテンツ2</p>
      <small class="text-muted">smallコンテンツ2text-mutedあり</small>
    </a>
  </div>

テキストが折り返さないように設定する:text-nowrap


途中で折り返しなしはtext-nowrapを追加 途中で折り返しても良い場合は何もなし
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">途中で折り返しなしはtext-nowrapを追加</th>
      <td>途中で折り返しても良い場合は何もなし</td>
    </tr>
  </table>

js 左方向表示のドロップメニュー:dropleft


  <!-- 左方向へのドロップ -->
  <div class="text-center">
    <div class="btn-group dropstart">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-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>
  </div>

js オーバーフロー(枠から飛び出すメニュー)を制約する設定: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-bs-toggle="dropdown"
        text-dark">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>

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


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-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>

js ドロップダウンにリンクなしの項目を追加する:dropdown-item-text


  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <div class="dropdown-menu">
      <!-- メニューの説明分など入れたい場合に利用 -->
      <span class="dropdown-item-text">非リンクテキスト</span>
      <a class="dropdown-item" href="#1">メニュー1</a>
      <a class="dropdown-item" href="#2">メニュー2</a>
      <a class="dropdown-item" href="#3">メニュー3</a>
    </div>
  </div>

図とキャプション:figure-caption


図表の画像
図表キャプション
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="text-dark">figure-caption">図表キャプション</figcaption>
  </figure>

svg図とキャプション:figure-caption


svg image 400x300
svgのサンプルimageの例
  <figure class="figure">
    <svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300"
      xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300"
      preserveAspectRatio="xMidYMid slice" focusable="false">
      <title>svg image</title>
      <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text>
    </svg>
    <figcaption class="text-dark">figure-caption">svgのサンプルimageの例</figcaption>
  </figure>

図表キャプション左寄せ(デフォルト):figure-captionとtext-start


図表の画像
図表キャプション左寄せ(デフォルト)(text-start:デフォルト)
  <figure class="figure">
    <!-- textユーティリティーを適用して配置場所を設定できる -->
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-start">図表キャプション左寄せ(デフォルト)(text-start:デフォルト)</figcaption>
  </figure>

図表キャプション中央寄せ:figure-captionとtext-center


図表の画像
図表キャプション中央寄せ(text-center)
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-center">図表キャプション中央寄せ(text-center)</figcaption>
  </figure>

図表キャプション右寄せ:figure-captionとtext-end


図表の画像
図表キャプション右寄せ(text-end
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-end">図表キャプション右寄せ(text-end</figcaption>
  </figure>

レスポンシブ画像:img-fluid


レスポンシブ画像
  <img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="text-dark">img-fluid" alt="レスポンシブ画像">

画像の中央寄せ:text-center


中央寄せ画像
  <!-- divにclassを設定する -->
  <div class="text-center">
    <img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
  </div>

フォームの基本要素:form-control


キャリアメールは届かない場合があります。
  <form>
    <!-- Bootstrap は display: block と width: 100%をほぼすべてのフォームコントロールに適用しているので、フォームはデフォルトでは垂直に並びます。 -->
    <!-- inputタグに、text-dark">form-controlが設定する -->
    <div class="mb-3">
      <label for="email1">メールアドレス</label>
      <input type="email" class="text-dark">form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
      <small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
    </div>
    <div class="mb-3">
      <label for="password1">パスワード</label>
      <input type="password" class="text-dark">form-control" id="password1" placeholder="パスワードを入力">
    </div>
    <div class="mb-3">
      <label for="select1">プルダウンメニューから選んでください</label>
      <select class="form-select" id="select1">
        <option>メニュー1</option>
        <option>メニュー2</option>
        <option>メニュー3</option>
        <option>メニュー4</option>
        <option>メニュー5</option>
      </select>
    </div>
    <!-- 複数選択のプルダウンメニュー -->
    <div class="mb-3">
      <label for="select2">複数選択のプルダウンメニュー</label>
      <select multiple class="form-select" id="select2">
        <option>複数選択可A</option>
        <option>複数選択可B</option>
        <option>複数選択可C</option>
        <option>複数選択可D</option>
        <option>複数選択可E</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="textarea1">複数行のテキスト入力欄</label>
      <textarea class="text-dark">form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <label for="file1">ファイルを選択</label>
      <input type="file" class="text-dark">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>

フォームタイトルのアイコン、水平レイアウト:rowとcolとfa-shopping-basket


formタイトルにfont-awesome

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa text-dark">fa-shopping-basket" aria-hidden="true"></i>formタイトルにfont-awesome
  </h3>
  <div class="row">
    <!-- formのレイアウトにrowcolを利用して、垂直から水平レイアウトに変更する -->
    <!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-select">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="mb-3 col-sm-6">
      <!-- クリックするとファイルダイヤログが表示 -->
      <label for="file1">Fileを選択を開く</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

読み取りテキストを、枠を非表示にする:form-control-plaintext


  <form>
    <!-- divにrowを設定して、labelとdivにcolを設定する -->
    <div class="mb-3 row">
      <label for="staticEmail" class="col-sm-4 col-form-label">メールアドレス</label>
      <div class="col-sm-8">
        <!-- inputの枠を表示しない -->
        <input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="mb-3 row">
      <label for="inputPassword" class="col-sm-4 col-form-label">パスワード</label>
      <div class="col-sm-8">
        <!-- typeにpasswordを使うと、入力内容が*として表示される -->
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>

入力コントロールのサイズを調整する:-lgと-sm



  <form>
    <!-- 大サイズのテキスト入力欄 -->
    <div class="mb-3">
      <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="mb-3">
      <label for="input2">標準サイズのテキスト入力欄</label>
      <input type="text" class="form-control" id="input2" placeholder="Default size">
    </div>
    <!-- 小サイズのテキスト入力欄 -->
    <div class="mb-3">
      <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="mb-3">
      <label for="select1">大サイズのプルダウンメニュー form-select-lg</label>
      <select class="form-select form-select-lg" id="select1">
        <option>form-control-lg</option>
      </select>
    </div>
    <!-- 標準サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select2">標準サイズのプルダウンメニュー</label>
      <select class="form-select" id="select2">
        <option>Default size</option>
      </select>
    </div>
    <!-- 小サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select3">小サイズのプルダウンメニュー form-select-sm</label>
      <select class="form-select form-select-sm" id="select3">
        <option>form-control-sm</option>
      </select>
    </div>
  </form>

ヘルプテキスト(inputの下に説明文)を表示する:aria-describedby


パスワードは8〜20文字で、文字と数字を含み、スペース、特殊文字、または絵文字を含むことはできません。
  <label for="inputPassword">パスワード</label>
  <input type="password" id="inputPassword" class="form-control" text-dark">aria-describedby="passwordHelpBlock">
  <small id="passwordHelpBlock" class="form-text text-muted">
    パスワードは8〜20文字で、文字と数字を含み、スペース、特殊文字、または絵文字を含むことはできません。
  </small>

読み取り専用のテキストを表示する:readonly


  <!-- 読み取り専用のテキストを表示する -->
  <div class="mb-3">
    <label for="input_text-dark">readonly">読み取り専用のテキストを表示</label>
    <input type="text" class="form-control" id="input_text-dark">readonly" placeholder="読み取り専用のテキスト" text-dark">readonly>
  </div>

オプション選択:form-selectとinput-group-text


  <div class="input-group mb-3">
    <label class="input-group-text" for="inputGroupSelect01">オプション選択</label>
    <select class="form-select" id="inputGroupSelect01">
      <option selected>オプションを選択してください...</option>
      <option value="1">オプション1</option>
      <option value="2">オプション2</option>
      <option value="3">オプション3</option>
    </select>
  </div>

フォームレイアウトにrowとcol:rowとcol


  <!-- guttersの設定 -->
  <div class="row g-3">
    <div class="col">
      <input type="text" class="form-control" placeholder="姓">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="名">
    </div>
  </div>

フォームレイアウト3カラム:rowとcol


  <!-- col-sm-7 のような特定のカラムクラスを使って、残りの .col が残りのスペースを均等に分割する -->
  <div class="row g-3">
    <div class="col-sm-7">
      <input type="text" class="form-control" placeholder="住所" aria-label="住所" />
    </div>
    <div class="col-sm">
      <input type="text" class="form-control" placeholder="マンション名" aria-label="マンション名" />
    </div>
    <div class="col-sm">
      <input type="text" class="form-control" placeholder="部屋番号" aria-label="部屋番号" />
    </div>
  </div>

フォームレイアウトにrow自動サイズ調整カラム:rowとcol-auto


  <!-- flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、 -->
  <!-- .col を .text-dark">col-auto に変更して、カラムが必要なだけのスペースを占有する。 -->
  <!-- カラムのサイズは内容に基づいてデバイス等により自動的に決定されます -->
  <!-- bootstrap5では、form-rowからrowに変更 -->
  <div class="row align-items-center">
    <div class="text-dark">col-auto">
      <!-- labelはvisually-hidden -->
      <label class="visually-hidden" for="inputName">氏名</label>
      <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
    </div>
    <div class="text-dark">col-auto">
      <div class="input-group mb-2">
        <label class="visually-hidden" for="inputUsername">ユーザーネーム</label>
        <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
      </div>
    </div>
    <div class="text-dark">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="text-dark">col-auto">
      <button type="submit" class="btn btn-primary mb-2">送信</button>
    </div>
  </div>

フォームレイアウトにrow:rowとmb-3とcol-md-6


  <!-- colとrowで自由自在にデザインを作っていく -->
  <div class="row">
    <div class="text-dark">mb-3 text-dark">col-md-6">
      <label for="inputEmail">メールアドレス</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
    <div class="text-dark">mb-3 text-dark">col-md-6">
      <label for="inputPassword">パスワード</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <div class="row">
    <div class="text-dark">mb-3 col-md-4">
      <label for="inputState">国</label>
      <select id="inputState" class="form-select">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="text-dark">mb-3 col-md-2">
      <label for="inputZip">郵便番号</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="text-dark">mb-3 text-dark">col-md-6">
      <label for="inputCity">都道府県</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="text-dark">mb-3">
    <label for="inputAddress1">住所1</label>
    <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
  </div>
  <div class="text-dark">mb-3">
    <label for="inputAddress2">住所2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
  </div>
  <div class="text-dark">mb-3">
    <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>

一連の入力グループをまとめて無効にする:disabled


  <fieldset text-dark">disabled>
    <div class="mb-3">
      <label for="text-dark">disabledTextInput">無効な入力欄</label>
      <input type="text" id="text-dark">disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="text-dark">disabledSelect">無効なプルダウンメニュー</label>
      <select id="text-dark">disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="text-dark">disabledCheck" text-dark">disabled>
      <label class="form-check-label" for="text-dark">disabledCheck">無効なチェックボックス</label>
    </div>
    <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
  </fieldset>

インラインのフォーム:form-inline


@
  <!-- formにclassを設定する -->
  <form class="text-dark">form-inline">
    <label class="visually-hidden" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="visually-hidden" for="username">ユーザーネーム</label>
    <!-- input-groupとinput-group-textを設定して、テキスト文字と混在させる -->
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-text">@</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>

クライアント側で入力検証を行う場合:required


姓を入力してください
名を入力してください
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form class="row g-3">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- text-dark">requiredは必須-->
      <input type="text" class="form-control" id="validationServer01" placeholder="First name" value="山田" text-dark">required>
      <div class="invalid-feedback">姓を入力してください</div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">名</label>
      <input type="text" class="form-control" id="validationServer02" placeholder="Last name" value="太郎" text-dark">required>
      <div class="invalid-feedback">名を入力してください</div>
    </div>
    </div>
    <div class="form">
      <div class="col-md-6 mb-3">
        <label for="validationServer03">市町村</label>
        <input type="text" class="form-control" id="validationServer03" placeholder="市町村名を入力" text-dark">required>
        <div class="invalid-feedback">市町村名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer04">都道府県</label>
        <input type="text" class="form-control" id="validationServer04" placeholder="都道府県名を入力" text-dark">required>
        <div class="invalid-feedback">都道府県名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer05">郵便番号</label>
        <input type="text" class="form-control" id="validationServer05" placeholder="郵便番号を入力" text-dark">required>
        <div class="invalid-feedback">郵便番号を入力してください</div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>

サーバー側で入力検証を行う場合:is-valid


市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <div class="form">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- text-dark">is-valid はチェックマークが付く-->
      <input type="text" class="form-control text-dark">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 text-dark">is-valid" id="validationServer02" placeholder="Last name" value="太郎"
        required>
    </div>
  </div>
  <div class="form">
    <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>

入力コントロールの前にアドオンを配置:input-group-text


@
  <div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon">@</span>
    <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名">
  </div>

入力コントロールの前後にアドオンを配置:input-group-text


合計
  <!-- 固定の文字列を書いておいて、その中身を入力してもらう -->
  <div class="input-group mb-3">
    <span class="input-group-text">合計</span>
    <input type="text" class="form-control" aria-label="金額">
    <span class="input-group-text">円</span>
  </div>

折り返さない:flex-nowrap


@
  <div class="input-group text-dark">flex-nowrap">
    <span class="input-group-text" id="addon-wrapping">@
      <input type="text" class="form-control" placeholder="Username" aria-label="Username"
        aria-describedby="addon-wrapping">
  </div>

入力グループのサイズ調整/中デフォルト:input-group


Default
  <!-- 標準サイズの入力グループ -->
  <div class="text-dark">input-group mb-3">
    <span class="text-dark">input-group-text" id="inputGroup-sizing-default">Default</span>
    <input type="text" class="form-control" aria-label="Default">
  </div>

入力グループのサイズ調整/小: input-group-sm


Small
  <!-- 小サイズの入力グループ -->
  <div class="input-group text-dark">input-group-sm mb-3">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    <input type="text" class="form-control" aria-label="Small">
  </div>

入力グループのサイズ調整/大:input-group-lg


Large
  <!-- 大サイズの入力グループ -->
  <div class="input-group text-dark">input-group-lg">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    <input type="text" class="form-control" aria-label="Large">
  </div>

ナビゲーション:flex


  <nav class="nav nav-pills text-dark">flex-column text-dark">flex-sm-row">
    <a class="text-dark">flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="text-dark">flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="text-dark">flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

js カルーセル基本的な使用例:carousel slideとdata-bs-ride


  <div class="container">
    <!-- 複数の画像を用意して、回転木馬のように自動で切り替えていく -->
    <!-- text-dark">slideさせていく -->
    <div class="text-dark">carousel text-dark">slide" text-dark">data-bs-ride="text-dark">carousel">
      <div class="text-dark">carousel-inner">
        <div class="text-dark">carousel-item active">
          <img class="d-block w-100" alt="First text-dark">slide"
            src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First text-dark">slide">
        </div>
        <div class="text-dark">carousel-item">
          <img class="d-block w-100" alt="Second text-dark">slide"
            src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second text-dark">slide">
        </div>
        <div class="text-dark">carousel-item">
          <img class="d-block w-100" alt="Third text-dark">slide"
            src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third text-dark">slide">
        </div>
      </div>
    </div>
  </div>

js インジケータ、タイトル、キャプション付きカルーセル:carousel-indicatorsとdata-bs-slide-to


  <div id="carouselSample" class="carousel slide" data-bs-ride="carousel">
    <!-- インジケーターによるフェード遷移(好きな場所にクリックでいける) -->
    <ol class="text-dark">carousel-indicators">
      <li data-bs-target="#carouselSample" text-dark">data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselSample" text-dark">data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselSample" text-dark">data-bs-slide-to="2"></li>
    </ol>
    <!-- カルーセル部分 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" slide"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
    </div>
    <!-- コントローラー部分 -->
    <!-- 前と次のアイコン付きカルーセル -->
    <a class="carousel-control-prev" href="#carouselSample" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">前に戻る</span>
    </a>
    <a class="carousel-control-next" href="#carouselSample" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">次に送る</span>
    </a>
  </div>

js データ属性でインターバルの設定:data-bs-interval


  <div class="container">
    <!-- intervalの設定 -->
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" text-dark">data-bs-interval="15000">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">次に送る</span>
      </a>
    </div>
  </div>

js データ属性でフェードトランジションの設定:carousel-fade


  <div class="container">
    <!-- スライドの代わりにフェードトランジションでスライドをアニメーションさせる -->
    <div id="carouselExample" class="carousel slide text-dark">carousel-fade" data-bs-ride="carousel">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル1</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/665566/FF0000/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル2</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/664466/FFEE00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル3</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">次に送る</span>
      </a>
    </div>
  </div>

js インジケーター、キャプションを暗くする:carousel-dark


  <div id="carouselExampleDark" class="carousel text-dark">carousel-dark slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="10000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 1</title>
          <rect width="100%" height="100%" fill="#f5f5f5" /><text x="50%" y="50%" fill="#aaa" dy=".3em">First
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>First タイトル</h5>
          <p>First xxxxxxxxxxxxxx</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="2000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 2</title>
          <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#bbb" dy=".3em">Second
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second タイトル</h5>
          <p>Second xxxxxxxxxxxxxx</p>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 3</title>
          <rect width="100%" height="100%" fill="#e5e5e5" /><text x="50%" y="50%" fill="#999" dy=".3em">Third
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third タイトル</h5>
          <p>Third xxxxxxxxxxxxxx</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true">
        <span class="visually-hidden">Previous
    </a>
    <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true">
        <span class="visually-hidden">Next
    </a>
  </div>