tr

bootstrap5.css

bootstrap5.css
b,
strong {
  font-weight: bolder;
}
bootstrap5.css
pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
}
bootstrap5.css
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
bootstrap5.css
button,
select {
  /* 文字の大文字等への変換 */
  text-transform: none;
}
bootstrap5.css
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
bootstrap5.css
.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}
bootstrap5.css
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
}
bootstrap5.css
.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
bootstrap5.css
.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}
bootstrap5.css
.table-primary {
  --bs-table-bg: #cfe2ff;
  --bs-table-striped-bg: #c5d7f2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #bacbe6;
}
bootstrap5.css
.table-secondary {
  --bs-table-bg: #e2e3e5;
  --bs-table-striped-bg: #d7d8da;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1d2d4;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #cbccce;
}
bootstrap5.css
.table-success {
  --bs-table-bg: #d1e7dd;
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #bcd0c7;
}
bootstrap5.css
.table-info {
  --bs-table-bg: #cff4fc;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #badce3;
}
bootstrap5.css
.table-warning {
  --bs-table-bg: #fff3cd;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #e6dbb9;
}
bootstrap5.css
.table-danger {
  --bs-table-bg: #f8d7da;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #dfc2c4;
}
bootstrap5.css
.table-light {
  --bs-table-bg: #f8f9fa;
  --bs-table-striped-bg: #ecedee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #dfe0e1;
}
bootstrap5.css
.table-dark {
  --bs-table-bg: #212529;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: #fff;
  border-color: #373b3e;
}
bootstrap5.css
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
bootstrap5.css
.form-control[type="file"] {
  overflow: hidden;
}
bootstrap5.css
.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
bootstrap5.css
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
bootstrap5.css
.form-control::-webkit-date-and-time-value {
  height: 1.5em;
}
bootstrap5.css
.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
bootstrap5.css
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  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
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dde0e3;
}
bootstrap5.css
.form-control::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  -webkit-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;
  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
