tr

bootstrap5.css

bootstrap5.css
b,
strong {
  font-weight: bolder;
}
bootstrap5.css
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
bootstrap5.css
button,
select {
  /* 文字の大文字等への変換 */
  text-transform: none;
}
bootstrap5.css
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
bootstrap5.css
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
bootstrap5.css
.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap5.css
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
bootstrap5.css
.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}
bootstrap5.css
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  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::-ms-expand {
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
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:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::-ms-input-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
select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
bootstrap5.css
.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}
bootstrap5.css
.form-control-plaintext {
  display: block;
  width: 100%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  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 {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap5.css
.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
select.form-control[size],
select.form-control[multiple] {
  height: auto;
}
bootstrap5.css
textarea.form-control {
  height: auto;
}
bootstrap5.css
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
bootstrap5.css
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip {
  display: block;
}
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-file:valid ~ .valid-feedback,
.was-validated .form-control-file:valid ~ .valid-tooltip,
.form-control-file.is-valid ~ .valid-feedback,
.form-control-file.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label {
  color: #28a745;
}
bootstrap5.css
.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #28a745;
}
bootstrap5.css
.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip,
.custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}
bootstrap5.css
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before,
.custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
bootstrap5.css
.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #28a745;
}
bootstrap5.css
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
  display: block;
}
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
.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip,
.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip,
.custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before,
.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}
bootstrap5.css
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #dc3545;
}
bootstrap5.css
@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}
bootstrap5.css
.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  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: #007bff;
  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: #28a745;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #17a2b8;
  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: #343a40;
  background-color: transparent;
}
bootstrap5.css
.fade {
  transition: opacity 0.15s linear;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
bootstrap5.css
.collapsing {
  position: relative;
  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
.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
.dropright .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
.dropleft .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 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  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
.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}
bootstrap5.css
.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}
bootstrap5.css
.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}
bootstrap5.css
.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}
bootstrap5.css
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap5.css
.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}
bootstrap5.css
.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}
bootstrap5.css
.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
bootstrap5.css
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}
bootstrap5.css
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff;
}
bootstrap5.css
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
bootstrap5.css
.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}
bootstrap5.css
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}
bootstrap5.css
.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
bootstrap5.css
.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}
bootstrap5.css
.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}
bootstrap5.css
.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
bootstrap5.css
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}
bootstrap5.css
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
bootstrap5.css
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
bootstrap5.css
.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 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: transform 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, -webkit-transform 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}
bootstrap5.css
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}
bootstrap5.css
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}
bootstrap5.css
.custom-range {
  width: 100%;
  height: calc(1rem + 0.4rem);
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  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) {
  .custom-range::-webkit-slider-thumb {
    transition: none;
  }
}
bootstrap5.css
.custom-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
.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  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) {
  .custom-range::-moz-range-thumb {
    transition: none;
  }
}
bootstrap5.css
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    transition: none;
  }
}
bootstrap5.css
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
bootstrap5.css
.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}
bootstrap5.css
.custom-range:disabled::-moz-range-track {
  cursor: default;
}
bootstrap5.css
.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: 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) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}
bootstrap5.css
.nav-tabs .nav-link {
  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;
}
bootstrap5.css
.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  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) {
  .badge {
    transition: none;
  }
}
bootstrap5.css
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}
bootstrap5.css
@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}
bootstrap5.css
.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}
bootstrap5.css
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap5.css
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
bootstrap5.css
@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
bootstrap5.css
.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  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: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}
bootstrap5.css
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
bootstrap5.css
.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}
bootstrap5.css
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}
bootstrap5.css
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}
bootstrap5.css
.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
bootstrap5.css
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
bootstrap5.css
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
bootstrap5.css
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}
bootstrap5.css
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: 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: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}
bootstrap5.css
.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  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
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
bootstrap5.css
@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
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: spinner-border 0.75s linear infinite;
  animation: spinner-border 0.75s linear infinite;
}
bootstrap5.css
@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
bootstrap5.css
@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
bootstrap5.css
.bg-transparent {
  /* 完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。 */
  background-color: transparent !important;
}
bootstrap5.css
.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}
bootstrap5.css
.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}
bootstrap5.css
.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}
bootstrap5.css
.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}
bootstrap5.css
.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}
bootstrap5.css
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}
bootstrap5.css
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
bootstrap5.css
.text-lowercase {
  text-transform: lowercase !important;
}
bootstrap5.css
.text-uppercase {
  text-transform: uppercase !important;
}
bootstrap5.css
.text-capitalize {
  text-transform: capitalize !important;
}
bootstrap5.css
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
bootstrap5.css
@media print {
  /* 印刷字に利用するCSS　mediaで大きく括って、それぞれのタグの設定をする */
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

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>

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

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

カードのタイトル

カードの内容

フッター初期設定の背景色
ヘッダー背景色の除去：bg-transparent

カードのタイトル

カードの内容

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

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

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

bg-white

bg-transparent

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

Bootstrapで、文字を均等割付する。

  <p class="trap5/index.php?strkey=text-justify" class="bg-warning text-dark">text-justify">Bootstrapで、文字を均等割付する。</p>

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

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

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

強調：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>

アラートを閉じるボタンで消す：alert-dismissible

  <div class="alert alert-warning trap5/index.php?strkey=alert-dismissible" class="bg-warning text-dark">alert-dismissible fade show" role="alert">
    右側の「×」マークをクリックするとアラートが閉じます
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>

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

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

定義リスト：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>

テーブルの基本スタイル：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>
        <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>
      <tr>
        <td>タイトル</td>
        <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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

テーブルthead：thead-dark

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ 
  <table class="table">
    <thead class="trap5/index.php?strkey=thead-dark" class="bg-warning text-dark">thead-dark">
      <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>

テーブルthead： thead-light

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ 
  <table class="table">
    <thead class="trap5/index.php?strkey=thead-light" class="bg-warning text-dark">thead-light">
      <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>

背景色用のクラス：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>

th,tdの背景色：bg-*

th（標準） th.bg-primary
td.bg-success td.bg-warning
td.bg-danger td.bg-info 
  <table class="table table-dark">
    <tr>
      <th>th（標準） </th>
      <th class="trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-primary">th.trap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-primary</th>
    </tr>
    <tr>
      <td 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 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>
    </tr>
    <tr>
      <td 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 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>
    </tr>
  </table>

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

背景色用のクラス タイトル タイトル タイトル
なし（標準） データ データ データ
table-active データ データ データ
table-primary データ データ データ
table-secondary データ データ データ
table-success データ データ データ
table-danger データ データ データ
table-warning データ データ データ
table-info データ データ データ
table-light データ データ データ
table-dark データ データ データ 
  <table class="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>

th,tdの背景色：table-*

th（標準） table-active
table-primary table-secondary
table-success table-danger
table-warning table-info
table-light table-dark 
  <table class="table">
    <tr>
      <td>th（標準） </th>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-active">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-active</th>
    </tr>
    <tr>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary</td>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary</td>
    </tr>
    <tr>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-success">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-success </td>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger</td>
    </tr>
    <tr>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning</td>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-info">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-info</td>
    </tr>
    <tr>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-light">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-light </td>
      <td class="trap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark">trap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark</td>
    </tr>
  </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>
      <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">
    <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>

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

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

テーブル：table-sm

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ 
  <table class="table trap5/index.php?strkey=table-sm" class="bg-warning text-dark">table-sm">
    <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-responsive

タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ 
  <!-- tableタグに設定するのではなく、divで囲む -->
  <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

タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ 
  <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>
      </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>

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

  <nav>
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">«</span><span
            class="sr-only">前へ</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="sr-only">次へ</span></a></li>
    </ul>
  </nav>

button要素を使用したドロップダウン：dropdownとdata-toggle

メニュー01 メニュー02 メニュー03 
  <div class="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown">
    <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">dropdownMenuButton" trap5/index.php?strkey=data-toggle" class="bg-warning text-dark">data-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="trap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdownMenuButton">
      <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>

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

メニュー01 メニュー02 メニュー03 
  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <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-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>

メニュー項目にbuttonを使用する：dropdown-menu

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="trap5/index.php?strkey=dropdown-menu" class="bg-warning text-dark">dropdown-menu" aria-labelledby="dropdownMenuButton">
      <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>

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

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu trap5/index.php?strkey=dropdown-menu-right" class="bg-warning text-dark">dropdown-menu-right">
      <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>

切り替えボタンにaタグ要素を使用したドロップダウン：dropdown-toggle

メニュー01 メニュー02 メニュー03 
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <a class="btn btn-secondary trap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-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>

メニュー項目にアクティブの状態を設定する：active

メニュー01 メニュー02（無効） メニュー03（アクティブ） 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-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" href="#">メニュー02（無効）</a>
      <a class="dropdown-item trap5/index.php?strkey=active" class="bg-warning text-dark">active" href="#">メニュー03（アクティブ）</a>
    </div>
  </div>

左側表示のドロップメニュー：dropleft

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 左方向へのドロップ -->
    <div class="btn-group trap5/index.php?strkey=dropleft" class="bg-warning text-dark">dropleft">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向へのドロップ</button>
      <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>
  </div>

右側表示のドロップメニュー：dropright

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 右方向へのドロップ -->
    <div class="btn-group trap5/index.php?strkey=dropright" class="bg-warning text-dark">dropright">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">右方向へのドロップ</button>
      <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>
  </div>

上側表示のドロップメニュー：dropup

メニュー01 メニュー02 メニュー03 
  <div class="container py-5 d-flex justify-content-center">
    <!-- 上方向へのドロップ -->
    <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-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">上方向へのドロップ</button>
      <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>
  </div>

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






メニュー1 メニュー2 メニュー3 
  <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"-->
      <button class="btn btn-secondary dropdown-toggle" data-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>

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

メニュー1 メニュー2 メニュー3 
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      trap5/index.php?strkey=data-offset" class="bg-warning text-dark">data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>

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

メニュー内のテキストその1

メニュー内のテキストその2

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 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>

トグルボタンで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-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="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <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>

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

非リンクテキスト メニュー1 メニュー2 メニュー3 
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-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メソッド：dropdpown('toggle')

メニュー01 メニュー02 メニュー03 
  <!-- ドロップダウン -->
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- 最初から選択肢を出しておく -->
    <div class="dropdown-menu" aria-labelledby="dropdownExample">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownExample').dropdown('toggle');
    });
  </script>

ドロップダウンのオフセット値を設定する：offset

メニュー1 メニュー2 メニュー3 
  <!-- data-trap5/index.php?strkey=offset" class="bg-warning text-dark">offset="x,y" はメニューの表示位置を右方向に x、下方向に y ずれた位置に表示します。 -->
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
  <script>
    $(function () {
      $('#dropdownMenuButton').dropdown({
        trap5/index.php?strkey=offset" class="bg-warning text-dark">offset: '10, 20'
      })
    });
  </script>

スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split

メニュー01 メニュー02 メニュー03 
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割して表示する -->
    <button type="button" class="btn btn-secondary dropdown-toggle trap5/index.php?strkey=dropdown-toggle-split" class="bg-warning text-dark">dropdown-toggle-split" data-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>

ジャンボトロン：jumbotron

Jumbotron

これはジャンボトロンのサンプルです。

  <!-- ジャンボトロンは、大型表示で、トップ見出しなどに使う用語 -->
  <div class="jumbotron">
    <h4 class="display-3">Jumbotron</h4>
    <p class="lead">これはジャンボトロンのサンプルです。</p>
  </div>

ジャンボトロンを全幅で表示する：jumbotron-fluid

Fluid jumbotron

これは全幅のジャンボトロンのサンプルです。

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h4 class="display-3">Fluid jumbotron</h4>
      <p class="lead">これは全幅のジャンボトロンのサンプルです。</p>
    </div>
  </div>