@media (prefers-reduced-motion: reduce) {
  .form-control::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #dde0e3;
}
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
.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
bootstrap5.css
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
bootstrap5.css
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
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-control-color {
  max-width: 3rem;
  height: auto;
  padding: 0.375rem;
}
bootstrap5.css
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
bootstrap5.css
.form-control-color::-moz-color-swatch {
  height: 1.5em;
  border-radius: 0.25rem;
}
bootstrap5.css
.form-control-color::-webkit-color-swatch {
  height: 1.5em;
  border-radius: 0.25rem;
}
bootstrap5.css
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #212529;
}
bootstrap5.css
.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-check-input {
    transition: none;
  }
}
bootstrap5.css
.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}
bootstrap5.css
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
bootstrap5.css
.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent;
}
bootstrap5.css
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
bootstrap5.css
.form-floating > .form-control::placeholder {
  color: transparent;
}
bootstrap5.css
.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
bootstrap5.css
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
bootstrap5.css
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
bootstrap5.css
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
bootstrap5.css
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
bootstrap5.css
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
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 .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
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 .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
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
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
bootstrap5.css
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: #0d6efd;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: #6c757d;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-success:disabled,
.btn-outline-success.disabled {
  color: #198754;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-info:disabled,
.btn-outline-info.disabled {
  color: #0dcaf0;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  color: #ffc107;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  color: #dc3545;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-light:disabled,
.btn-outline-light.disabled {
  color: #f8f9fa;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
  color: #212529;
  background-color: transparent;
}
bootstrap5.css
.fade {
  transition: opacity 0.15s linear;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
bootstrap5.css
.collapsing {
  /* はみ出た部分は、非表示にする */
  /* あえて一部表示で、それ以外は非表示という使い方もする */
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
bootstrap5.css
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
bootstrap5.css
.dropdown-menu-start {
  /* bootstrap4:dropdown-menu-left */
  --bs-position: start;
  right: auto /* rtl:ignore */;
  left: 0 /* rtl:ignore */;
}
bootstrap5.css
.dropdown-menu-end {
  /* bootstrap4:dropdown-menu-right */
  --bs-position: end;
  right: 0 /* rtl:ignore */;
  left: auto /* rtl:ignore */;
}
bootstrap5.css
@media (min-width: 576px) {
  /* bootstrap4:dropdown-menu-sm-left */
  .dropdown-menu-sm-start {
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-sm-end {
    /* bootstrap4:dropdown-menu-sm-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    /* bootstrap4:dropdown-menu-md-left */
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-md-end {
    /* bootstrap4:dropdown-menu-md-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    /* bootstrap4:dropdown-menu-lg-left */
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-lg-end {
    /* bootstrap4:dropdown-menu-lg-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    /* bootstrap4:dropdown-menu-xl-left */
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-xl-end {
    /* bootstrap4:dropdown-menu-xl-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  /* bootstrap5で追加 */
  .dropdown-menu-xxl-start {
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
bootstrap5.css
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
bootstrap5.css
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
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.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
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
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
bootstrap5.css
.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
bootstrap5.css
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
bootstrap5.css
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0;
  overflow-anchor: none;
  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, border-radius 0.15s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: 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
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
bootstrap5.css
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap5.css
@-webkit-keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
bootstrap5.css
@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
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
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
bootstrap5.css
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
bootstrap5.css
.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
  animation: 1s linear infinite progress-bar-stripes;
}
bootstrap5.css
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
bootstrap5.css
.modal.show .modal-dialog {
  transform: none;
}
bootstrap5.css
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}
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 .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.bs-tooltip-start,
.bs-tooltip-auto[data-popper-placement^="left"] {
  /* bootstrap4:bs-tooltip-right */
  padding: 0 0.4rem;
}
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
.popover .popover-arrow::before,
.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.bs-popover-start,
.bs-popover-auto[data-popper-placement^="left"] {
  /* bootstrap4:bs-popover-left */
  margin-right: 0.5rem !important;
}
bootstrap5.css
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
bootstrap5.css
/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}
bootstrap5.css
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}
bootstrap5.css
/* rtl:end:ignore */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
bootstrap5.css
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}
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
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
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-control-prev {
  left: 0;
}
bootstrap5.css
.carousel-control-next {
  right: 0;
}
bootstrap5.css
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}
bootstrap5.css
/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
}
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
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}
bootstrap5.css
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
bootstrap5.css
@-webkit-keyframes spinner-border {
  /* アニメーションの動きを指定する */
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
bootstrap5.css
@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
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
@-webkit-keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
bootstrap5.css
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
bootstrap5.css
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
bootstrap5.css
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
bootstrap5.css
.translate-middle {
  transform: translate(-50%, -50%) !important;
}
bootstrap5.css
.translate-middle-x {
  transform: translateX(-50%) !important;
}
bootstrap5.css
.translate-middle-y {
  transform: translateY(-50%) !important;
}
bootstrap5.css
.align-items-stretch {
  align-items: stretch !important;
}
bootstrap5.css
.align-content-stretch {
  align-content: stretch !important;
}
bootstrap5.css
.align-self-stretch {
  align-self: stretch !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
.bg-transparent {
  /* 完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。 */
  background-color: transparent !important;
}
bootstrap5.css
@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-cent
bootstrap5.css
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-cent
bootstrap5.css
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-cent
bootstrap5.css
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-cen
bootstrap5.css
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-

html bootstrap5 Sample

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-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-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>

js ナビゲーションバー基本:navbarとnavbar-togglerとcollapseとnavbar-toggler-icon


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <!-- TOPは、ブラントとして常に表示 -->
      <a class="navbar-brand" href="#">TOP</a>
      <!-- navbar-togglerでレスポンシブ -->
      <!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
      <!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
      <!-- data-bs-targetとidでコンテンツを連携させる -->
      <button type="button" class="navbar-toggler" data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-bs-target="#Nav1" aria-controls="Nav1"
        aria-expanded="false" aria-label="ナビゲーションの切替">
        <!-- ハンバーガーメニューでボタンを表示 trap5/index.php?strkey=navbar-toggler-icon" class="bg-warning text-dark">navbar-toggler-icon -->
        <span class="trap5/index.php?strkey=navbar-toggler-icon" class="bg-warning text-dark">navbar-toggler-icon"></span>
      </button>
      <!-- ボタンが押されたら、以下のメニューを開く、メニューはulとliを使う -->
      <div class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse navbar-trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" id="Nav1">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">メニュー1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
        </ul>
      </div>
    </nav>

js ナビバーの検索窓:d-flex


    <nav class="navbar navbar-expand navbar-light bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav3"
          aria-controls="Nav3" aria-expanded="false" aria-label="ナビゲーション切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="Nav3">
          <!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
          <a class="navbar-brand" href="#">TOP</a>
          <ul class="navbar-nav me-auto">
            <li class="nav-item active"><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="trap5/index.php?strkey=d-flex" class="bg-warning text-dark">d-flex">
            <!-- inputにform-controlを適用しない -->
            <input class="me-2" type="search" placeholder="検索" aria-label="検索">
            <button class="btn btn-light" type="submit">検索</button>
          </form>
        </div>
      </div>
    </nav>

js ナビゲーションドロップダウンメニュー:dropdown-toggle


    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">ブランド</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <!-- trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggleを使う -->
              <a class="nav-link trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" href="#" id="navbarDropdownMenu" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                ドロップダウンメニュー
              </a>
              <div class="dropdown-menu" aria-labelledby="ドロップダウンメニュー">
                <!-- dropdown-menuは  display: none -->
                <a class="dropdown-item" href="#">サブメニュー1</a>
                <a class="dropdown-item" href="#">サブメニュー2</a>
                <a class="dropdown-item" href="#">サブメニュー3</a>
              </div>
            </li>
            <li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
            <li class="nav-item active"><a class="nav-link" href="#">メニュー2</a></li>
            <li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
          </ul>
        </div>
      </div>
    </nav>

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="trap5/index.php?strkey=navbar-text" class="bg-warning text-dark">navbar-text ms-auto">ナビゲーションバーテキスト</span>
      </div>
    </nav>

js ナビゲーションバー 切替ボタンを左寄せに表示:me-auto


    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav02"
        aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">ブランド</a>
      <div class="collapse navbar-collapse" id="navbarNav02">
        <ul class="navbar-nav trap5/index.php?strkey=me-auto" class="bg-warning text-dark">me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><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="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-light my-2 my-sm-0"  style="background-color: #e3f2fd;" type="submit">Search</button>
        </form>
      </div>
    </nav>

js ナビゲーションバーアイコンしか出さない


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <!-- navbar-brand -->
      <a class="navbar-brand" href="#">TOP</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav5" aria-controls="Nav5"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav5">
        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><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="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ


    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <a class="navbar-brand" href="#">ブランドを隠す</a>
        <ul class="navbar-nav me-auto mt-2 mt-lg-0">
          <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="visually-hidden">(現位置)</span></a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ナビバーのデザイン:navbar-lightとbg-light


    <!-- bg-*はbootstrapの背景色の指定方法、できるだけこれを使うとことで構造化が進む、Core Web Vitals(コアウェブバイタル)にも有効 -->
    <nav class="navbar navbar-expand-lg trap5/index.php?strkey=navbar-light" class="bg-warning text-dark">navbar-light trap5/index.php?strkey=bg-light" class="bg-warning text-dark">bg-light">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav_d"
        aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav_d">
        <ul class="navbar-nav me-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>
        <!-- アウトラインの検索ボタン、darkだど映える -->
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

js ナビバーbg-以外で背景色を直接指定:background-color


  <!-- navbar-*はテキストの色 -->
  <!-- navbar-expand-* は@mediaだったら適用するという指定 -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light" style="trap5/index.php?strkey=background-color" class="bg-warning text-dark">background-color: #e3f2fd;">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav9" aria-controls="Nav9"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav9">
        <ul class="navbar-nav me-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="d-flex">
          <input class="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>

navbar-brandに画像:navbar-brand


    <nav class="navbar navbar-dark bg-success">
      <a class="trap5/index.php?strkey=navbar-brand" class="bg-warning text-dark">navbar-brand" href="#">
        <img src="https://bttb.jp/assets/img/logo-small-2.png" width="30" height="30" class="d-inline-block align-top"
          alt="">
        Bootstrap
      </a>
    </nav>

画像の左寄せ:rowとcol


Placeholder Image
カードタイトル

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

Last updated 3 mins ago

  <div class="card mb-3">
    <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row g-0">
      <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">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="trap5/index.php?strkey=col" class="bg-warning text-dark">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>

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


  <div class="text-center">
    <p><a href="#" class="trap5/index.php?strkey=bg-primary" class="bg-warning text-dark">bg-primary text-white d-block py-2">trap5/index.php?strkey=bg-primary" class="bg-warning 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>

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


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

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

HTML5 強調:strongとb


strong要素を使って、テキストを重要なテキストとして太字で表示させることができます。

b要素を使ってテキストを強調表示するテキストとして太字で表示させることができます。

  <p>bttb.jp/bootstrap5/index.php?strkey=strong" class="bg-warning text-dark">strong要素を使って、テキストを<bttb.jp/bootstrap5/index.php?strkey=strong" class="bg-warning text-dark">strong>重要なテキスト</bttb.jp/bootstrap5/index.php?strkey=strong" class="bg-warning text-dark">strong>として太字で表示させることができます。</p>
  <p>b要素を使ってテキストを<b>強調表示するテキスト</b>として太字で表示させることができます。</p>

黒背景に白抜き文字/ユーザインプット表記:kbd


ディレクトリを切り替えるには、 cdと続けてディレクトリ名を入力します。設定を編集するには、 ctrl + ,を押します。
  <div>
    ディレクトリを切り替えるには、
    <trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd>cd</trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd>と続けてディレクトリ名を入力します。設定を編集するには、
    <trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd><trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd>ctrl</trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd> + <trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd>,</trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd></trap5/index.php?strkey=kbd" class="bg-warning text-dark">kbd>を押します。
  </div>

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


This text is meant to be treated as sample output from a computer program.
  <div>
    <trap5/index.php?strkey=samp" class="bg-warning text-dark">samp>This text is meant to be treated as trap5/index.php?strkey=samp" class="bg-warning text-dark">sample output from a computer program.</trap5/index.php?strkey=samp" class="bg-warning text-dark">samp>
  </div>

js アラートを閉じるボタンでしか消えないモーダル:data-bs-backdrop


  <button type="button" class="btn btn-primary" data-bs-toggle="modal"
      data-bs-target="#staticBackdropLive">×でしか閉じないモーダル</button>
  
      <div class="modal fade" id="staticBackdropLive" trap5/index.php?strkey=data-bs-backdrop" class="bg-warning text-dark">data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>I will not close if you click outside me. Don't even try to press escape key.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>

ブレイクポイントでフロートを切り替える:float-sm-end


SM(small)以上で左寄せ
MD (medium)以上で左寄せ
LG (large)以上で左寄せ
XL (extra-large)以上で左寄せ
  <span class="trap5/index.php?strkey=float-sm-end" class="bg-warning text-dark">float-sm-end">SM(small)以上で左寄せ</span><br>
  <span class="float-md-end">MD (medium)以上で左寄せ</span><br>
  <span class="float-lg-end">LG (large)以上で左寄せ</span><br>
  <span class="float-xl-end">XL (extra-large)以上で左寄せ</span>

Float左と右:float-startとfloat-end


  <!-- bootstrap5は、leftとrightではなく、startとendになる -->
  <div class="bg-info clearfix">
    <button type="button" class="btn btn-secondary trap5/index.php?strkey=float-start" class="bg-warning text-dark">float-start">左フロート</button>
    <button type="button" class="btn btn-secondary trap5/index.php?strkey=float-end" class="bg-warning text-dark">float-end">右フロート</button>
  </div>

定義リスト:dlとdtとdd


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

リストグループとタブ:list-home-listとtab


  <div class="row">
    <div class="col-4">
      <div class="list-group" id="list-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tablist">
        <a class="list-group-item list-group-item-action active" id="trap5/index.php?strkey=list-home-list" class="bg-warning text-dark">list-home-list" data-bs-toggle="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab"
          href="#list-home" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="list-home">Home</a>
        <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab"
          href="#list-profile" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="list-profile">Profile</a>
        <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab"
          href="#list-messages" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="list-messages">Messages</a>
        <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab"
          href="#list-settings" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="list-settings">Settings</a>
      </div>
    </div>
    <div class="col-8">
      <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-content" id="nav-trap5/index.php?strkey=tab" class="bg-warning text-dark">tabContent">
        <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade show active" id="list-home" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="trap5/index.php?strkey=list-home-list" class="bg-warning text-dark">list-home-list">
          <p>本文home</p>
        </div>
        <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade" id="list-profile" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="list-profile-list">
          <p>本文profile</p>
        </div>
        <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade" id="list-messages" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="list-messages-list">
          <p>本文messages</p>
        </div>
        <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade" id="list-settings" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="list-settings-list">
          <p>本文settings</p>
        </div>
      </div>
    </div>
  </div>

テーブルの基本スタイル:table


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <trap5/index.php?strkey=table" class="bg-warning text-dark">table class="trap5/index.php?strkey=table" class="bg-warning text-dark">table">
    <thead>
      <tr>
        <!-- trap5/index.php?strkey=table" class="bg-warning text-dark">tableタグにtrap5/index.php?strkey=table" class="bg-warning text-dark">tableクラスを設定するだけでレスポンシブなtrap5/index.php?strkey=table" class="bg-warning text-dark">tableが作成される -->
        <!-- scopeは非視覚系のブラウザ(音声ブラウザ等)用 -->
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </trap5/index.php?strkey=table" class="bg-warning text-dark">table>

罫線付きテーブル:table-bordered


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
  <table class="table trap5/index.php?strkey=table-bordered" class="bg-warning text-dark">table-bordered">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

罫線色つきテーブル:table-borderedとborder-primary


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
  <table class="table trap5/index.php?strkey=table-bordered" class="bg-warning text-dark">table-bordered trap5/index.php?strkey=border-primary" class="bg-warning text-dark">border-primary">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

罫線無しテーブル:table-borderless


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
  <table class="table trap5/index.php?strkey=table-borderless" class="bg-warning text-dark">table-borderless">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

背景色用のクラス:bg-*


タイトル タイトル タイトル タイトル
なし(標準) データ データ データ
bg-primary データ データ データ
bg-success データ データ データ
bg-warning データ データ データ
bg-danger データ データ データ
bg-info データ データ データ
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>なし(標準)</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-primary">
        <td>trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-success">
        <td>trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-warning">
        <td>trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-danger">
        <td>trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-info">
        <td>trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブル trの背景色:table-*


背景色用のクラス タイトル タイトル タイトル
なし(標準) データ データ データ
table-active データ データ データ
table-primary データ データ データ
table-secondary データ データ データ
table-success データ データ データ
table-danger データ データ データ
table-warning データ データ データ
table-info データ データ データ
table-light データ データ データ
table-dark データ データ データ
  <table class="table">
    <!-- bgによる背景色とtrap5/index.php?strkey=table-" class="bg-warning text-dark">table-*の背景色の違い -->
    <!-- セル単位で背景色を変えることで、表の行やセルを強調表示する -->
    <thead>
      <tr>
        <th scope="col">背景色用のクラス</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>なし(標準)</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-active">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-active</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-success">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-info">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-light">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-light</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark">
        <td>trap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブルの色の反転:table-dark


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
  <table class="table trap5/index.php?strkey=table-dark" class="bg-warning text-dark">table-dark">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブル行のマウスオーバー:table-hover


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table trap5/index.php?strkey=table-hover" class="bg-warning text-dark">table-hover">
    <!-- hoverは、マウスを載せると、背景色が変わる -->
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
  <table class="table trap5/index.php?strkey=table-hover" class="bg-warning text-dark">table-hover table-dark">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

縞模様のテーブル:table-striped


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

背景色あり縞模様のテーブル:table-successとtable-striped


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-success table-striped">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

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


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

テーブルのセル内の配置:align-bottomとalign-top


タイトル 1 タイトル 2 タイトル 3 タイトル 4
vertical-align: middle vertical-align: middle vertical-align: middle XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
vertical-align: bottom vertical-align: bottom vertical-align: bottom XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
vertical-align: middle vertical-align: middle align-top XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
  <table class="table align-middle">
    <thead>
      <tr>
        <th scope="col" class="w-25">タイトル 1</th>
        <th scope="col" class="w-25">タイトル 2</th>
        <th scope="col" class="w-25">タイトル 3</th>
        <th scope="col" class="w-25">タイトル 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
      <tr class="trap5/index.php?strkey=align-bottom" class="bg-warning text-dark">align-bottom">
        <td>vertical-align: bottom</td>
        <td>vertical-align: bottom</td>
        <td>vertical-align: bottom</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
      <tr>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td class="trap5/index.php?strkey=align-top" class="bg-warning text-dark">align-top">trap5/index.php?strkey=align-top" class="bg-warning text-dark">align-top</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
    </tbody>
  </table>

コンパクトテーブル:table-sm


タイトル タイトル タイトル タイトル タイトル タイトル
タイトル データ データ データ データ データ
タイトル データ データ データ データ データ
タイトル データ データ データ データ データ
  <table class="table trap5/index.php?strkey=table-sm" class="bg-warning text-dark">table-sm">
    <!-- trap5/index.php?strkey=table-sm" class="bg-warning text-dark">table-sm を追加するとセルの padding を半分にできます コンパクト表示になる-->
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

レスポンシブテーブル:table-responsive


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <!-- tableタグに設定するのではなく、divで囲む -->
  <!-- .table を .trap5/index.php?strkey=table-responsive" class="bg-warning text-dark">table-responsive でラップしてしまうという考え方 -->
  <!-- trap5/index.php?strkey=table-responsive" class="bg-warning text-dark">table-responsiveすることで、デバイスの条件により水平スクロールが自動で表示される -->
  <div class="trap5/index.php?strkey=table-responsive" class="bg-warning text-dark">table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルsm未満:table-responsive-sm


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
データ データ データ データ データ
  <!-- レスポンシブテーブルの最大ブレークポイントを指定します -->
  <!-- smまではスクロールなしで、それ以上は、スクロール表示 -->
  <!-- そのブレークポイント以降では、テーブルは正常に動作し、水平方向にはスクロールしない -->
  <!-- bootstrap5:trap5/index.php?strkey=table-responsive-sm" class="bg-warning text-dark">table-responsive-sm、md、-lg、-xl、-xxl -->
  <div class="trap5/index.php?strkey=table-responsive-sm" class="bg-warning text-dark">table-responsive-sm mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルmd:table-responsive-md


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="trap5/index.php?strkey=table-responsive-md" class="bg-warning text-dark">table-responsive-md mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルlg:table-responsive-lg


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="trap5/index.php?strkey=table-responsive-lg" class="bg-warning text-dark">table-responsive-lg mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

レスポンシブテーブルxl:table-responsive-xl


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="trap5/index.php?strkey=table-responsive-xl" class="bg-warning text-dark">table-responsive-xl mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

ページネーションの配置 中央寄せ:justify-content-center


  <nav>
    <!-- trap5/index.php?strkey=justify-content-center" class="bg-warning text-dark">justify-content-centerは、flexbox utilitiesでここでも利用できる -->
    <!-- aria-disabled =" true "に加えて、 tabindex="-1" 属性(キーボードからのフォーカスを防ぐ) -->
    <!-- これにより、JavaScript を用いてこれらの機能を無効にできる -->
    <ul class="pagination trap5/index.php?strkey=justify-content-center" class="bg-warning text-dark">justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションにアイコンを使用する:«


  <nav>
    <!-- 記号を使用した場合は、aria-labelやvisually-hiddenで視覚者支援をする -->
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" aria-label="前へ">
          <span aria-hidden="true">trap5/index.php?strkey=«" class="bg-warning text-dark">«</span><span class="visually-hidden">前へ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
          <span aria-hidden="true">»</span><span class="visually-hidden">次へ</span></a></li>
    </ul>
  </nav>

js 基本的なドロップダウン:dropdownとdata-bs-toggle


  <div class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown">
    <!-- 基本構造は、trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdownで囲み、buttonやaリンクをトリガーに実行する -->
    <!-- 実行には、bootstrap.bundle.jsを必要とする(Popper.jsを含んでいる必要がある) -->
    <!-- aria-haspopup、aria-expandedは、視覚支援で、POP要素があること、折りたたまれていることを伝えている -->
    <!-- bootstrap5では、 trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggleがtrap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggleに変更される-->
    <button class="btn btn-secondary trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-toggle" type="button" id="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdownMenuButton1" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウンメニュー
    </button>
    <!-- 実際のメニューは、trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-menuとtrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-itemで構成する -->
    <div class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-menu" aria-labelledby="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdownMenuButton1">
      <a class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">メニュー01</a>
      <a class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">メニュー02</a>
      <a class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js Ulに設定するドロップダウン、タイトル付き:dropdown-headerとdropdown-divider


  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      Ulのドロップダウン
    </button>
    <ul class="dropdown-menu">
      <li>
        <h6 class="trap5/index.php?strkey=dropdown-header" class="bg-warning text-dark">dropdown-header">Dropdownタイトル</h6>
      </li>
      <li><a class="dropdown-item" href="#">アクション</a></li>
      <li><a class="dropdown-item" href="#">コンテンツ</a></li>
      <li>
        <hr class="trap5/index.php?strkey=dropdown-divider" class="bg-warning text-dark">dropdown-divider">
      </li>
      <li><a class="dropdown-item" href="#">詳細</a></li>
    </ul>
  </div>

js ボタングループに設定するドロップダウン:btn-group


  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="trap5/index.php?strkey=btn-group" class="bg-warning text-dark">btn-group">
    <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>

js メニューの位置をボタンと右寄せにする:dropdown-menu-end


  <div class="btn-group">
    <!-- btn-info要素で色の変更 -->
    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu trap5/index.php?strkey=dropdown-menu-end" class="bg-warning text-dark">dropdown-menu-end">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

js 切り替えボタンにaタグ要素を使用する:dropdown-toggle


  <div class="dropdown">
    <!-- 切り替えボタン roleを付与して、リンクではなくボタンであることを視覚支援する-->
    <a class="btn btn-secondary trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウンリンクメニュー
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js メニュー項目にアクティブの状態を設定する:activeとaria-current


  <div class="btn-group">
    <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 disabled" tabindex="-1" aria-disabled="true" href="#">メニュー02(無効)</a>
      <!-- trap5/index.php?strkey=active" class="bg-warning text-dark">activeにした場合は、trap5/index.php?strkey=aria-current" class="bg-warning text-dark">aria-current="true"で視覚支援をする -->
      <a class="dropdown-item trap5/index.php?strkey=active" class="bg-warning text-dark">active" trap5/index.php?strkey=aria-current" class="bg-warning text-dark">aria-current="true" href="#">メニュー03(アクティブ)</a>
    </div>
  </div>

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 右方向表示のドロップメニュー:dropright


  <!-- 右方向へのドロップ -->
  <div class="btn-group dropend">
    <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>

js 上方向表示のドロップメニュー:dropup


  <!-- 上方向へのドロップ -->
  <div class="btn-group trap5/index.php?strkey=dropup" class="bg-warning text-dark">dropup">
    <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>

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







  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- trap5/index.php?strkey=data-flip" class="bg-warning text-dark">data-flip="true" Popper.jsが管理しているからbsは付けない-->
      <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" trap5/index.php?strkey=data-flip" class="bg-warning text-dark">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>

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 trap5/index.php?strkey=text-muted" class="bg-warning text-dark">text-muted" style="max-width: 300px;">
      <p>メニュー内のテキストその1</p>
      <p class="text-danger">メニュー内のテキストその2</p>
    </div>
  </div>

js トグルボタンでdivコンテンツに様々な要素を追加する:dropdown-toggleとdropdown-menu


  <div class="btn-group">
    <button type="button" class="btn btn-secondary trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="trap5/index.php?strkey=dropdown-menu" class="bg-warning text-dark">dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="mb-3">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="mb-3">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <!-- form-checkはチェックボックス -->
        <!-- form-check-labelはチェックの状態に応じたラベルスタイルになる-->
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </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="trap5/index.php?strkey=dropdown-item-text" class="bg-warning text-dark">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>

js スプリットボタン(分割ボタン)のドロップダウン:dropdown-toggle-split


  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割する、ボタンを押してもメニューは開かない、スプリットボタンを押す必要がある -->
    <!--trap5/index.php?strkey=dropdown-toggle-split" class="bg-warning text-dark">dropdown-toggle-splitはパディングのデザイン要素の役割  -->
    <button type="button" class="btn btn-primary dropdown-toggle trap5/index.php?strkey=dropdown-toggle-split" class="bg-warning text-dark">dropdown-toggle-split" 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>

js ドロップダウンのオフセット値を設定する:data-bs-offset


  <div class="dropdown">
    <!-- trap5/index.php?strkey=data-bs-offset" class="bg-warning text-dark">data-bs-offsetを設定することで表示場所を変えることができる -->
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffsetButton"
      data-bs-toggle="dropdown" trap5/index.php?strkey=data-bs-offset" class="bg-warning text-dark">data-bs-offset="10,60" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffsetButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

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="trap5/index.php?strkey=figure-caption" class="bg-warning text-dark">figure-caption">svgのサンプルimageの例</figcaption>
  </figure>

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


キャリアメールは届かない場合があります。
  <form>
    <!-- Bootstrap は display: block と width: 100%をほぼすべてのフォームコントロールに適用しているので、フォームはデフォルトでは垂直に並びます。 -->
    <!-- inputタグに、form-controlが設定する -->
    <div class="mb-3">
      <label for="email1">メールアドレス</label>
      <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
      <small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
    </div>
    <div class="mb-3">
      <label for="password1">パスワード</label>
      <input type="password" class="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="form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="mb-3">
      <label for="file1">ファイルを選択</label>
      <input type="file" class="form-control-file" id="file1">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="checkbox01">
      <label class="form-check-label" for="">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>

フォームタイトルのアイコン、水平レイアウト: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 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-controltrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg</label>
      <input type="text" class="form-control form-controltrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg" id="input1" placeholder="form-controltrap5/index.php?strkey=-lg" class="bg-warning text-dark">-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-controltrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm</label>
      <input type="text" class="form-control form-controltrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm" id="input3" placeholder="form-controltrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm">
    </div>
    <hr>
    <!-- 大サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select1">大サイズのプルダウンメニュー form-selecttrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg</label>
      <select class="form-select form-selecttrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg" id="select1">
        <option>form-controltrap5/index.php?strkey=-lg" class="bg-warning text-dark">-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-selecttrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm</label>
      <select class="form-select form-selecttrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm" id="select3">
        <option>form-controltrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm</option>
      </select>
    </div>
  </form>

フォームのファイル選択:file


  <div class="mb-3">
    <label for="formFile" class="form-label">Default サンプル</label>
    <input class="form-control" type="trap5/index.php?strkey=file" class="bg-warning text-dark">file" id="formFile" />
  </div>
  <div class="mb-3">
    <label for="formFileMultiple" class="form-label">複数ファイル選択可 multiple</label>
    <input class="form-control" type="trap5/index.php?strkey=file" class="bg-warning text-dark">file" id="formFileMultiple" multiple />
  </div>
  <div class="mb-3">
    <label for="formFileSm" class="form-label">Small サンプル</label>
    <input class="form-control form-control-sm" id="formFileSm" type="trap5/index.php?strkey=file" class="bg-warning text-dark">file" />
  </div>
  <div>
    <label for="formFileLg" class="form-label">Large サンプル</label>
    <input class="form-control form-control-lg" id="formFileLg" type="trap5/index.php?strkey=file" class="bg-warning text-dark">file" />
  </div>
  <div class="mb-3">
    <label for="formFileDisabled" class="form-label">ファイル選択不可</label>
    <input class="form-control" type="trap5/index.php?strkey=file" class="bg-warning text-dark">file" id="formFileDisabled" disabled />
  </div>

Color picker:Color picker


  <label for="exampletrap5/index.php?strkey=Color" class="bg-warning text-dark">ColorInput" class="form-label">trap5/index.php?strkey=Color" class="bg-warning text-dark">Color trap5/index.php?strkey=picker" class="bg-warning text-dark">picker</label>
  <input type="color" class="form-control form-control-color" id="exampletrap5/index.php?strkey=Color" class="bg-warning text-dark">ColorInput" value="#563d7c"
    title="Choose your color" />

チェックボックスに不確定を指定する:indeterminate


  <!-- trap5/index.php?strkey=indeterminate" class="bg-warning text-dark">indeterminateはCSSの疑似クラスで背景色が設定される -->
  <!-- form=checkで重ねていく -->
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="checkbox08" checked>
    <label class="form-control-label" for="checkbox08">選択済み</label>
  </div>
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="checkbox09" unchecked>
    <label class="form-control-label" for="checkbox09">未選択</label>
  </div>
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input trap5/index.php?strkey=indeterminate" class="bg-warning text-dark">indeterminate" id="checkbox10">
    <label class="form-control-label" for="checkbox10">不確定</label>
  </div>

チェックボックスとラジオボタンを無効にする


  <!-- チェックボックスを無効にする -->
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox11" disabled>
    <label class="form-control-label" for="checkbox11">
      チェック(無効)
    </label>
  </div>
  <!-- ラジオボタンを無効にする -->
  <div class="form-check">
    <input type="radio" name="radioDisabled" id="checkbox12" class="form-check-input" disabled>
    <label class="form-control-label" for="checkbox12">
      オプション(無効)
    </label>
  </div>

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


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

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


  <!-- 読み取り専用のテキストを表示する -->
  <div class="mb-3">
    <label for="input_trap5/index.php?strkey=readonly" class="bg-warning text-dark">readonly">読み取り専用のテキストを表示</label>
    <input type="text" class="form-control" id="input_trap5/index.php?strkey=readonly" class="bg-warning text-dark">readonly" placeholder="読み取り専用のテキスト" trap5/index.php?strkey=readonly" class="bg-warning text-dark">readonly>
  </div>

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


  <!-- guttersの設定 -->
  <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row g-3">
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col">
      <input type="text" class="form-control" placeholder="姓">
    </div>
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col">
      <input type="text" class="form-control" placeholder="名">
    </div>
  </div>

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


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

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


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

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


  <!-- colとtrap5/index.php?strkey=row" class="bg-warning text-dark">rowで自由自在にデザインを作っていく -->
  <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=col-md-6" class="bg-warning text-dark">col-md-6">
      <label for="inputEmail">メールアドレス</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
    <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=col-md-6" class="bg-warning text-dark">col-md-6">
      <label for="inputPassword">パスワード</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="trap5/index.php?strkey=mb-3" class="bg-warning 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="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 col-md-2">
      <label for="inputZip">郵便番号</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=col-md-6" class="bg-warning text-dark">col-md-6">
      <label for="inputCity">都道府県</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3">
    <label for="inputAddress1">住所1</label>
    <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
  </div>
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3">
    <label for="inputAddress2">住所2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
  </div>
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning 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 trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled>
    <div class="mb-3">
      <label for="trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabledTextInput">無効な入力欄</label>
      <input type="text" id="trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabledSelect">無効なプルダウンメニュー</label>
      <select id="trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabledCheck" trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled>
      <label class="form-check-label" for="trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabledCheck">無効なチェックボックス</label>
    </div>
    <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
  </fieldset>

水平配置のフォームを作成する:mb-3とrowとcol


ラジオボタン
チェックボックス
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <label for="inputEmail" class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-2 trap5/index.php?strkey=col" class="bg-warning text-dark">col-form-label">メールアドレス</label>
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
  </div>
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <label for="inputPassword" class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-2 trap5/index.php?strkey=col" class="bg-warning text-dark">col-form-label">パスワード</label>
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <fieldset class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3">
    <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row">
      <legend class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-form-label trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-2 pt-0">ラジオボタン</legend>
      <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
          <label class="form-check-label" for="radios1">オプション1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
          <label class="form-check-label" for="radios2">オプション2</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
          <label class="form-check-label" for="radios3">オプション3(無効)</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-2">チェックボックス</div>
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1">
        <label class="form-check-label" for="check1">チェックする</label>
      </div>
    </div>
  </div>
  <div class="trap5/index.php?strkey=mb-3" class="bg-warning text-dark">mb-3 trap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

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


@
  <!-- formにclassを設定する -->
  <form class="trap5/index.php?strkey=form-inline" class="bg-warning 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>

ラベルサイズを調整する:col-form-label-smとform-control-sm


  <div class="mb-3 row">
    <!-- 小サイズのラベル -->
    <label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ:col-form-label-sm</label>
    <div class="col-sm-9">
      <input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm">
    </div>
  </div>
  <div class="mb-3 row">
    <!-- 標準サイズのラベル -->
    <label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="labelDefault" placeholder="Default size">
    </div>
  </div>
  <div class="mb-3 row">
    <!-- 大サイズのラベル -->
    <label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ:col-form-label-lg</label>
    <div class="col-sm-9">
      <input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg">
    </div>
  </div>

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


姓を入力してください
名を入力してください
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form class="row g-3">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- trap5/index.php?strkey=required" class="bg-warning text-dark">requiredは必須-->
      <input type="text" class="form-control" id="validationServer01" placeholder="First name" value="山田" trap5/index.php?strkey=required" class="bg-warning 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="太郎" trap5/index.php?strkey=required" class="bg-warning 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="市町村名を入力" trap5/index.php?strkey=required" class="bg-warning 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="都道府県名を入力" trap5/index.php?strkey=required" class="bg-warning 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="郵便番号を入力" trap5/index.php?strkey=required" class="bg-warning 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>
      <!-- trap5/index.php?strkey=is-valid" class="bg-warning text-dark">is-valid はチェックマークが付く-->
      <input type="text" class="form-control trap5/index.php?strkey=is-valid" class="bg-warning 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 trap5/index.php?strkey=is-valid" class="bg-warning 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="trap5/index.php?strkey=input-group-text" class="bg-warning text-dark">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="trap5/index.php?strkey=input-group-text" class="bg-warning text-dark">input-group-text">合計</span>
    <input type="text" class="form-control" aria-label="金額">
    <span class="trap5/index.php?strkey=input-group-text" class="bg-warning text-dark">input-group-text">円</span>
  </div>

折り返さない:flex-nowrap


@
  <div class="input-group trap5/index.php?strkey=flex-nowrap" class="bg-warning 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="trap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group mb-3">
    <span class="trap5/index.php?strkey=input-group" class="bg-warning 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 trap5/index.php?strkey=input-group-sm" class="bg-warning 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 trap5/index.php?strkey=input-group-lg" class="bg-warning 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>

レンジ入力:form-control-range


  <!-- レンジ上の●をマウスで動かして入力させる -->
  <!-- input 要素 の type 属性 で rangeを指定する  -->
  <form>
    <div class="mb-3">
      <label for="formControlRange">レンジ入力の例</label>
      <input type="range" class="form-control-range" id="formControlRange">
    </div>
  </form>

アクティブ状態のボタン:active


  <a href="#" class="btn btn-primary btn-lg trap5/index.php?strkey=active" class="bg-warning text-dark">active" role="button" aria-pressed="true">アクティブボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

無効状態のリンクボタンを作成する:disabled


  <a href="#" class="btn btn-primary btn-lg trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled" role="button" aria-trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled="true">無効ボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

js ドロップダウンメニュー:data-bs-toggleとdropdown


  <!-- .trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown, .trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-toggle, trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown", .trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-menu, .trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item を組み合わせてドロップダウンメニューを作成する -->
  <div class="btn-group" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">1</button>
    <div class="btn-group" role="group">
      <button id="dropmenu1" type="button" class="btn btn-secondary trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-toggle" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-menu" aria-labelledby="dropmenu1">
        <a class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">リンク1</a>
        <a class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">リンク2</a>
      </div>
    </div>
  </div>

js 垂直方向ボタングループ:btn-group-vertical


  <div class="trap5/index.php?strkey=btn-group-vertical" class="bg-warning text-dark">btn-group-vertical" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">上ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <div class="btn-group" role="group">
      <button id="drop2" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="drop2">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
    <button type="button" class="btn btn-secondary">下ボタン</button>
  </div>

js 押されている状態のボタンを作成する:aria-pressed


  <!-- ボタンが押されている状態と押されていない状態を表示する -->
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" trap5/index.php?strkey=aria-pressed" class="bg-warning text-dark">aria-pressed="true"
    autocomplete="off">押された状態</button>
  <button type="button" class="btn btn-primary" data-bs-toggle="button" trap5/index.php?strkey=aria-pressed" class="bg-warning text-dark">aria-pressed="false"
    autocomplete="off">押されていない状態</button>

js ピル型ナビゲーションドロップダウン:nav-linkとdropdown-toggle


  <ul class="nav nav-pills">
    <li class="nav-item"><a class="trap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="trap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="trap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="trap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link disabled" href="#">無効</a></li>
  </ul>

js タブ型ナビゲーションドロップダウン:dropdown-toggle


  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true"
        aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

js タブパネル:navとnav-tabsとdata-bs-toggleとtablist


ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
  <!-- タブ部分 -->
  <!-- role="trap5/index.php?strkey=tablist" class="bg-warning text-dark">tablist"、 role="tab"、 role="tabpanel"、aria- 属性が必要 -->
  <ul class="nav trap5/index.php?strkey=nav-tabs" class="bg-warning text-dark">nav-tabs" id="myTab" role="trap5/index.php?strkey=tablist" class="bg-warning text-dark">tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="tab" href="#home" role="tab"
        aria-controls="home" aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="tab" href="#profile" role="tab"
        aria-controls="profile" aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="tab" href="#contact" role="tab"
        aria-controls="contact" aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <!-- herfの#とidで切り替える -->
  <div class="tab-content mt-3" id="myTabContent">
    <!-- tab-pane fade show active -->
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
  </div>

js 縦タブパネル:navとnav-tabsとdata-bs-toggleとtablist


縦パネル1Home

縦パネル2Profile

縦パネル3Messages

縦パネル4Settings

  <div class="d-flex align-items-start">
    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="trap5/index.php?strkey=tablist" class="bg-warning text-dark">tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="pill" href="#v-pills-home" role="tab"
        aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="pill" href="#v-pills-profile" role="tab"
        aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="pill" href="#v-pills-messages" role="tab"
        aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="pill" href="#v-pills-settings" role="tab"
        aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>縦パネル1Home</p>
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>縦パネル2Profile</p>
      </div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
        <p>縦パネル3Messages</p>
      </div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
        <p>縦パネル4Settings</p>
      </div>
    </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 trap5/index.php?strkey=progress-bar-animated" class="bg-warning text-dark">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 trap5/index.php?strkey=progress-bar-animated" class="bg-warning text-dark">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 trap5/index.php?strkey=progress-bar-animated" class="bg-warning text-dark">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 trap5/index.php?strkey=progress-bar-animated" class="bg-warning text-dark">progress-bar-animated bg-danger" role="progressbar"
      aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>

js アコーディオンを作成する:data-bs-toggleとcollapse


カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
コンテンツ02のコンテンツ。
サイドメニューなどに使える。
カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
  <div class="accordion" id="accordion">
    <div class="card">
      <!-- アコーディオンは、開いたり閉じたりする機能。サイドメニューなどにも使える -->
      <!-- aria-expanded="true"でコンテンツが開いたままになる -->
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-bs-target="#trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseOne"
            aria-expanded="true" aria-controls="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseOne">
            コンテンツ1の切替ボタン
          </button>
        </h5>
      </div>
      <div id="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseOne" class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
        <div class="card-body">
          カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapsed" type="button" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-bs-target="#trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseTwo"
            aria-expanded="false" aria-controls="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseTwo">
            コンテンツ2の切替ボタン
          </button>
        </h5>
      </div>
      <div id="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseTwo" class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
        <div class="card-body">
          コンテンツ02のコンテンツ。<br>サイドメニューなどに使える。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapsed" type="button" trap5/index.php?strkey=data-bs-toggle" class="bg-warning text-dark">data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-bs-target="#trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseThree"
            aria-expanded="false" aria-controls="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseThree">
            コンテンツ3の切替ボタン
          </button>
        </h5>
      </div>
      <div id="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseThree" class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
        <div class="card-body">
          カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
  </div>

js アコーディオンflushタイプのメニュー:accordion-flush


本文

本文

本文
  <!-- アコーディオンを親コンテナと一緒に 端から端までレンダリングします。 -->
  <!-- data-bs-parentに同じ親のidを指定する accordionFlushExample -->  
  <div class="accordion trap5/index.php?strkey=accordion-flush" class="bg-warning text-dark">accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingOne">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">Accordion Item
          #1</button>
      </h3>
      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">Accordion Item
          #2</button>
      </h3>
      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header" id="flush-headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Accordion
          Item #3</button>
      </h3>
      <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
        data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">本文</div>
      </div>
    </div>
  </div>

js 複数の要素の表示と非表示の切り替え:data-bs-targetとcollapse


ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
  <!-- 切替ボタン、trap5/index.php?strkey=data-bs-target" class="bg-warning text-dark">data-bs-targetで切り替え先を指定する -->
  <p>
    <button class="btn btn-secondary" type="button" data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" trap5/index.php?strkey=data-bs-target" class="bg-warning text-dark">data-bs-target="#content-01"
      aria-expanded="false" aria-controls="content-01">ID「content-01」</button>
    <button class="btn btn-secondary" type="button" data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" trap5/index.php?strkey=data-bs-target" class="bg-warning text-dark">data-bs-target="#content-02"
      aria-expanded="false" aria-controls="content-02">ID「content-02」</button>
  </p>
  <!-- 切り替え先は、IDで指定する「content-01」、クラス「contents」 -->
  <div class="row">
    <div class="col">
      <div class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse contents" id="content-01">
        <div class="card card-body">
          ID「content-01」、クラス「contents」
        </div>
      </div>
    </div>
    <div class="col">
      <div class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse contents" id="content-02">
        <div class="card card-body">
          ID「content-02」、クラス「contents」
        </div>
      </div>
    </div>
  </div>

js Collapse (コラプス)折り畳み:collapse


a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
  <div class="row">
    <div class="col-sm-6 mb-4">
      <!-- a要素とhref属性による切替ボタン -->
      <p>
        <a data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" href="#trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseContent01" aria-expanded="false" aria-controls="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseContent01">
          a要素とhref属性によるボタン<br>
          罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる
        </a>
      </p>
      <div class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" id="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapseContent01">
        <div class="card card-body">
          a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
        </div>
      </div>
    </div>
  </div>

js Collapse (コラプス)複数同時折り畳み:collapse


ボタン1本文
ボタン2本文
  <!--複数の要素を表示および非表示にすることができる  -->
    <!--toggleは開いていれば閉じる、閉じていれば開く  -->
    <p>
      <a class="btn btn-primary" data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" href="#multi1" role="button"
        aria-expanded="false" aria-controls="multi1">ボタン1</a>
      <button class="btn btn-primary" type="button" data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-bs-target="#multi2"
        aria-expanded="false" aria-controls="multi2">ボタン2</button>
        <!-- aria-controls="multi1 multi2"に複数指定することで実現する -->
      <button class="btn btn-primary" type="button" data-bs-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-bs-target=".multi-trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse"
        aria-expanded="false" aria-controls="multi1 multi2">ボタン12</button>
    </p>
    <div class="row">
      <div class="col">
        <div class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse multi-trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" id="multi1">
          <div class="card card-body">ボタン1本文</div>
        </div>
      </div>
      <div class="col">
        <div class="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse multi-trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" id="multi2">
          <div class="card card-body">ボタン2本文</div>
        </div>
      </div>
    </div>
  

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


  <div id="carouselSample" class="carousel slide" data-bs-ride="carousel">
    <!-- インジケーターによるフェード遷移(好きな場所にクリックでいける) -->
    <ol class="trap5/index.php?strkey=carousel-indicators" class="bg-warning text-dark">carousel-indicators">
      <li data-bs-target="#carouselSample" trap5/index.php?strkey=data-bs-slide-to" class="bg-warning text-dark">data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselSample" trap5/index.php?strkey=data-bs-slide-to" class="bg-warning text-dark">data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselSample" trap5/index.php?strkey=data-bs-slide-to" class="bg-warning 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" trap5/index.php?strkey=data-bs-interval" class="bg-warning 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 trap5/index.php?strkey=carousel-fade" class="bg-warning 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 trap5/index.php?strkey=carousel-dark" class="bg-warning 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>

js モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット


  <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal"-->
  <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          モーダルの本文が入ります。
        </div>
        <div class="modal-footer">
          <!-- 「data-bs-dismiss=”modal”」が閉じる動作 -->
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
  </div>

js モーダルのアニメーション設定:fade


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal2">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal2"-->
    <div class="modal trap5/index.php?strkey=fade" class="bg-warning text-dark">fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-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-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal3">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal3"-->
    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog trap5/index.php?strkey=modal-dialog-centered" class="bg-warning text-dark">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-bs-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-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: f8f8ff;
      border: 1px solid #aaa;
    }
  </style>

js グリッドレイアウトを使用したモーダル:rowとcol


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal4">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal4"-->
    <div class="modal fade" id="exampleModal4" 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-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <!-- container-fluidは画面いっぱい -->
            <div class="container-fluid">
              <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row">
                <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-4">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-4</div>
                <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-4 ms-auto">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-4、ms-auto</div>
              </div>
              <div class="trap5/index.php?strkey=row" class="bg-warning text-dark">row">
                <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-3 ms-auto">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-3、ms-auto</div>
                <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-2 ms-auto">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-2、ms-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 長いコンテンツのモーダル:modal-body


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal5">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal5"-->
    <div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="trap5/index.php?strkey=modal-body" class="bg-warning text-dark">modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 長いコンテンツ、スクロールのモーダル:modal-dialog-scrollable


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModalsc">スクロールモーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModalsc"-->
    <div class="modal fade" id="exampleModalsc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog trap5/index.php?strkey=modal-dialog-scrollable" class="bg-warning text-dark">modal-dialog-scrollable" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 大きなサイズのモーダル サイズのオプション:modal-lg


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#largeModal6">大きなモーダルボタン</button>
    <!-- モーダル id="largeModal6"-->
    <div class="modal fade" id="largeModal6" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体trap5/index.php?strkey=modal-lg" class="bg-warning text-dark">modal-lg -->
      <!-- modal-sm:300px,Default(None):500px,trap5/index.php?strkey=modal-lg" class="bg-warning text-dark">modal-lg:800px,modal-xl:1140px
  -->
      <div class="modal-dialog trap5/index.php?strkey=modal-lg" class="bg-warning text-dark">modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-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-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

js 小さなサイズのモーダル:modal-sm


    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#smallModal">小さなモーダルボタン(trap5/index.php?strkey=modal-sm" class="bg-warning text-dark">modal-sm)</button>
    <!-- モーダル id="smallModal"-->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
      aria-hidden="true">
      <!-- 小さなモーダルのダイアログ本体trap5/index.php?strkey=modal-sm" class="bg-warning text-dark">modal-sm -->
      <div class="modal-dialog trap5/index.php?strkey=modal-sm" class="bg-warning text-dark">modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-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-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

js フルスクリーンのモーダル:modal-fullscreen


    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#fullModal">フルスクリーンモーダルボタン(trap5/index.php?strkey=modal-fullscreen" class="bg-warning text-dark">modal-fullscreen)</button>
    <!-- モーダル id="fullModal"-->
    <div class="modal fade" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullModalLabel"
      aria-hidden="true">
      <div class="modal-dialog  trap5/index.php?strkey=modal-fullscreen" class="bg-warning text-dark">modal-fullscreen" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="fullModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
    
</body>
</html>