フォームの基本要素：form-groupとform-control

キャリアメールは届かない場合があります。 
  <form>
    <div class="form-group">
      <!-- 入力要素ごとにform-group、入力エリアはform-control -->
      <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="form-group">
      <label for="password1">パスワード</label>
      <input type="password" class="form-control" id="password1" placeholder="パスワードを入力">
    </div>
    <div class="form-group">
      <label for="select1">プルダウンメニューから選んでください</label>
      <select class="form-control" id="select1">
        <option>メニュー1</option>
        <option>メニュー2</option>
        <option>メニュー3</option>
        <option>メニュー4</option>
        <option>メニュー5</option>
      </select>
    </div>
    <!-- 複数選択のプルダウンメニュー -->
    <div class="form-group">
      <label for="select2">複数選択のプルダウンメニュー</label>
      <select multiple class="form-control" id="select2">
        <option>複数選択可A</option>
        <option>複数選択可B</option>
        <option>複数選択可C</option>
        <option>複数選択可D</option>
        <option>複数選択可E</option>
      </select>
    </div>
    <div class="form-group">
      <label for="textarea1">複数行のテキスト入力欄</label>
      <textarea class="form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="form-group">
      <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>

フォームタイトル：block-title-infoとfa-shopping-basket

formタイトル 

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="trap5/index.php?strkey=block-title-info" class="bg-warning text-dark">block-title-info">
    <i class="fa trap5/index.php?strkey=fa-shopping-basket" class="bg-warning text-dark">fa-shopping-basket" aria-hidden="true"></i>formタイトル
  </h3>
  <div class="form-row">
    <!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-control">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="form-group col-sm-6">
      <label for="file1">File:</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="form-group 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="form-group 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 class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <!-- inputの枠を表示しない -->
        <input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <!-- passwordを使うと、入力内容が*として表示される -->
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>

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

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

カスタムのチェックボックスに不確定を指定する：indeterminate

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox08" checked>
      <label class="custom-control-label" for="checkbox08">選択済み</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox09" unchecked>
      <label class="custom-control-label" for="checkbox09">未選択</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input trap5/index.php?strkey=indeterminate" class="bg-warning text-dark">indeterminate-box" id="checkbox10">
      <label class="custom-control-label" for="checkbox10">不確定</label>
    </div>
  </form>

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

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

ヘルプテキスト（inputの下に説明文）を表示する：aria-describedby

パスワードは8〜20文字で、文字と数字を含み、スペース、特殊文字、または絵文字を含むことはできません。 
  <form>
    <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>
  </form>

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

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

カスタムのチェックボックスとラジオボタンを作成する：custom-checkboxとcustom-radio

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control trap5/index.php?strkey=custom-checkbox" class="bg-warning text-dark">custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox13">
      <label class="custom-control-label" for="checkbox13">チェックする</label>
    </div>
    <!-- カスタムフォームのラジオボタン -->
    <div class="custom-control trap5/index.php?strkey=custom-radio" class="bg-warning text-dark">custom-radio">
      <input type="radio" id="option1" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option1">オプション1</label>
    </div>
    <div class="custom-control trap5/index.php?strkey=custom-radio" class="bg-warning text-dark">custom-radio">
      <input type="radio" id="option2" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option2">オプション2</label>
    </div>
  </form>

froｍにグリッドレイアウトを利用する：rowとcol

  <form>
    <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">
        <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>
  </form>

自動サイズ調整のカラムを作成する：form-rowとcol-auto

  <form>
    <div class="trap5/index.php?strkey=form-row" class="bg-warning text-dark">form-row align-items-center">
      <div class="trap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto">
        <label class="sr-only" 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">
        <label class="sr-only" for="inputUsername">ユーザーネーム</label>
        <div class="input-group mb-2">
          <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>
  </form>

コンパクトなカラム間隔のフォーム：form-rowとform-groupとcol-md-6

  <form>
    <div class="trap5/index.php?strkey=form-row" class="bg-warning text-dark">form-row">
      <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group 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=form-group" class="bg-warning text-dark">form-group 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=form-row" class="bg-warning text-dark">form-row">
      <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group col-md-4">
        <label for="inputState">国</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group col-md-2">
        <label for="inputZip">郵便番号</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
      <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group 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=form-group" class="bg-warning text-dark">form-group">
      <label for="inputAddress1">住所1</label>
      <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
    </div>
    <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group">
      <label for="inputAddress2">住所2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
    </div>
    <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group">
      <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>
  </form>

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

  <form>
    <fieldset trap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled>
      <div class="form-group">
        <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="form-group">
        <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-control">
          <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>
  </form>

水平配置のフォームを作成する：form-groupとrowとcol

ラジオボタン
チェックボックス
  <form>
    <div class="trap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group 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=form-group" class="bg-warning text-dark">form-group 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=form-group" class="bg-warning text-dark">form-group">
      <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=form-group" class="bg-warning text-dark">form-group 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=form-group" class="bg-warning text-dark">form-group 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>

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

@
  <!-- formにclassを設定する -->
  <form class="trap5/index.php?strkey=form-inline" class="bg-warning text-dark">form-inline">
    <label class="sr-only" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="sr-only" for="username">ユーザーネーム</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </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

  <form>
    <div class="form-group 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="form-group 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="form-group 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>
  </form>

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

市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer01">姓</label>
        <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-row">
      <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>
  </form>

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

@ 
  <div class="input-group">
    <div class="trap5/index.php?strkey=input-group-prepend" class="bg-warning text-dark">input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
  </div>

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

合計
円 
  <!-- 固定の文字列を書いておいて、その中身を入力してもらう -->
  <div class="input-group">
    <div class="input-group-prepend"> <span class="input-group-text">合計</span> </div>
    <input type="text" class="form-control" aria-label="金額">
    <div class="trap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append"> <span class="input-group-text">円</span> </div>
  </div>

ラベル付きの入力グループ：input-group-append

https://example.com/users/ 
  <!-- 固定の文字列を書いておいて、その続きを入力してもらう -->
  <label for="basic-url">サイトのURL</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon5">https://example.com/users/</span>
    </div>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon5">
  </div>

入力グループ アドオンをチェックボックスやラジオボタンにする：input-group-append

  <!-- input=groupを使う -->
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="checkbox" aria-label="次のテキスト入力用のチェックボックス">
      </div>
    </div>
    <input type="text" class="form-control" aria-label="チェックボックス付テキスト入力欄">
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
      </div>
    </div>
    <input type="text" class="form-control" aria-label="ラジオボタン付テキスト入力欄">
  </div>

入力グループ ボタン付きアドオン：input-group-append

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
    <div class="trap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append">
      <button class="btn btn-secondary" type="button">検索</button>
    </div>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-secondary" type="button">好き</button>
    </div>
    <input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
    <div class="trap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append">
      <button class="btn btn-secondary" type="button">嫌い</button>
    </div>
  </div>

入力グループ ドロップダウン付きアドオン：input-group-append

リンク1 リンク2 リンク3 
  <div class="input-group">
    <input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
    <div class="trap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">アクション</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>

入力グループ 複数の入力コントロール：input-group-append

姓名 
  <div class="input-group">
    <div class="input-group-prepend"> <span class="input-group-text" id="...">姓名</span> </div>
    <input type="text" class="form-control" placeholder="姓">
    <input type="text" class="form-control" placeholder="名">
  </div>

入力グループ 複数のアドオンを組み合わせる：input-group-append

$ 0.00
$ 0.00 
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
      </div> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
    </div>
    <input type="text" class="form-control" aria-label="金額">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="金額">
    <div class="trap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
      <div class="input-group-text">
        <input type="checkbox" aria-label="前のテキスト入力用のチェックボックス">
      </div>
    </div>
  </div>

入力グループ スプリットボタン付きアドオン：input-group-append

リンク1 リンク2 リンク3 
  <div class="input-group">
    <input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
    <div class="trap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append">
      <button type="button" class="btn btn-secondary">アクション</button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">ドロップダウン切替</span>
      </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>

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

Default 
  <!-- 標準サイズの入力グループ -->
  <div class="trap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group mb-3">
    <div class="trap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group-prepend">
      <span class="trap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group-text" id="inputGroup-sizing-default">Default</span>
    </div>
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-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">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>

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

Large 
  <!-- 大サイズの入力グループ -->
  <div class="input-group trap5/index.php?strkey=input-group-lg" class="bg-warning text-dark">input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    </div>
    <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
  </div>

フォームバリデーション：novalidate

入力済！
入力済！
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください 
  <form class="needs-validation" trap5/index.php?strkey=novalidate" class="bg-warning text-dark">novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation01">姓</label>
        <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
        <div class="valid-feedback">
          入力済！
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validation02">名</label>
        <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
        <div class="valid-feedback">
          入力済！
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation03">市町村</label>
        <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">
          市町村名を入力してください
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation04">都道府県</label>
        <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">
          都道府県名を入力してください
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation05">郵便番号</label>
        <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">
          郵便番号を入力してください
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>

ツールチップJS：valid-tooltip

入力済！
入力済！
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください 
  <!-- マウスオンで説明文を表示する -->
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation01">姓</label>
        <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
        <div class="trap5/index.php?strkey=valid-tooltip" class="bg-warning text-dark">valid-tooltip"> 入力済！ </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validation02">名</label>
        <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
        <div class="trap5/index.php?strkey=valid-tooltip" class="bg-warning text-dark">valid-tooltip"> 入力済！ </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation03">市町村</label>
        <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
        <div class="intrap5/index.php?strkey=valid-tooltip" class="bg-warning text-dark">valid-tooltip"> 市町村名を入力してください </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation04">都道府県</label>
        <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
        <div class="intrap5/index.php?strkey=valid-tooltip" class="bg-warning text-dark">valid-tooltip"> 都道府県名を入力してください </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation05">郵便番号</label>
        <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
        <div class="intrap5/index.php?strkey=valid-tooltip" class="bg-warning text-dark">valid-tooltip"> 郵便番号を入力してください </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>

レンジ入力：form-control-range

  <!-- レンジ上の●をマウスで動かして入力させる -->
  <form>
    <div class="form-group">
      <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>

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

リンク1 リンク2 
  <!-- .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-toggle" class="bg-warning text-dark">data-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-toggle" class="bg-warning text-dark">data-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>

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

リンク1 リンク2 
  <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-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>

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

  <!-- ボタンが押されている状態と押されていない状態を表示する -->
  <button type="button" class="btn btn-primary active" data-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-toggle="button" trap5/index.php?strkey=aria-pressed" class="bg-warning text-dark">aria-pressed="false"
    autocomplete="off">未プッシュ状態</button>

JavaScriptでボタン名の変更(id指定)：thisとtoggleとtext

  <button type="button" class="btn btn-primary" aria-pressed="true" autocomplete="off" id="trap5/index.php?strkey=toggle" class="bg-warning trap5/index.php?strkey=text" class="bg-warning text-dark">text-dark">toggle-btn">押してね</button>
  <script>
    // クリックされたら、ボタン名を変更する
    $("#trap5/index.php?strkey=toggle" class="bg-warning trap5/index.php?strkey=text" class="bg-warning text-dark">text-dark">toggle-btn").on('click', function () {
      $(trap5/index.php?strkey=this" class="bg-warning text-dark">this).button('trap5/index.php?strkey=toggle" class="bg-warning trap5/index.php?strkey=text" class="bg-warning text-dark">text-dark">toggle').trap5/index.php?strkey=text" class="bg-warning text-dark">text('押したね');
    });
  </script>

タブとタブパネル：navとnav-tabsとtab-contentとtab-pane

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

タブ型ナビゲーション（JavaScript経由）：thisとtabとshow

ホームのコンテンツが入ります。
プロフィールのコンテンツが入ります。
コンタクトのコンテンツが入ります。
  <ul class="nav nav-trap5/index.php?strkey=tab" class="bg-warning text-dark">tabs" id="myTab_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tablist">
    <li class="nav-item"><a class="nav-link active" id="home-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" href="#home_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="home"
        aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" href="#profile_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="profile"
        aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" href="#contact_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab" aria-controls="contact"
        aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-content mt-3" id="myTabContent">
    <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade trap5/index.php?strkey=show" class="bg-warning text-dark">show active" id="home_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="home-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab">ホームのコンテンツが入ります。</div>
    <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade" id="profile_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="profile-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab">プロフィールのコンテンツが入ります。</div>
    <div class="trap5/index.php?strkey=tab" class="bg-warning text-dark">tab-pane fade" id="contact_js" role="trap5/index.php?strkey=tab" class="bg-warning text-dark">tabpanel" aria-labelledby="contact-trap5/index.php?strkey=tab" class="bg-warning text-dark">tab">コンタクトのコンテンツが入ります。</div>
  </div>
  <script>
    $('#myTab_js a').on('click', function (e) {
      // 本来のaの通常処理をしない
      e.preventDefault()
      $(trap5/index.php?strkey=this" class="bg-warning text-dark">this).trap5/index.php?strkey=tab" class="bg-warning text-dark">tab('trap5/index.php?strkey=show" class="bg-warning text-dark">show')
    })
  </script>

ナビゲーションバー基本：navbarとnavbar-brandとcollapse

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- TOPは常に表示 -->
    <a class="trap5/index.php?strkey=navbar-brand" class="bg-warning text-dark">navbar-brand" href="#">TOP</a>
    <!-- navbar-togglerでレスポンシブ -->
    <!-- レスポンシブ状態でないと、トグルアイコンは非表示になり、メニューが表示される -->
    <!-- レスポンシブになると、トグルアイコンが表示され、メニューは非表示になる -->
    <button type="button" class="navbar-toggler" data-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-target="#navbarNav2"
      aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <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="navbarNav2">
      <!-- メニューはulとliを使う -->
      <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>

ナビバーとコンテナ：container

コンテンツcontainer

コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。 

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="trap5/index.php?strkey=container" class="bg-warning text-dark">container">
      <a class="navbar-brand" href="#">TOP</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22"
        aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav22">
        <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>
    </div>
  </nav>
  <!-- ここから、コンテンツが始まる -->
  <div class="trap5/index.php?strkey=container" class="bg-warning text-dark">container bg-light">
    <h4>コンテンツtrap5/index.php?strkey=container" class="bg-warning text-dark">container</h4>
    <p>
      コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
    </p>
  </div>

ナビバーの検索窓：form-inline

  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
    <a class="navbar-brand" href="#">TOP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-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="#">メニュー２</a></li>
        <li class="nav-item"><a class="nav-link" href="#">メニュー３</a></li>
      </ul>
      <form class="trap5/index.php?strkey=form-inline" class="bg-warning text-dark">form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

外部コンテンツの表示／非表示：navbar-togglerとnavbar-toggler-icon

  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">折り畳みコンテンツ</h4>
      <span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent"
      aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="trap5/index.php?strkey=navbar-toggler-icon" class="bg-warning text-dark">navbar-toggler-icon"></span>
    </button>
  </nav>

ナビバーの中に入力グループ

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
      </div>
    </form>
  </nav>

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            ドロップダウンメニュー
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
            <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>
  </nav>

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-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 ml-auto">ナビゲーションバーテキスト</span>
    </div>
  </nav>

ピル型ナビゲーションドロップダウン：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-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>

タブ型ナビゲーションドロップダウン：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-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>

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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=mr-auto" class="bg-warning text-dark">mr-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="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

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

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

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</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="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

navbar-brand画像：navbar-brand

  <nav class="navbar navbar-dark bg-dark">
    <a class="trap5/index.php?strkey=navbar-brand" class="bg-warning text-dark">navbar-brand" href="#">
      <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
    </a>
  </nav>

ナビバーのデザイン：navbar-darkとbg-dark

  <nav class="navbar navbar-expand-lg trap5/index.php?strkey=navbar-dark" class="bg-warning text-dark">navbar-dark trap5/index.php?strkey=bg-dark" class="bg-warning text-dark">bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <!-- アウトラインの検索ボタン、darkだど映える -->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

ナビバーのデザイン：navbar-darkとbg-primary

  <nav class="navbar navbar-expand-lg trap5/index.php?strkey=navbar-dark" class="bg-warning text-dark">navbar-dark trap5/index.php?strkey=bg-primary" class="bg-warning text-dark">bg-primary">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
      aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent2">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
    </div>
  </nav>

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

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

プログレスバーをストライプにする：progress-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>

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

カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。 
  <div class="accordion" id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" trap5/index.php?strkey=data-toggle" class="bg-warning text-dark">data-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-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">
            カード01の切替ボタン
          </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-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-toggle" class="bg-warning text-dark">data-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-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">
            カード02の切替ボタン
          </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-parent="#accordion">
        <div class="card-body">
          カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </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-toggle" class="bg-warning text-dark">data-toggle="trap5/index.php?strkey=collapse" class="bg-warning text-dark">collapse" data-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">
            カード03の切替ボタン
          </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-parent="#accordion">
        <div class="card-body">
          カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
  </div>

アコーディオンタイプのメニュー：data-parent

コンテンツ1

コンテンツ2

コンテンツ3 
  <!-- trap5/index.php?strkey=data-parent" class="bg-warning text-dark">data-parentをclassにすることで複数の対象を同時に開閉可能（開いたら、他が閉じる） -->
  <div id="sample3">
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button"
          aria-expanded="false" aria-controls="collapseContent01">ボタン1</a>
      </p>
      <div class="collapse" id="collapseContent01" trap5/index.php?strkey=data-parent" class="bg-warning text-dark">data-parent="#sample3">
        <div class="card card-body">
          コンテンツ1
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent02" role="button"
          aria-expanded="false" aria-controls="collapseContent02">ボタン2</a>
      </p>
      <div class="collapse" id="collapseContent02" trap5/index.php?strkey=data-parent" class="bg-warning text-dark">data-parent="#sample3">
        <div class="card card-body">
          コンテンツ2
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent03" role="button"
          aria-expanded="false" aria-controls="collapseContent03">ボタン3</a>
      </p>
      <div class="collapse" id="collapseContent03" trap5/index.php?strkey=data-parent" class="bg-warning text-dark">data-parent="#sample3">
        <div class="card card-body">
          コンテンツ3
        </div>
      </div>
    </div>
  </div>

複数の要素の表示と非表示とを切り替：data-target

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

アコーディオン折り畳み：collapse

a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ 
  <div class="row">
    <div class="col-sm-6 mb-4">
      <!-- a要素とhref属性による切替ボタン -->
      <p>
        <a data-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>

インジケータ、タイトル、キャプション付きカルーセル：carousel-indicatorsとcarousel-control-prev

  <div id="carouselSample" class="carousel slide" data-ride="carousel">
    <!-- インジケーターによるフェード遷移（好きな場所にクリックでいける） -->
    <ol class="carousel-indicators">
      <li data-target="#carouselSample" data-slide-to="0" class="active"></li>
      <li data-target="#carouselSample" data-slide-to="1"></li>
      <li data-target="#carouselSample" data-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-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">前に戻る</span>
    </a>
    <a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">次に送る</span>
    </a>
  </div>

カルーセルのJSイベント：slid.bs.carousel

  <div class="container">
    <div id="carouselExample" class="carousel slide">
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <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>
        <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>
        <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-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $('#carouselExample').on('slide.bs.carousel', function () {
      $('#carouselExample .carousel-caption').hide();
    });
    $('#carouselExample').on('trap5/index.php?strkey=slid.bs.carousel" class="bg-warning text-dark">slid.bs.carousel', function () {
      $('#carouselExample .carousel-caption').show();
    });
  </script>

カルーセルをJavaScript経由で呼び出す

  <div class="container">
    <div id="carouselExample2" class="carousel slide">
      <!-- data-ride="carousel"は不要 -->
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-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="#carouselExample2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $(function () {
      $('#carouselExample2').carousel();
    });
  </script>

コントローラー付きカルーセルJS：carousel

  <div class="container">
    <div id="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel" class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel slide">
      <div class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-inner">
        <!-- First slide -->
        <div class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-item active">
          <img class="d-block w-100" alt="First slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        </div>
        <!-- Second slide -->
        <div class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-item">
          <img class="d-block w-100" alt="Second slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        </div>
        <!-- Third slide -->
        <div class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-item">
          <img class="d-block w-100" alt="Third slide"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-control-prev" href="#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carouselIndicators" role="button" data-slide="prev">
        <span class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-control-next" href="#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carouselIndicators" role="button" data-slide="next">
        <span class="trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
    <!-- コントロールボタン -->
    <div class="control-buttons my-3">
      <input type="button" class="btn btn-primary start-slide" value="開始">
      <input type="button" class="btn btn-primary pause-slide" value="停止">
      <input type="button" class="btn btn-primary prev-slide" value="前へ">
      <input type="button" class="btn btn-primary next-slide" value="次へ">
      <input type="button" class="btn btn-primary slide-first" value="第1スライドに">
      <input type="button" class="btn btn-primary slide-second" value="第2スライドに">
      <input type="button" class="btn btn-primary slide-third" value="第3スライドに">
    </div>
  </div>
  <script>
    $(function () {
      // 循環開始
      $(".start-slide").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel('cycle');
      });
      // 一時停止
      $(".pause-slide").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel('pause');
      });
      // 前へ循環
      $(".prev-slide").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel('prev');
      });
      // 次へ循環
      $(".next-slide").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel('next');
      });
      // 特定のフレームに循環
      $(".slide-first").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel(0);
      });
      $(".slide-second").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel(1);
      });
      $(".slide-third").on('click', function () {
        $("#trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel").trap5/index.php?strkey=carousel" class="bg-warning text-dark">carousel(2);
      });
    });
  </script>

データ属性でオプションを指定：data-interval

  <div class="container">
    <!-- intervalの設定 -->
    <div id="carouselExample" class="carousel slide" data-ride="carousel" trap5/index.php?strkey=data-interval" class="bg-warning text-dark">data-interval="3000">
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-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-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>

モーダル 表示ボタン、外枠（非表示）、本体、コンテンツ、閉じるボタンの５点セット

  <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
  <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-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          モーダルの本文が入ります。
        </div>
        <div class="modal-footer">
          <!-- 「data-dismiss=”modal”」が閉じる動作 -->
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal trap5/index.php?strkey=fade" class="bg-warning text-dark">fade" 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-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

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

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <div 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 ml-auto">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-4、ml-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 ml-auto">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-3、ml-auto</div>
                <div class="trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-2 ml-auto">trap5/index.php?strkey=col" class="bg-warning text-dark">col-md-2、ml-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="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-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
    <!-- モーダル -->
    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体trap5/index.php?strkey=modal-lg" class="bg-warning text-dark">modal-lg -->
      <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-dismiss="modal" aria-label="Close"> <span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <!-- モーダルのフッター -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

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

    <button type="button" class="btn btn-secondary" data-toggle="modal"
      data-target="#smallModal">モーダルボタン（trap5/index.php?strkey=modal-sm" class="bg-warning text-dark">modal-sm）</button>
    <!-- モーダル -->
    <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-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

モーダル：JavaScript使用

    <div class="container">
      <p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
      <!-- モーダル -->
      <div class="modal" id="myModal" 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-dismiss="modal" aria-label="Close"> <span
                  aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">モーダルの本文</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('.btn').click(function () {
        $('#myModal').modal('show');
      });
    </script>

モーダルを閉じるときにメッセージを出す：JavaScript使用

    <div class="container">
      <p class="text-center my-5"><button type="button" class="btn btn-primary" data-toggle="modal"
          data-target="#myModal">モーダルボタン</button></p>
      <div class="modal" id="myModal" 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-dismiss="modal" aria-label="Close"> <span
                  aria-hidden="true">×</span> </button>
            </div>
            <div class="modal-body">モーダルの本文が入ります。</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('#myModal').on('hide.bs.modal', function (e) {
        if (!confirm('閉じてよろしいですか？')) {
          e.preventDefault();
        }
      });
    </script>
</body>
</html>