p

bootstrap5.css

bootstrap5.css
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
bootstrap5.css
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
bootstrap5.css
body {
  /* bodyの最初の設定 */
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
bootstrap5.css
[tabindex="-1"]:focus:not(:focus-visible) {
  /* フォーカス状態になった時の輪郭線を指定する */
  outline: 0 !important;
}
bootstrap5.css
hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}
bootstrap5.css
hr:not([size]) {
  height: 1px;
}
bootstrap5.css
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 2.5rem;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 2rem;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.75rem;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.5rem;
  }
}
bootstrap5.css
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
bootstrap5.css
abbr[title],
abbr[data-bs-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
bootstrap5.css
ol,
ul {
  padding-left: 2rem;
}
bootstrap5.css
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
bootstrap5.css
mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}
bootstrap5.css
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
bootstrap5.css
sup {
  top: -0.5em;
}
bootstrap5.css
pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
  direction: ltr /* rtl:ignore */;
  unicode-bidi: bidi-override;
}
bootstrap5.css
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
bootstrap5.css
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
bootstrap5.css
code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}
bootstrap5.css
kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}
bootstrap5.css
kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}
bootstrap5.css
table {
  caption-side: bottom;
  border-collapse: collapse;
}
bootstrap5.css
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}
bootstrap5.css
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
bootstrap5.css
label {
  display: inline-block;
}
bootstrap5.css
button:focus {
  /* buttonにフォーカスが当たったら */
  outline: dotted 1px;
  outline: -webkit-focus-ring-color auto 5px;
}
bootstrap5.css
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
bootstrap5.css
[role="button"] {
  cursor: pointer;
}
bootstrap5.css
select {
  word-wrap: normal;
}
bootstrap5.css
[list]::-webkit-calendar-picker-indicator {
  display: none;
}
bootstrap5.css
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
bootstrap5.css
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
bootstrap5.css
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
bootstrap5.css
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
bootstrap5.css
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
bootstrap5.css
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
bootstrap5.css
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}
bootstrap5.css
::-webkit-inner-spin-button {
  height: auto;
}
bootstrap5.css
[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}
bootstrap5.css
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
bootstrap5.css
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
bootstrap5.css
::-webkit-color-swatch-wrapper {
  padding: 0;
}
bootstrap5.css
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
bootstrap5.css
output {
  display: inline-block;
}
bootstrap5.css
summary {
  display: list-item;
  cursor: pointer;
}
bootstrap5.css
progress {
  vertical-align: baseline;
}
bootstrap5.css
[hidden] {
  display: none !important;
}
bootstrap5.css
.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}
bootstrap5.css
.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}
bootstrap5.css
.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}
bootstrap5.css
.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}
bootstrap5.css
.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}
bootstrap5.css
.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}
bootstrap5.css
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
bootstrap5.css
.list-inline {
  padding-left: 0;
  list-style: none;
}
bootstrap5.css
.list-inline-item {
  display: inline-block;
}
bootstrap5.css
.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}
bootstrap5.css
.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
bootstrap5.css
.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}
bootstrap5.css
.figure {
  display: inline-block;
}
bootstrap5.css
.figure-caption {
  font-size: 0.875em;
  color: #6c757d;
}
bootstrap5.css
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}
bootstrap5.css
@media (min-width: 576px) {
  .container-sm,
  .container {
    max-width: 540px;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1140px;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1320px;
  }
}
bootstrap5.css
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
bootstrap5.css
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}
bootstrap5.css
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
bootstrap5.css
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
}
bootstrap5.css
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border-bottom-width: 1px;
}
bootstrap5.css
.caption-top {
  caption-side: top;
}
bootstrap5.css
.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}
bootstrap5.css
.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
bootstrap5.css
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}
bootstrap5.css
.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
bootstrap5.css
.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
bootstrap5.css
.table-primary {
  --bs-table-bg: #cfe2ff;
  --bs-table-striped-bg: #c5d7f2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #bacbe6;
}
bootstrap5.css
.table-secondary {
  --bs-table-bg: #e2e3e5;
  --bs-table-striped-bg: #d7d8da;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1d2d4;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #cbccce;
}
bootstrap5.css
.table-success {
  --bs-table-bg: #d1e7dd;
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #bcd0c7;
}
bootstrap5.css
.table-info {
  --bs-table-bg: #cff4fc;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #badce3;
}
bootstrap5.css
.table-warning {
  --bs-table-bg: #fff3cd;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #e6dbb9;
}
bootstrap5.css
.table-danger {
  --bs-table-bg: #f8d7da;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #dfc2c4;
}
bootstrap5.css
.table-light {
  --bs-table-bg: #f8f9fa;
  --bs-table-striped-bg: #ecedee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #dfe0e1;
}
bootstrap5.css
.table-dark {
  --bs-table-bg: #212529;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: #fff;
  border-color: #373b3e;
}
bootstrap5.css
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
bootstrap5.css
@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
bootstrap5.css
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
bootstrap5.css
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
bootstrap5.css
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
bootstrap5.css
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
bootstrap5.css
.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}
bootstrap5.css
.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
}
bootstrap5.css
.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
}
bootstrap5.css
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #6c757d;
}
bootstrap5.css
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
bootstrap5.css
.form-control[type="file"] {
  overflow: hidden;
}
bootstrap5.css
.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
bootstrap5.css
.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
bootstrap5.css
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
bootstrap5.css
.form-control::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: #dde0e3;
}
bootstrap5.css
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
bootstrap5.css
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
bootstrap5.css
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
bootstrap5.css
textarea.form-control {
  min-height: calc(1.5em + 0.75rem + 2px);
}
bootstrap5.css
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
}
bootstrap5.css
.form-control-color {
  max-width: 3rem;
  height: auto;
  padding: 0.375rem;
}
bootstrap5.css
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
bootstrap5.css
.form-select[multiple],
.form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
bootstrap5.css
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #212529;
}
bootstrap5.css
.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}
bootstrap5.css
.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}
bootstrap5.css
.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
bootstrap5.css
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}
bootstrap5.css
.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-check-input {
    transition: none;
  }
}
bootstrap5.css
.form-check-input[type="checkbox"] {
  border-radius: 0.25em;
}
bootstrap5.css
.form-check-input[type="radio"] {
  border-radius: 50%;
}
bootstrap5.css
.form-check-input:active {
  filter: brightness(90%);
}
bootstrap5.css
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
bootstrap5.css
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
bootstrap5.css
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}
bootstrap5.css
.form-switch {
  padding-left: 2.5em;
}
bootstrap5.css
.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}
bootstrap5.css
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
bootstrap5.css
.btn-check[disabled] + .btn,
.btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}
bootstrap5.css
.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
bootstrap5.css
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
bootstrap5.css
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
bootstrap5.css
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.form-range:disabled {
  pointer-events: none;
}
bootstrap5.css
.form-floating {
  position: relative;
}
bootstrap5.css
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}
bootstrap5.css
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
bootstrap5.css
.form-floating > .form-control::-webkit-input-placeholder {
  color: transparent;
}
bootstrap5.css
.form-floating > .form-control::-moz-placeholder {
  color: transparent;
}
bootstrap5.css
.form-floating > .form-control::placeholder {
  color: transparent;
}
bootstrap5.css
.form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
bootstrap5.css
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
bootstrap5.css
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
bootstrap5.css
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
bootstrap5.css
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
bootstrap5.css
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
bootstrap5.css
.input-group .btn {
  position: relative;
  z-index: 2;
}
bootstrap5.css
.input-group .btn:focus {
  z-index: 3;
}
bootstrap5.css
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 1.75rem;
}
bootstrap5.css
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #198754;
}
bootstrap5.css
.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(25, 135, 84, 0.9);
  border-radius: 0.25rem;
}
bootstrap5.css
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.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-check-input:valid,
.form-check-input.is-valid {
  border-color: #198754;
}
bootstrap5.css
.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: #198754;
}
bootstrap5.css
.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
bootstrap5.css
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: #198754;
}
bootstrap5.css
.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
bootstrap5.css
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}
bootstrap5.css
.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}
bootstrap5.css
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.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-check-input:invalid,
.form-check-input.is-invalid {
  border-color: #dc3545;
}
bootstrap5.css
.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: #dc3545;
}
bootstrap5.css
.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}
bootstrap5.css
.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}
bootstrap5.css
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
bootstrap5.css
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  pointer-events: none;
  /* 透明度は、0.0(完全に透明)~1.0(完全に不透明) */
  /* 文字を薄くしたいときに利用する */
  opacity: 0.65;
}
bootstrap5.css
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
bootstrap5.css
.btn-check:focus + .btn-primary,
.btn-primary:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}
bootstrap5.css
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
bootstrap5.css
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #565e64;
  border-color: #51585e;
}
bootstrap5.css
.btn-check:checked + .btn-secondary:focus,
.btn-check:active + .btn-secondary:focus,
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
}
bootstrap5.css
.btn-check:checked + .btn-success:focus,
.btn-check:active + .btn-success:focus,
.btn-success:active:focus,
.btn-success.active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-info,
.btn-check:active + .btn-info,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  color: #000;
  background-color: #3dd5f3;
  border-color: #25cff2;
}
bootstrap5.css
.btn-check:checked + .btn-info:focus,
.btn-check:active + .btn-info:focus,
.btn-info:active:focus,
.btn-info.active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
  color: #000;
  background-color: #ffcd39;
  border-color: #ffc720;
}
bootstrap5.css
.btn-check:checked + .btn-warning:focus,
.btn-check:active + .btn-warning:focus,
.btn-warning:active:focus,
.btn-warning.active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #b02a37;
  border-color: #a52834;
}
bootstrap5.css
.btn-check:checked + .btn-danger:focus,
.btn-check:active + .btn-danger:focus,
.btn-danger:active:focus,
.btn-danger.active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-light,
.btn-check:active + .btn-light,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
  color: #000;
  background-color: #f9fafb;
  border-color: #f9fafb;
}
bootstrap5.css
.btn-check:checked + .btn-light:focus,
.btn-check:active + .btn-light:focus,
.btn-light:active:focus,
.btn-light.active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-dark,
.btn-check:active + .btn-dark,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1a1e21;
  border-color: #191c1f;
}
bootstrap5.css
.btn-check:checked + .btn-dark:focus,
.btn-check:active + .btn-dark:focus,
.btn-dark:active:focus,
.btn-dark.active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
bootstrap5.css
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
bootstrap5.css
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
bootstrap5.css
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: #0d6efd;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-check:checked + .btn-outline-secondary:focus,
.btn-check:active + .btn-outline-secondary:focus,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5);
}
bootstrap5.css
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: #6c757d;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success.dropdown-toggle.show {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
bootstrap5.css
.btn-check:checked + .btn-outline-success:focus,
.btn-check:active + .btn-outline-success:focus,
.btn-outline-success:active:focus,
.btn-outline-success.active:focus,
.btn-outline-success.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}
bootstrap5.css
.btn-outline-success:disabled,
.btn-outline-success.disabled {
  color: #198754;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-info,
.btn-check:active + .btn-outline-info,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info.dropdown-toggle.show {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}
bootstrap5.css
.btn-check:checked + .btn-outline-info:focus,
.btn-check:active + .btn-outline-info:focus,
.btn-outline-info:active:focus,
.btn-outline-info.active:focus,
.btn-outline-info.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}
bootstrap5.css
.btn-outline-info:disabled,
.btn-outline-info.disabled {
  color: #0dcaf0;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.dropdown-toggle.show {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-check:checked + .btn-outline-warning:focus,
.btn-check:active + .btn-outline-warning:focus,
.btn-outline-warning:active:focus,
.btn-outline-warning.active:focus,
.btn-outline-warning.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  color: #ffc107;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-danger,
.btn-check:active + .btn-outline-danger,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger.dropdown-toggle.show {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap5.css
.btn-check:checked + .btn-outline-danger:focus,
.btn-check:active + .btn-outline-danger:focus,
.btn-outline-danger:active:focus,
.btn-outline-danger.active:focus,
.btn-outline-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}
bootstrap5.css
.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
  color: #dc3545;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-light,
.btn-check:active + .btn-outline-light,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap5.css
.btn-check:checked + .btn-outline-light:focus,
.btn-check:active + .btn-outline-light:focus,
.btn-outline-light:active:focus,
.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}
bootstrap5.css
.btn-outline-light:disabled,
.btn-outline-light.disabled {
  color: #f8f9fa;
  background-color: transparent;
}
bootstrap5.css
.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark,
.btn-outline-dark:active,
.btn-outline-dark.active,
.btn-outline-dark.dropdown-toggle.show {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
bootstrap5.css
.btn-check:checked + .btn-outline-dark:focus,
.btn-check:active + .btn-outline-dark:focus,
.btn-outline-dark:active:focus,
.btn-outline-dark.active:focus,
.btn-outline-dark.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}
bootstrap5.css
.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
  color: #212529;
  background-color: transparent;
}
bootstrap5.css
.btn-lg,
.btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
bootstrap5.css
.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
bootstrap5.css
.fade {
  transition: opacity 0.15s linear;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
bootstrap5.css
.fade:not(.show) {
  opacity: 0;
}
bootstrap5.css
.collapse:not(.show) {
  display: none;
}
bootstrap5.css
.collapsing {
  /* はみ出た部分は、非表示にする */
  /* あえて一部表示で、それ以外は非表示という使い方もする */
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
bootstrap5.css
.dropup,
.dropend,
.dropdown,
.dropstart {
  position: relative;
}
bootstrap5.css
.dropdown-toggle {
  white-space: nowrap;
}
bootstrap5.css
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
bootstrap5.css
.dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
bootstrap5.css
.dropdown-menu[style] {
  right: auto !important;
}
bootstrap5.css
.dropdown-menu-start {
  /* bootstrap4:dropdown-menu-left */
  --bs-position: start;
  right: auto /* rtl:ignore */;
  left: 0 /* rtl:ignore */;
}
bootstrap5.css
.dropdown-menu-end {
  /* bootstrap4:dropdown-menu-right */
  --bs-position: end;
  right: 0 /* rtl:ignore */;
  left: auto /* rtl:ignore */;
}
bootstrap5.css
@media (min-width: 576px) {
  /* bootstrap4:dropdown-menu-sm-left */
  .dropdown-menu-sm-start {
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-sm-end {
    /* bootstrap4:dropdown-menu-sm-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    /* bootstrap4:dropdown-menu-md-left */
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-md-end {
    /* bootstrap4:dropdown-menu-md-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    /* bootstrap4:dropdown-menu-lg-left */
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-lg-end {
    /* bootstrap4:dropdown-menu-lg-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    /* bootstrap4:dropdown-menu-xl-left */
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-xl-end {
    /* bootstrap4:dropdown-menu-xl-right */
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  /* bootstrap5で追加 */
  .dropdown-menu-xxl-start {
    --bs-position: start;
    right: auto /* rtl:ignore */;
    left: 0 /* rtl:ignore */;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
    right: 0 /* rtl:ignore */;
    left: auto /* rtl:ignore */;
  }
}
bootstrap5.css
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
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
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropend .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}
bootstrap5.css
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
bootstrap5.css
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}
bootstrap5.css
.dropstart .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}
bootstrap5.css
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
bootstrap5.css
.dropstart .dropdown-toggle::after {
  display: none;
}
bootstrap5.css
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
bootstrap5.css
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}
bootstrap5.css
.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
bootstrap5.css
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.dropdown-item:hover,
.dropdown-item:focus {
  color: #1e2125;
  background-color: #f8f9fa;
}
bootstrap5.css
.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #0d6efd;
}
bootstrap5.css
.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
bootstrap5.css
.dropdown-menu.show {
  display: block;
}
bootstrap5.css
.dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}
bootstrap5.css
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1rem;
  color: #212529;
}
bootstrap5.css
.dropdown-menu-dark {
  color: #dee2e6;
  background-color: #343a40;
  border-color: rgba(0, 0, 0, 0.15);
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item {
  color: #dee2e6;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active {
  color: #fff;
  background-color: #0d6efd;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item.disabled,
.dropdown-menu-dark .dropdown-item:disabled {
  color: #adb5bd;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.15);
}
bootstrap5.css
.dropdown-menu-dark .dropdown-item-text {
  color: #dee2e6;
}
bootstrap5.css
.dropdown-menu-dark .dropdown-header {
  color: #adb5bd;
}
bootstrap5.css
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
bootstrap5.css
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
bootstrap5.css
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}
bootstrap5.css
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
bootstrap5.css
.btn-toolbar .input-group {
  width: auto;
}
bootstrap5.css
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}
bootstrap5.css
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.btn-group > .btn:nth-child(n + 3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
bootstrap5.css
.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
bootstrap5.css
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}
bootstrap5.css
.btn-sm + .dropdown-toggle-split,
.btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}
bootstrap5.css
.btn-lg + .dropdown-toggle-split,
.btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
bootstrap5.css
.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
bootstrap5.css
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
bootstrap5.css
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}
bootstrap5.css
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.btn-group-vertical > .btn ~ .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap5.css
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
bootstrap5.css
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
bootstrap5.css
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
bootstrap5.css
.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
bootstrap5.css
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
bootstrap5.css
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #0d6efd;
}
bootstrap5.css
.tab-content > .tab-pane {
  display: none;
}
bootstrap5.css
.tab-content > .active {
  display: block;
}
bootstrap5.css
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
bootstrap5.css
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
bootstrap5.css
.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap5.css
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
.navbar-nav .dropdown-menu {
  position: static;
}
bootstrap5.css
.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-collapse {
  align-items: center;
  width: 100%;
}
bootstrap5.css
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
bootstrap5.css
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
bootstrap5.css
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
bootstrap5.css
.navbar-expand .navbar-nav {
  flex-direction: row;
}
bootstrap5.css
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
bootstrap5.css
.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
bootstrap5.css
.navbar-expand .navbar-collapse {
  display: flex !important;
}
bootstrap5.css
.navbar-expand .navbar-toggler {
  display: none;
}
bootstrap5.css
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
bootstrap5.css
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
bootstrap5.css
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}
bootstrap5.css
.card-body {
  flex: 1 1 auto;
  padding: 1rem 1rem;
}
bootstrap5.css
.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
}
bootstrap5.css
.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
bootstrap5.css
.card-footer {
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
bootstrap5.css
.card-header-pills {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
bootstrap5.css
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}
bootstrap5.css
.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card-group > .card {
  margin-bottom: 0.75rem;
}
bootstrap5.css
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}
bootstrap5.css
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
bootstrap5.css
.accordion-button.collapsed {
  border-bottom-width: 0;
}
bootstrap5.css
.accordion-button:not(.collapsed) {
  color: #0c63e4;
  background-color: #e7f1ff;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
bootstrap5.css
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-width: 1px;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap5.css
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-width: 1px;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap5.css
.accordion-collapse {
  border: solid rgba(0, 0, 0, 0.125);
  border-width: 0 1px;
}
bootstrap5.css
.accordion-body {
  padding: 1rem 1.25rem;
}
bootstrap5.css
.accordion-flush .accordion-collapse {
  border-width: 0;
}
bootstrap5.css
.accordion-flush .accordion-item:first-of-type .accordion-button {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-width: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
  margin-bottom: 1rem;
  list-style: none;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #6c757d;
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
bootstrap5.css
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}
bootstrap5.css
.page-link {
  position: relative;
  display: block;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
bootstrap5.css
.page-link:hover {
  z-index: 2;
  color: #0a58ca;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
bootstrap5.css
.page-link:focus {
  z-index: 3;
  color: #0a58ca;
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
bootstrap5.css
.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
bootstrap5.css
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}
bootstrap5.css
.page-link {
  padding: 0.375rem 0.75rem;
}
bootstrap5.css
.page-item:first-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap5.css
.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
bootstrap5.css
.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}
bootstrap5.css
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
bootstrap5.css
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
bootstrap5.css
.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
bootstrap5.css
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
bootstrap5.css
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
bootstrap5.css
.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
bootstrap5.css
.badge:empty {
  display: none;
}
bootstrap5.css
.btn .badge {
  position: relative;
  top: -1px;
}
bootstrap5.css
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap5.css
.alert-dismissible {
  padding-right: 3rem;
}
bootstrap5.css
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}
bootstrap5.css
.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
bootstrap5.css
.alert-primary .alert-link {
  color: #06357a;
}
bootstrap5.css
@-webkit-keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
bootstrap5.css
@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
bootstrap5.css
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}
bootstrap5.css
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #0d6efd;
  transition: width 0.6s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
bootstrap5.css
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
bootstrap5.css
.progress-bar-animated {
  -webkit-animation: 1s linear infinite progress-bar-stripes;
  animation: 1s linear infinite progress-bar-stripes;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}
bootstrap5.css
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}
bootstrap5.css
.list-group-item-action {
  /* 幅100%にして色を付けて、テキストの位置は継承する */
  /* aやbuttonのインラインをリストにするために使う */
  width: 100%;
  color: #495057;
  text-align: inherit;
}
bootstrap5.css
.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}
bootstrap5.css
.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}
bootstrap5.css
.list-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
bootstrap5.css
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
bootstrap5.css
.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}
bootstrap5.css
.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
bootstrap5.css
.list-group-item + .list-group-item {
  border-top-width: 0;
}
bootstrap5.css
.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}
bootstrap5.css
.list-group-horizontal {
  flex-direction: row;
}
bootstrap5.css
.list-group-horizontal > .list-group-item:first-child {
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}
bootstrap5.css
.list-group-horizontal > .list-group-item:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
bootstrap5.css
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: 1px;
  border-left-width: 0;
}
bootstrap5.css
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: -1px;
  border-left-width: 1px;
}
bootstrap5.css
@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }
  .list-group-horizontal-xxl > .list-group-item:first-child {
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-left-width: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: -1px;
    border-left-width: 1px;
  }
}
bootstrap5.css
.list-group-flush {
  border-radius: 0;
}
bootstrap5.css
.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}
bootstrap5.css
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}
bootstrap5.css
.list-group-item-primary {
  color: #084298;
  background-color: #cfe2ff;
}
bootstrap5.css
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #084298;
  background-color: #bacbe6;
}
bootstrap5.css
.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #084298;
  border-color: #084298;
}
bootstrap5.css
.list-group-item-secondary {
  color: #41464b;
  background-color: #e2e3e5;
}
bootstrap5.css
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #41464b;
  background-color: #cbccce;
}
bootstrap5.css
.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #41464b;
  border-color: #41464b;
}
bootstrap5.css
.list-group-item-success {
  color: #0f5132;
  background-color: #d1e7dd;
}
bootstrap5.css
.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #0f5132;
  background-color: #bcd0c7;
}
bootstrap5.css
.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #0f5132;
  border-color: #0f5132;
}
bootstrap5.css
.list-group-item-info {
  color: #055160;
  background-color: #cff4fc;
}
bootstrap5.css
.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #055160;
  background-color: #badce3;
}
bootstrap5.css
.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #055160;
  border-color: #055160;
}
bootstrap5.css
.list-group-item-warning {
  color: #664d03;
  background-color: #fff3cd;
}
bootstrap5.css
.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #664d03;
  background-color: #e6dbb9;
}
bootstrap5.css
.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #664d03;
  border-color: #664d03;
}
bootstrap5.css
.list-group-item-danger {
  color: #842029;
  background-color: #f8d7da;
}
bootstrap5.css
.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #842029;
  background-color: #dfc2c4;
}
bootstrap5.css
.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #842029;
  border-color: #842029;
}
bootstrap5.css
.list-group-item-light {
  color: #636464;
  background-color: #fefefe;
}
bootstrap5.css
.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #636464;
  background-color: #e5e5e5;
}
bootstrap5.css
.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #636464;
  border-color: #636464;
}
bootstrap5.css
.list-group-item-dark {
  color: #141619;
  background-color: #d3d3d4;
}
bootstrap5.css
.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #141619;
  background-color: #bebebf;
}
bootstrap5.css
.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #141619;
  border-color: #141619;
}
bootstrap5.css
.btn-close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
bootstrap5.css
.btn-close:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
bootstrap5.css
.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}
bootstrap5.css
.toast {
  width: 350px;
  max-width: 100%;
  font-size: 0.875rem;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
bootstrap5.css
.toast:not(.showing):not(.show) {
  opacity: 0;
}
bootstrap5.css
.toast.hide {
  display: none;
}
bootstrap5.css
.toast-container {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
bootstrap5.css
.toast-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.toast-body {
  padding: 0.75rem;
}
bootstrap5.css
.modal-open {
  overflow: hidden;
}
bootstrap5.css
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
bootstrap5.css
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
bootstrap5.css
.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
bootstrap5.css
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
bootstrap5.css
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
bootstrap5.css
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}
bootstrap5.css
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
bootstrap5.css
.modal-backdrop.fade {
  opacity: 0;
}
bootstrap5.css
.modal-backdrop.show {
  opacity: 0.5;
}
bootstrap5.css
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}
bootstrap5.css
.modal-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}
bootstrap5.css
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}
bootstrap5.css
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}
bootstrap5.css
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
bootstrap5.css
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}
bootstrap5.css
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
}
bootstrap5.css
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
}
bootstrap5.css
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
}
bootstrap5.css
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
}
bootstrap5.css
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
}
bootstrap5.css
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}
bootstrap5.css
.tooltip.show {
  opacity: 0.9;
}
bootstrap5.css
.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}
bootstrap5.css
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.bs-tooltip-top,
.bs-tooltip-auto[data-popper-placement^="top"] {
  padding: 0.4rem 0;
}
bootstrap5.css
.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
  bottom: 0;
}
bootstrap5.css
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}
bootstrap5.css
.bs-tooltip-end,
.bs-tooltip-auto[data-popper-placement^="right"] {
  padding: 0 0.4rem;
}
bootstrap5.css
.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}
bootstrap5.css
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  right: -1px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}
bootstrap5.css
.bs-tooltip-bottom,
.bs-tooltip-auto[data-popper-placement^="bottom"] {
  padding: 0.4rem 0;
}
bootstrap5.css
.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
  top: 0;
}
bootstrap5.css
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}
bootstrap5.css
.bs-tooltip-start,
.bs-tooltip-auto[data-popper-placement^="left"] {
  /* bootstrap4:bs-tooltip-right */
  padding: 0 0.4rem;
}
bootstrap5.css
.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}
bootstrap5.css
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}
bootstrap5.css
.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}
bootstrap5.css
.popover {
  position: absolute;
  top: 0;
  left: 0 /* rtl:ignore */;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}
bootstrap5.css
.popover .popover-arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}
bootstrap5.css
.popover .popover-arrow::before,
.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.bs-popover-top,
.bs-popover-auto[data-popper-placement^="top"] {
  margin-bottom: 0.5rem !important;
}
bootstrap5.css
.bs-popover-top > .popover-arrow,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow {
  bottom: calc(-0.5rem - 1px);
}
bootstrap5.css
.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}
bootstrap5.css
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}
bootstrap5.css
.bs-popover-end,
.bs-popover-auto[data-popper-placement^="right"] {
  margin-left: 0.5rem !important;
}
bootstrap5.css
.bs-popover-end > .popover-arrow,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}
bootstrap5.css
.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
  left: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: rgba(0, 0, 0, 0.25);
}
bootstrap5.css
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
  left: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-right-color: #fff;
}
bootstrap5.css
.bs-popover-bottom,
.bs-popover-auto[data-popper-placement^="bottom"] {
  margin-top: 0.5rem !important;
}
bootstrap5.css
.bs-popover-bottom > .popover-arrow,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow {
  top: calc(-0.5rem - 1px);
}
bootstrap5.css
.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}
bootstrap5.css
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}
bootstrap5.css
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[data-popper-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f0f0f0;
}
bootstrap5.css
.bs-popover-start,
.bs-popover-auto[data-popper-placement^="left"] {
  /* bootstrap4:bs-popover-left */
  margin-right: 0.5rem !important;
}
bootstrap5.css
.bs-popover-start > .popover-arrow,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}
bootstrap5.css
.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
  right: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: rgba(0, 0, 0, 0.25);
}
bootstrap5.css
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}
bootstrap5.css
.popover-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f0f0f0;
  border-bottom: 1px solid #d8d8d8;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}
bootstrap5.css
.popover-header:empty {
  display: none;
}
bootstrap5.css
.popover-body {
  padding: 1rem 1rem;
  color: #212529;
}
bootstrap5.css
.carousel {
  position: relative;
}
bootstrap5.css
.carousel.pointer-event {
  touch-action: pan-y;
}
bootstrap5.css
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
bootstrap5.css
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}
bootstrap5.css
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
bootstrap5.css
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}
bootstrap5.css
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}
bootstrap5.css
/* rtl:end:ignore */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
bootstrap5.css
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
bootstrap5.css
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}
bootstrap5.css
.carousel-control-prev {
  left: 0;
}
bootstrap5.css
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}
bootstrap5.css
/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
}
bootstrap5.css
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}
bootstrap5.css
.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}
bootstrap5.css
.carousel-indicators .active {
  opacity: 1;
}
bootstrap5.css
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}
bootstrap5.css
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
bootstrap5.css
.carousel-dark .carousel-caption {
  color: #000;
}
bootstrap5.css
@-webkit-keyframes spinner-border {
  /* アニメーションの動きを指定する */
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
bootstrap5.css
@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
bootstrap5.css
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
}
bootstrap5.css
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}
bootstrap5.css
@-webkit-keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
bootstrap5.css
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
bootstrap5.css
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: 0.75s linear infinite spinner-grow;
  animation: 0.75s linear infinite spinner-grow;
}
bootstrap5.css
.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
}
bootstrap5.css
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
bootstrap5.css
.link-primary {
  color: #0d6efd;
}
bootstrap5.css
.link-primary:hover,
.link-primary:focus {
  color: #0a58ca;
}
bootstrap5.css
.ratio {
  position: relative;
  width: 100%;
}
bootstrap5.css
.ratio::before {
  display: block;
  padding-top: var(--aspect-ratio);
  content: "";
}
bootstrap5.css
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
bootstrap5.css
.ratio-1x1 {
  --aspect-ratio: 100%;
}
bootstrap5.css
.ratio-4x3 {
  --aspect-ratio: calc(3 / 4 * 100%);
}
bootstrap5.css
.ratio-16x9 {
  --aspect-ratio: calc(9 / 16 * 100%);
}
bootstrap5.css
.ratio-21x9 {
  --aspect-ratio: calc(9 / 21 * 100%);
}
bootstrap5.css
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
bootstrap5.css
.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
bootstrap5.css
.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}
bootstrap5.css
@media (min-width: 576px) {
  .sticky-sm-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .sticky-lg-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
bootstrap5.css
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
bootstrap5.css
.visually-hidden,
.visually-hidden-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
bootstrap5.css
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
bootstrap5.css
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
bootstrap5.css
.align-baseline {
  vertical-align: baseline !important;
}
bootstrap5.css
.align-top {
  vertical-align: top !important;
}
bootstrap5.css
.align-middle {
  vertical-align: middle !important;
}
bootstrap5.css
.align-bottom {
  vertical-align: bottom !important;
}
bootstrap5.css
.align-text-bottom {
  vertical-align: text-bottom !important;
}
bootstrap5.css
.align-text-top {
  vertical-align: text-top !important;
}
bootstrap5.css
.float-start {
  float: left !important;
}
bootstrap5.css
.float-end {
  float: right !important;
}
bootstrap5.css
.float-none {
  float: none !important;
}
bootstrap5.css
.overflow-auto {
  overflow: auto !important;
}
bootstrap5.css
.overflow-hidden {
  overflow: hidden !important;
}
bootstrap5.css
.overflow-visible {
  overflow: visible !important;
}
bootstrap5.css
.overflow-scroll {
  overflow: scroll !important;
}
bootstrap5.css
.d-inline {
  display: inline !important;
}
bootstrap5.css
.d-inline-block {
  display: inline-block !important;
}
bootstrap5.css
.d-block {
  display: block !important;
}
bootstrap5.css
.d-grid {
  display: grid !important;
}
bootstrap5.css
.d-table {
  display: table !important;
}
bootstrap5.css
.d-table-row {
  display: table-row !important;
}
bootstrap5.css
.d-table-cell {
  display: table-cell !important;
}
bootstrap5.css
.d-flex {
  display: flex !important;
}
bootstrap5.css
.d-inline-flex {
  display: inline-flex !important;
}
bootstrap5.css
.d-none {
  display: none !important;
}
bootstrap5.css
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
bootstrap5.css
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
bootstrap5.css
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
bootstrap5.css
.shadow-none {
  box-shadow: none !important;
}
bootstrap5.css
.position-static {
  position: static !important;
}
bootstrap5.css
.position-relative {
  position: relative !important;
}
bootstrap5.css
.position-absolute {
  position: absolute !important;
}
bootstrap5.css
.position-fixed {
  position: fixed !important;
}
bootstrap5.css
.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
bootstrap5.css
.top-0 {
  top: 0 !important;
}
bootstrap5.css
.top-50 {
  top: 50% !important;
}
bootstrap5.css
.top-100 {
  top: 100% !important;
}
bootstrap5.css
.bottom-0 {
  bottom: 0 !important;
}
bootstrap5.css
.bottom-50 {
  bottom: 50% !important;
}
bootstrap5.css
.bottom-100 {
  bottom: 100% !important;
}
bootstrap5.css
.start-0 {
  left: 0 !important;
}
bootstrap5.css
.start-50 {
  left: 50% !important;
}
bootstrap5.css
.start-100 {
  left: 100% !important;
}
bootstrap5.css
.end-0 {
  right: 0 !important;
}
bootstrap5.css
.end-50 {
  right: 50% !important;
}
bootstrap5.css
.end-100 {
  right: 100% !important;
}
bootstrap5.css
.translate-middle {
  transform: translate(-50%, -50%) !important;
}
bootstrap5.css
.translate-middle-x {
  transform: translateX(-50%) !important;
}
bootstrap5.css
.translate-middle-y {
  transform: translateY(-50%) !important;
}
bootstrap5.css
.border {
  border: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-0 {
  border: 0 !important;
}
bootstrap5.css
.border-top {
  border-top: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-top-0 {
  border-top: 0 !important;
}
bootstrap5.css
.border-end {
  border-right: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-end-0 {
  border-right: 0 !important;
}
bootstrap5.css
.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-bottom-0 {
  border-bottom: 0 !important;
}
bootstrap5.css
.border-start {
  border-left: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-start-0 {
  border-left: 0 !important;
}
bootstrap5.css
.border-primary {
  border-color: #0d6efd !important;
}
bootstrap5.css
.border-secondary {
  border-color: #6c757d !important;
}
bootstrap5.css
.border-success {
  border-color: #198754 !important;
}
bootstrap5.css
.border-info {
  border-color: #0dcaf0 !important;
}
bootstrap5.css
.border-warning {
  border-color: #ffc107 !important;
}
bootstrap5.css
.border-danger {
  border-color: #dc3545 !important;
}
bootstrap5.css
.border-light {
  border-color: #f8f9fa !important;
}
bootstrap5.css
.border-dark {
  border-color: #212529 !important;
}
bootstrap5.css
.border-white {
  border-color: #fff !important;
}
bootstrap5.css
.border-0 {
  border-width: 0 !important;
}
bootstrap5.css
.border-1 {
  border-width: 1px !important;
}
bootstrap5.css
.border-2 {
  border-width: 2px !important;
}
bootstrap5.css
.border-3 {
  border-width: 3px !important;
}
bootstrap5.css
.border-4 {
  border-width: 4px !important;
}
bootstrap5.css
.border-5 {
  border-width: 5px !important;
}
bootstrap5.css
.w-25 {
  width: 25% !important;
}
bootstrap5.css
.w-50 {
  width: 50% !important;
}
bootstrap5.css
.w-75 {
  width: 75% !important;
}
bootstrap5.css
.w-100 {
  width: 100% !important;
}
bootstrap5.css
.w-auto {
  width: auto !important;
}
bootstrap5.css
.mw-100 {
  max-width: 100% !important;
}
bootstrap5.css
.vw-100 {
  width: 100vw !important;
}
bootstrap5.css
.min-vw-100 {
  min-width: 100vw !important;
}
bootstrap5.css
.h-25 {
  height: 25% !important;
}
bootstrap5.css
.h-50 {
  height: 50% !important;
}
bootstrap5.css
.h-75 {
  height: 75% !important;
}
bootstrap5.css
.h-100 {
  height: 100% !important;
}
bootstrap5.css
.h-auto {
  height: auto !important;
}
bootstrap5.css
.mh-100 {
  max-height: 100% !important;
}
bootstrap5.css
.vh-100 {
  height: 100vh !important;
}
bootstrap5.css
.min-vh-100 {
  min-height: 100vh !important;
}
bootstrap5.css
.flex-fill {
  flex: 1 1 auto !important;
}
bootstrap5.css
.flex-row {
  flex-direction: row !important;
}
bootstrap5.css
.flex-column {
  flex-direction: column !important;
}
bootstrap5.css
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
bootstrap5.css
.flex-column-reverse {
  flex-direction: column-reverse !important;
}
bootstrap5.css
.flex-grow-0 {
  flex-grow: 0 !important;
}
bootstrap5.css
.flex-grow-1 {
  flex-grow: 1 !important;
}
bootstrap5.css
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
bootstrap5.css
.flex-shrink-1 {
  flex-shrink: 1 !important;
}
bootstrap5.css
.flex-wrap {
  flex-wrap: wrap !important;
}
bootstrap5.css
.flex-nowrap {
  flex-wrap: nowrap !important;
}
bootstrap5.css
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
bootstrap5.css
.gap-0 {
  gap: 0 !important;
}
bootstrap5.css
.gap-1 {
  gap: 0.25rem !important;
}
bootstrap5.css
.gap-2 {
  gap: 0.5rem !important;
}
bootstrap5.css
.gap-3 {
  gap: 1rem !important;
}
bootstrap5.css
.gap-4 {
  gap: 1.5rem !important;
}
bootstrap5.css
.gap-5 {
  gap: 3rem !important;
}
bootstrap5.css
.justify-content-start {
  justify-content: flex-start !important;
}
bootstrap5.css
.justify-content-end {
  justify-content: flex-end !important;
}
bootstrap5.css
.justify-content-center {
  justify-content: center !important;
}
bootstrap5.css
.justify-content-between {
  justify-content: space-between !important;
}
bootstrap5.css
.justify-content-around {
  justify-content: space-around !important;
}
bootstrap5.css
.justify-content-evenly {
  justify-content: space-evenly !important;
}
bootstrap5.css
.align-items-start {
  align-items: flex-start !important;
}
bootstrap5.css
.align-items-end {
  align-items: flex-end !important;
}
bootstrap5.css
.align-items-center {
  align-items: center !important;
}
bootstrap5.css
.align-items-baseline {
  align-items: baseline !important;
}
bootstrap5.css
.align-items-stretch {
  align-items: stretch !important;
}
bootstrap5.css
.align-content-start {
  align-content: flex-start !important;
}
bootstrap5.css
.align-content-end {
  align-content: flex-end !important;
}
bootstrap5.css
.align-content-center {
  align-content: center !important;
}
bootstrap5.css
.align-content-between {
  align-content: space-between !important;
}
bootstrap5.css
.align-content-around {
  align-content: space-around !important;
}
bootstrap5.css
.align-content-stretch {
  align-content: stretch !important;
}
bootstrap5.css
.align-self-auto {
  align-self: auto !important;
}
bootstrap5.css
.align-self-start {
  align-self: flex-start !important;
}
bootstrap5.css
.align-self-end {
  align-self: flex-end !important;
}
bootstrap5.css
.align-self-center {
  align-self: center !important;
}
bootstrap5.css
.align-self-baseline {
  align-self: baseline !important;
}
bootstrap5.css
.align-self-stretch {
  align-self: stretch !important;
}
bootstrap5.css
.order-first {
  order: -1 !important;
}
bootstrap5.css
.order-0 {
  order: 0 !important;
}
bootstrap5.css
.order-1 {
  order: 1 !important;
}
bootstrap5.css
.order-2 {
  order: 2 !important;
}
bootstrap5.css
.order-3 {
  order: 3 !important;
}
bootstrap5.css
.order-4 {
  order: 4 !important;
}
bootstrap5.css
.order-5 {
  order: 5 !important;
}
bootstrap5.css
.order-last {
  order: 6 !important;
}
bootstrap5.css
.m-0 {
  margin: 0 !important;
}
bootstrap5.css
.m-1 {
  margin: 0.25rem !important;
}
bootstrap5.css
.m-2 {
  margin: 0.5rem !important;
}
bootstrap5.css
.m-3 {
  margin: 1rem !important;
}
bootstrap5.css
.m-4 {
  margin: 1.5rem !important;
}
bootstrap5.css
.m-5 {
  margin: 3rem !important;
}
bootstrap5.css
.m-auto {
  margin: auto !important;
}
bootstrap5.css
.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
bootstrap5.css
.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
bootstrap5.css
.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
bootstrap5.css
.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
bootstrap5.css
.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
bootstrap5.css
.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
bootstrap5.css
.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}
bootstrap5.css
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
bootstrap5.css
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
bootstrap5.css
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
bootstrap5.css
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
bootstrap5.css
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
bootstrap5.css
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
bootstrap5.css
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
bootstrap5.css
.mt-0 {
  margin-top: 0 !important;
}
bootstrap5.css
.mt-1 {
  margin-top: 0.25rem !important;
}
bootstrap5.css
.mt-2 {
  margin-top: 0.5rem !important;
}
bootstrap5.css
.mt-3 {
  margin-top: 1rem !important;
}
bootstrap5.css
.mt-4 {
  margin-top: 1.5rem !important;
}
bootstrap5.css
.mt-5 {
  margin-top: 3rem !important;
}
bootstrap5.css
.mt-auto {
  margin-top: auto !important;
}
bootstrap5.css
.me-0 {
  margin-right: 0 !important;
}
bootstrap5.css
.me-1 {
  margin-right: 0.25rem !important;
}
bootstrap5.css
.me-2 {
  margin-right: 0.5rem !important;
}
bootstrap5.css
.me-3 {
  margin-right: 1rem !important;
}
bootstrap5.css
.me-4 {
  margin-right: 1.5rem !important;
}
bootstrap5.css
.me-5 {
  margin-right: 3rem !important;
}
bootstrap5.css
.me-auto {
  margin-right: auto !important;
}
bootstrap5.css
.mb-0 {
  margin-bottom: 0 !important;
}
bootstrap5.css
.mb-1 {
  margin-bottom: 0.25rem !important;
}
bootstrap5.css
.mb-2 {
  margin-bottom: 0.5rem !important;
}
bootstrap5.css
.mb-3 {
  margin-bottom: 1rem !important;
}
bootstrap5.css
.mb-4 {
  margin-bottom: 1.5rem !important;
}
bootstrap5.css
.mb-5 {
  margin-bottom: 3rem !important;
}
bootstrap5.css
.mb-auto {
  margin-bottom: auto !important;
}
bootstrap5.css
.ms-0 {
  margin-left: 0 !important;
}
bootstrap5.css
.ms-1 {
  margin-left: 0.25rem !important;
}
bootstrap5.css
.ms-2 {
  margin-left: 0.5rem !important;
}
bootstrap5.css
.ms-3 {
  margin-left: 1rem !important;
}
bootstrap5.css
.ms-4 {
  margin-left: 1.5rem !important;
}
bootstrap5.css
.ms-5 {
  margin-left: 3rem !important;
}
bootstrap5.css
.ms-auto {
  margin-left: auto !important;
}
bootstrap5.css
.p-0 {
  padding: 0 !important;
}
bootstrap5.css
.p-1 {
  padding: 0.25rem !important;
}
bootstrap5.css
.p-2 {
  padding: 0.5rem !important;
}
bootstrap5.css
.p-3 {
  padding: 1rem !important;
}
bootstrap5.css
.p-4 {
  padding: 1.5rem !important;
}
bootstrap5.css
.p-5 {
  padding: 3rem !important;
}
bootstrap5.css
.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
bootstrap5.css
.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
bootstrap5.css
.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
bootstrap5.css
.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
bootstrap5.css
.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
bootstrap5.css
.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
bootstrap5.css
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
bootstrap5.css
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
bootstrap5.css
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
bootstrap5.css
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
bootstrap5.css
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
bootstrap5.css
.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
bootstrap5.css
.pt-0 {
  padding-top: 0 !important;
}
bootstrap5.css
.pt-1 {
  padding-top: 0.25rem !important;
}
bootstrap5.css
.pt-2 {
  padding-top: 0.5rem !important;
}
bootstrap5.css
.pt-3 {
  padding-top: 1rem !important;
}
bootstrap5.css
.pt-4 {
  padding-top: 1.5rem !important;
}
bootstrap5.css
.pt-5 {
  padding-top: 3rem !important;
}
bootstrap5.css
.pe-0 {
  padding-right: 0 !important;
}
bootstrap5.css
.pe-1 {
  padding-right: 0.25rem !important;
}
bootstrap5.css
.pe-2 {
  padding-right: 0.5rem !important;
}
bootstrap5.css
.pe-3 {
  padding-right: 1rem !important;
}
bootstrap5.css
.pe-4 {
  padding-right: 1.5rem !important;
}
bootstrap5.css
.pe-5 {
  padding-right: 3rem !important;
}
bootstrap5.css
.pb-0 {
  padding-bottom: 0 !important;
}
bootstrap5.css
.pb-1 {
  padding-bottom: 0.25rem !important;
}
bootstrap5.css
.pb-2 {
  padding-bottom: 0.5rem !important;
}
bootstrap5.css
.pb-3 {
  padding-bottom: 1rem !important;
}
bootstrap5.css
.pb-4 {
  padding-bottom: 1.5rem !important;
}
bootstrap5.css
.pb-5 {
  padding-bottom: 3rem !important;
}
bootstrap5.css
.ps-0 {
  padding-left: 0 !important;
}
bootstrap5.css
.ps-1 {
  padding-left: 0.25rem !important;
}
bootstrap5.css
.ps-2 {
  padding-left: 0.5rem !important;
}
bootstrap5.css
.ps-3 {
  padding-left: 1rem !important;
}
bootstrap5.css
.ps-4 {
  padding-left: 1.5rem !important;
}
bootstrap5.css
.ps-5 {
  padding-left: 3rem !important;
}
bootstrap5.css
.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}
bootstrap5.css
.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}
bootstrap5.css
.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}
bootstrap5.css
.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}
bootstrap5.css
.fs-5 {
  font-size: 1.25rem !important;
}
bootstrap5.css
.fs-6 {
  font-size: 1rem !important;
}
bootstrap5.css
.fst-italic {
  font-style: italic !important;
}
bootstrap5.css
.fst-normal {
  font-style: normal !important;
}
bootstrap5.css
.fw-light {
  font-weight: 300 !important;
}
bootstrap5.css
.fw-lighter {
  font-weight: lighter !important;
}
bootstrap5.css
.fw-normal {
  font-weight: 400 !important;
}
bootstrap5.css
.fw-bold {
  font-weight: 700 !important;
}
bootstrap5.css
.fw-bolder {
  font-weight: bolder !important;
}
bootstrap5.css
.text-lowercase {
  text-transform: lowercase !important;
}
bootstrap5.css
.text-uppercase {
  text-transform: uppercase !important;
}
bootstrap5.css
.text-capitalize {
  text-transform: capitalize !important;
}
bootstrap5.css
.text-start {
  text-align: left !important;
}
bootstrap5.css
.text-end {
  text-align: right !important;
}
bootstrap5.css
.text-center {
  text-align: center !important;
}
bootstrap5.css
.text-primary {
  color: #0d6efd !important;
}
bootstrap5.css
.text-secondary {
  color: #6c757d !important;
}
bootstrap5.css
.text-success {
  color: #198754 !important;
}
bootstrap5.css
.text-info {
  color: #0dcaf0 !important;
}
bootstrap5.css
.text-warning {
  color: #ffc107 !important;
}
bootstrap5.css
.text-danger {
  color: #dc3545 !important;
}
bootstrap5.css
.text-light {
  color: #f8f9fa !important;
}
bootstrap5.css
.text-dark {
  color: #212529 !important;
}
bootstrap5.css
.text-white {
  color: #fff !important;
}
bootstrap5.css
.text-body {
  color: #212529 !important;
}
bootstrap5.css
.text-muted {
  color: #6c757d !important;
}
bootstrap5.css
.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
bootstrap5.css
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}
bootstrap5.css
.text-reset {
  color: inherit !important;
}
bootstrap5.css
.lh-1 {
  line-height: 1 !important;
}
bootstrap5.css
.lh-sm {
  line-height: 1.25 !important;
}
bootstrap5.css
.lh-base {
  line-height: 1.5 !important;
}
bootstrap5.css
.lh-lg {
  line-height: 2 !important;
}
bootstrap5.css
.bg-primary {
  background-color: #0d6efd !important;
}
bootstrap5.css
.bg-secondary {
  background-color: #6c757d !important;
}
bootstrap5.css
.bg-success {
  background-color: #198754 !important;
}
bootstrap5.css
.bg-info {
  background-color: #0dcaf0 !important;
}
bootstrap5.css
.bg-warning {
  background-color: #ffc107 !important;
}
bootstrap5.css
.bg-danger {
  background-color: #dc3545 !important;
}
bootstrap5.css
.bg-light {
  background-color: #f8f9fa !important;
}
bootstrap5.css
.bg-dark {
  background-color: #212529 !important;
}
bootstrap5.css
.bg-body {
  background-color: #fff !important;
}
bootstrap5.css
.bg-white {
  background-color: #fff !important;
}
bootstrap5.css
.bg-transparent {
  /* 完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。 */
  background-color: transparent !important;
}
bootstrap5.css
.bg-gradient {
  background-image: var(--bs-gradient) !important;
}
bootstrap5.css
.text-wrap {
  white-space: normal !important;
}
bootstrap5.css
.text-nowrap {
  white-space: nowrap !important;
}
bootstrap5.css
.text-decoration-none {
  text-decoration: none !important;
}
bootstrap5.css
.text-decoration-underline {
  text-decoration: underline !important;
}
bootstrap5.css
.text-decoration-line-through {
  text-decoration: line-through !important;
}
bootstrap5.css
/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
bootstrap5.css
/* rtl:end:remove */
.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}
bootstrap5.css
.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}
bootstrap5.css
.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
}
bootstrap5.css
.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}
bootstrap5.css
.pe-none {
  pointer-events: none !important;
}
bootstrap5.css
.pe-auto {
  pointer-events: auto !important;
}
bootstrap5.css
.rounded {
  border-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-0 {
  border-radius: 0 !important;
}
bootstrap5.css
.rounded-1 {
  border-radius: 0.2rem !important;
}
bootstrap5.css
.rounded-2 {
  border-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-3 {
  border-radius: 0.3rem !important;
}
bootstrap5.css
.rounded-circle {
  border-radius: 50% !important;
}
bootstrap5.css
.rounded-pill {
  border-radius: 50rem !important;
}
bootstrap5.css
.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-end {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-start {
  border-bottom-left-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
}
bootstrap5.css
.visible {
  visibility: visible !important;
}
bootstrap5.css
.invisible {
  visibility: hidden !important;
}
bootstrap5.css
@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-cent
bootstrap5.css
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-cent
bootstrap5.css
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-cent
bootstrap5.css
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-cen
bootstrap5.css
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-
bootstrap5.css
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2rem !important;
  }
  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
  .fs-sm-1 {
    font-size: 2.5rem !important;
  }
  .fs-sm-2 {
    font-size: 2rem !important;
  }
  .fs-sm-3 {
    font-size: 1.75rem !important;
  }
  .fs-sm-4 {
    font-size: 1.5rem !important;
  }
  .fs-md-1 {
    font-size: 2.5rem !important;
  }
  .fs-md-2 {
    font-size: 2rem !important;
  }
  .fs-md-3 {
    font-size: 1.75rem !important;
  }
  .fs-md-4 {
    font-size: 1.5rem !important;
  }
  .fs-lg-1 {
    font-size: 2.5rem !important;
  }
  .fs-lg-2 {
    font-size: 2rem !important;
  }
  .fs-lg-3 {
    font-size: 1.75rem !important;
  }
  .fs-lg-4 {
    font-size: 1.5rem !important;
  }
}
bootstrap5.css
@media print {
  /* 印刷字に利用するCSS mediaで大きく括って、それぞれのタグの設定をする */
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}

html bootstrap5 Sample

rowとcolの画面の状況でカラムの幅を変える、Medium以上:col-md-8


col-12とcol-md-8
col-6とcol-md-4
  <div class="row">
    <!-- Medium以上:だとmdが優先的に選択される -->
    <!-- xl:デスクトップ PC などの大画面モニタ 1200px 以上 -->
    <!-- lg:ノート PC などの省サイズモニタ 992px 以上 -->
    <!-- md:タブレット端末など 768px 以上 -->
    <!-- sm:スマートフォン(横持ち)など 576px 以上 -->
    <!-- -:スマートフォン(縦持ち)、IoT 端末など 576px 未満 -->
    <div class="col-12 ps://bttb.jp/bootstrap5/index.php?strkey=col-md-8" class="bg-warning text-dark">col-md-8">col-12とps://bttb.jp/bootstrap5/index.php?strkey=col-md-8" class="bg-warning text-dark">col-md-8</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
  </div>

rowとcolの行の分割をブレイクポイントで切り替える:d-none d-md-block


col
col
col
col
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100 ps://bttb.jp/bootstrap5/index.php?strkey=d-none" class="bg-warning text-dark">d-none ps://bttb.jp/bootstrap5/index.php?strkey=d-md-block" class="bg-warning text-dark">d-md-block"></div>
    <!-- Medium以上では{dsplay:block}、未満では{display:none} -->
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

水平方向のカラム間のガター:gx-5


p-3 border bg-light
p-3 border bg-light
  <!-- ガターとは、カラム間のパディング、padding によって作られるカラムの隙間のことです。 -->
  <!-- 各カラムに padding-right と padding-leftを設定し、各行の最初と最後にネガティブ margin でオフセットしてコンテンツを揃えます。。 -->
  <!--不要なオーバーフローを避けるため .container や.container-fluid を親要素に設定することもできます。たとえば、次の例では .px-4 でパディングを増やしています  -->
  <div class="container px-4">
    <div class="row ps://bttb.jp/bootstrap5/index.php?strkey=gx-5" class="bg-warning text-dark">gx-5">
      <div class="col">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
    </div>
  </div>

垂直方向のカラム間のガター、オーバーフロー処理:gy-5


p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
  <!--垂直方向のガターはページの最後にある .row の下にオーバーフローを引き起こす可能性があります。-->
  <!-- container overflow-hidden で、はみ出しrow部分を無視する -->
  <!-- このような場合は、.row を.overflow-hidden でラップするとも言う  -->
  <div class="container overflow-hidden">
    <div class="row ps://bttb.jp/bootstrap5/index.php?strkey=gy-5" class="bg-warning text-dark">gy-5">
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
    </div>
  </div>

水平・垂直方向の同時ガター:g-2


p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
  <div class="container">
    <!-- g-* クラスは水平・垂直ガターを設定する -->
    <div class="row ps://bttb.jp/bootstrap5/index.php?strkey=g-2" class="bg-warning text-dark">g-2">
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
      <div class="col-6">
        <div class="p-3 border bg-light">p-3 border bg-light</div>
      </div>
    </div>
  </div>

rowとcolのガター:g-2 g-lg-3


Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
  <!-- row columnsに ガタを使うことができるー-->
  <div class="row row-cols-2 row-cols-lg-5 ps://bttb.jp/bootstrap5/index.php?strkey=g-2" class="bg-warning text-dark">g-2 ps://bttb.jp/bootstrap5/index.php?strkey=g-lg-3" class="bg-warning text-dark">g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>

flexの折り返しなし:flex-nowrap


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 flex-nowrap">
    <!-- d-flex以下は、インラインになるとrowとcolと同じ関係になる -->
    <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のいい感じで自動で折り返す:flex-wrap


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
flex文字13
flex文字14
flex文字15
flex文字16
flex文字17
flex文字18
flex文字19
flex文字20
  <!-- 羅列すれば、勝手に自動で折り返してくれる(制御する必要なし) -->
  <!-- 文字数より大きさも自動で決まる) -->
  <!-- rowとcolとの違いは、ひたすら列挙して、改行や幅や位置などを自動整列していくれるところ -->
  <div class="d-flex flex-wrap">
    <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文字13</div>
    <div>flex文字14</div>
    <div>flex文字15</div>
    <div>flex文字16</div>
    <div>flex文字17</div>
    <div>flex文字18</div>
    <div>flex文字19</div>
    <div>flex文字20</div>
  </div>

flexコンテナを左と右側でそれぞれ真ん中空ける形式:ms-auto


flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- mr-autoが右寄せ マージンユーティリティ-->
    <!-- 同階層のカラムを強制的にオフセットするということと同じ -->
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=ms-auto" class="bg-warning text-dark">ms-auto p-2">flex文字3</div>
  </div>

flex文字数で伸縮 デフォルト:d-flex


flex文字01
flex文字02
flex文字03
  <!-- flex文字の幅で伸長する -->
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=d-flex" class="bg-warning text-dark">d-flex" style="height: 100px">
    <div class="p-2">flex文字01</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>

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


flex文字01(flex-grow-1)
flex文字02
flex文字03
  <div class="d-flex" style="height: 100px">
    <!--flex文字の幅を伸長で調整する(残り全部) -->
    <div class="p-2 ps://bttb.jp/bootstrap5/index.php?strkey=flex-grow" class="bg-warning text-dark">flex-grow-1">flex文字01(ps://bttb.jp/bootstrap5/index.php?strkey=flex-grow" class="bg-warning text-dark">flex-grow-1)</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>

flexの幅を縮小で調整する(他を優先):flex-shrink


flex文字01(flex-shrink-1)
flex文字02
flex文字03
  <!-- flex文字の幅を縮小で調整する -->
  <div class="d-flex" style="height: 100px">
    <div class="p-2 ps://bttb.jp/bootstrap5/index.php?strkey=flex-shrink" class="bg-warning text-dark">flex-shrink-1">flex文字01(ps://bttb.jp/bootstrap5/index.php?strkey=flex-shrink" class="bg-warning text-dark">flex-shrink-1)</div>
    <div class="p-2 w-100">flex文字02</div>
    <div class="p-2 w-100">flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-content-start" class="bg-warning text-dark">align-content-start flex-wrap" style="height: 200px">
    <!-- 文字列01が上段の左端からスタートする -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

flex縦の均等配置/順序を反転させて下段からスタートする:flex-wrap-reverse


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 flex-wrap-reverse">
    <!-- 文字列01が下段からスタートする、最新情報を上に出す場合など -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

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


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-content-center" class="bg-warning text-dark">align-content-center flex-wrap" style="height: 200px">
    <!-- height固定で、中央寄せ -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

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


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-content-end" class="bg-warning text-dark">align-content-end flex-wrap" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

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


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-content-between" class="bg-warning text-dark">align-content-between flex-wrap" style="height: 200px">
    <!-- height固定で、上と下 -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
  </div>

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


flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-content-around" class="bg-warning text-dark">align-content-around flex-wrap" style="height: 200px">
    <!-- height固定で、行間自動調整 -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
  </div>

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


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

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-items-start" class="bg-warning text-dark">align-items-start" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-items-end" class="bg-warning text-dark">align-items-end" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-items-stretch" class="bg-warning text-dark">align-items-stretch" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-items-center" class="bg-warning text-dark">align-items-center" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
(padding: 2rem)
flex文字02
(padding: 4rem)
flex文字03
(padding: 1rem)
  <div class="d-flex ps://bttb.jp/bootstrap5/index.php?strkey=align-items-baseline" class="bg-warning text-dark">align-items-baseline" style="height: 200px">
    <!-- paddingも含めて、flaxの大きさが決まる 文字の位置の高さが同じ-->
    <div style="padding: 2rem">flex文字01 <br>(padding: 2rem)</div>
    <div style="padding: 4rem">flex文字02 <br>(padding: 4rem)</div>
    <div style="padding: 1rem">flex文字03 <br>(padding: 1rem)</div>
  </div>

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


flex文字01
flex文字02(align-self-stretch)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=align-self-stretch" class="bg-warning text-dark">align-self-stretch">flex文字02(ps://bttb.jp/bootstrap5/index.php?strkey=align-self-stretch" class="bg-warning text-dark">align-self-stretch)</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02(align-self-start)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=align-self-start" class="bg-warning text-dark">align-self-start">flex文字02(ps://bttb.jp/bootstrap5/index.php?strkey=align-self-start" class="bg-warning text-dark">align-self-start)</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02(align-self-end)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=align-self-end" class="bg-warning text-dark">align-self-end">flex文字02(ps://bttb.jp/bootstrap5/index.php?strkey=align-self-end" class="bg-warning text-dark">align-self-end)</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02(align-self-center)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=align-self-center" class="bg-warning text-dark">align-self-center">flex文字02(ps://bttb.jp/bootstrap5/index.php?strkey=align-self-center" class="bg-warning text-dark">align-self-center)</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02(align-self-baseline)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=align-self-baseline" class="bg-warning text-dark">align-self-baseline">flex文字02(ps://bttb.jp/bootstrap5/index.php?strkey=align-self-baseline" class="bg-warning text-dark">align-self-baseline)</div>
    <div>flex文字03 </div>
  </div>

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


  <!-- navbar-*はテキストの色 -->
  <!-- navbar-expand-* は@mediaだったら適用するという指定 -->
    <nav class="navbar navbar-expand-sm navbar-light bg-light" style="ps://bttb.jp/bootstrap5/index.php?strkey=background-color" class="bg-warning text-dark">background-color: #e3f2fd;">
      <a class="navbar-brand" href="#">ブランド</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#Nav9" aria-controls="Nav9"
        aria-expanded="false" aria-label="ナビゲーション切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="Nav9">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        </ul>
        <form class="d-flex">
          <input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
          <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
        </form>
      </div>
    </nav>

navbar-brandに画像:navbar-brand


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

カード、画像あり、タイトル、本文、ボタンのセット:cardとcard-img-topとcard-bodyとcard-text


...

カードのタイトル

カードの内容

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

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


背景色、文字色指定なし

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

背景色:bg-light

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

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

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


Header
Primary card title

カード本文XXXXXXXXXXXX

Header
Secondary card title

カード本文XXXXXXXXXXXX

Header
Success card title

カード本文XXXXXXXXXXXX

Header
Danger card title

カード本文XXXXXXXXXXXX

Header
Warning card title

カード本文XXXXXXXXXXXX

Header
Info card title

カード本文XXXXXXXXXXXX

Header
Light card title

カード本文XXXXXXXXXXXX

Header
Dark card title

カード本文XXXXXXXXXXXX

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

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


...

カード01

カードの内容

...

カード02

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

...

カード03

カードの内容

カードの内容

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

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


...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

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

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


カードのタイトル

カードの内容

ボタン

カードのタイトル

カードの内容

ボタン
  <div class="row">
    <div class="col-sm-6">
      <div class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card">
        <div class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-body">
          <h4 class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-title">カードのタイトル</h4>
          <p class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-text">カードの内容</p>
          <a href="#" class="btn btn-primary">ボタン</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card">
        <div class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-body">
          <h4 class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-title">カードのタイトル</h4>
          <p class="ps://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-text">カードの内容</p>
          <a href="#" class="btn btn-primary">ボタン</a>
        </div>
      </div>
    </div>
  </div>

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


...

カードの内容

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

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


カードの内容

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

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


...

カードのタイトル

カードの内容

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

画像の左寄せ:rowとcol


Placeholder Image
カードタイトル

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

Last updated 3 mins ago

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

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


image

カードのタイトル

カードの内容

  • リスト01
  • リスト02
  • リスト03
  <div class="card" style="max-width: 25rem;">
    <!-- スタイルシートやインラインスタイルに幅を適用 -->
    <!-- 複数のコンテンツをカードの中に入れても横幅は固定になります -->
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <!-- list-group-flushは、ボーダーの無いリストグループ-->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト01</li>
      <li class="list-group-item">リスト02</li>
      <li class="list-group-item">リスト03</li>
    </ul>
    <!-- カードの本文:card-body -->
    <div class="card-body">
      <a href="#" class="card-link">カード内リンク</a>
      <a href="#" class="card-link">カード内リンク</a>
    </div>
  </div>

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


カードのタイトル

カードの内容

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

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


カードのタイトル

カードの内容

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

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


カードの幅指定:w-75

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

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

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


標準(左寄せ)

カードの内容

ボタン

中央寄せ:text-center

カードの内容

ボタン

右寄せ:text-end

カードの内容

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

ボーダーを追加する:!important


border border-top border-end border-bottom border-start
  <!-- 全辺ボーダー -->
  <span class="border">border</span>
  <!-- 上ボーダー -->
  <span class="border-top">border-top</span>
  <span class="border-end">border-end</span>
  <span class="border-bottom">border-bottom</span>
  <span class="border-start">border-start</span>

ボーダー色を設定する:border-*


border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-primary">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-primary</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-secondary">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-secondary</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-success">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-success</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-danger">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-danger</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-warning">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-warning</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-info">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-info</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-light">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-light</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-dark">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-dark</span>
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-white">ps://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-white</span>

ボーダーを削除する:border-0


border-0 border-top-0 border-end-0 border-bottom-0 border-start-0
  <!-- 全ボーダー削除 -->
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-0" class="bg-warning text-dark">border-0">ps://bttb.jp/bootstrap5/index.php?strkey=border-0" class="bg-warning text-dark">border-0</span>
  <span class="border border-top-0">border-top-0</span>
  <span class="border border-end-0">border-end-0</span>
  <span class="border border-bottom-0">border-bottom-0</span>
  <span class="border border-start-0">border-start-0</span>

ボーダー太さ:border-1


border-1 border-2 border-3 border-4 border-5
  <span class="border ps://bttb.jp/bootstrap5/index.php?strkey=border-1" class="bg-warning text-dark">border-1">ps://bttb.jp/bootstrap5/index.php?strkey=border-1" class="bg-warning text-dark">border-1</span>
  <span class="border border-2">border-2</span>
  <span class="border border-3">border-3</span>
  <span class="border border-4">border-4</span>
  <span class="border border-5">border-5</span>

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


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

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


  <div class="text-center">
    <p><a href="#" class="bg-primary text-white d-block py-2">bg-primary</a></p>
    <p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
    <p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
    <p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
    <p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
    <p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
    <p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
    <p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
    <p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
    <p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
  </div>

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


.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
  <div class="p-3 mb-2 bg-primary ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-white">.bg-primary.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-secondary ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-white">.bg-secondary.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-success ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-white">.bg-success.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-danger ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-white">.bg-danger.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-warning ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-dark">.bg-warning.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-info ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-dark">.bg-info.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-light ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-dark">.bg-light.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>
  <div class="p-3 mb-2 bg-dark ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient text-white">.bg-dark.ps://bttb.jp/bootstrap5/index.php?strkey=bg-gradient" class="bg-warning text-dark">bg-gradient</div>

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


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

高さを指定する:h-25


h-25
h-50
h-75
h-100
  <!-- 親で指定した高さに対して、割合を設定した高さになる -->
  <div style="height: 100px;">
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=h-25" class="bg-warning text-dark">h-25 d-inline-block border bg-primary">ps://bttb.jp/bootstrap5/index.php?strkey=h-25" class="bg-warning text-dark">h-25</div>
    <div class="h-50 d-inline-block border bg-primary">h-50</div>
    <div class="h-75 d-inline-block border bg-primary">h-75</div>
    <div class="h-100 d-inline-block border bg-primary">h-100</div>
  </div>

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


  <div style="height: 300px;">
    <img class="ps://bttb.jp/bootstrap5/index.php?strkey=mh-100" class="bg-warning text-dark">mh-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
  </div>

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


  <div style="height: 300px;">
    <img class="ps://bttb.jp/bootstrap5/index.php?strkey=mw-100" class="bg-warning text-dark">mw-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
  </div>

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


text-start

text-center

text-end

  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=text-start" class="bg-warning text-dark">text-start">ps://bttb.jp/bootstrap5/index.php?strkey=text-start" class="bg-warning text-dark">text-start</p>
  <p class="text-center">text-center</p>
  <p class="text-end">text-end</p>

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


text-sm-start

text-md-start

text-lg-start

text-xl-start

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

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


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

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


text-Lowercase(すべて小文字)

text-uppercase(すべて大文字)

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

  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=text-lowercase" class="bg-warning text-dark">text-lowercase">text-Lowercase(すべて小文字)</p>
  <p class="text-uppercase">text-uppercase(すべて大文字)</p>
  <p class="text-capitalize">text-capitalize(最初の文字を大文字)</p>

文字の太さとイタリック体を設定する:font-weight-*


太字(font-weight)

太字(font-weight-bold)

通常(font-weight-normal)

細字(font-weight-light)

  <p class="font-weight">太字(font-weight)</p>
  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=font-weight-" class="bg-warning text-dark">font-weight-bold">太字(ps://bttb.jp/bootstrap5/index.php?strkey=font-weight-" class="bg-warning text-dark">font-weight-bold)</p>
  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=font-weight-" class="bg-warning text-dark">font-weight-normal">通常(ps://bttb.jp/bootstrap5/index.php?strkey=font-weight-" class="bg-warning text-dark">font-weight-normal)</p>
  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=font-weight-" class="bg-warning text-dark">font-weight-light">細字(ps://bttb.jp/bootstrap5/index.php?strkey=font-weight-" class="bg-warning text-dark">font-weight-light)</p>

イタリック体を設定する:font-italic


イタリック体(font-italic)

  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=font-italic" class="bg-warning text-dark">font-italic">イタリック体(ps://bttb.jp/bootstrap5/index.php?strkey=font-italic" class="bg-warning text-dark">font-italic)</p>

等幅フォント:font-monospace


monospace
日本語の場合(かっこや句読点も)。

  <!-- 同じ幅になる、文字によって変わるのがプロポーショナルフォント -->
  <p class="font-monospace">monospace<br>日本語の場合(かっこや句読点も)。</p>

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


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

  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=text-truncate" class="bg-warning text-dark">text-truncate ps://bttb.jp/bootstrap5/index.php?strkey=w-25" class="bg-warning text-dark">w-25">25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。</p>

文字の大きさを変える:h1~h6


h1クラスの標準と同じになる

h2クラスの標準と同じになる

h3クラスの標準と同じになる

h4クラスの標準と同じになる

h5クラスの標準と同じになる

h6クラスの標準と同じになる

  <p class="h1">h1クラスの標準と同じになる</p>
  <p class="h2">h2クラスの標準と同じになる</p>
  <p class="h3">h3クラスの標準と同じになる</p>
  <p class="h4">h4クラスの標準と同じになる</p>
  <p class="h5">h5クラスの標準と同じになる</p>
  <p class="h6">h6クラスの標準と同じになる</p>

displayで文字の大きさを変える:display-*


h3(標準)

h3.display-1/font-size:6rem/font-weight:300

h3.display-2

h3.display-3

h3.display-4

h3.display-5

h3.display-6

  <h3>h3(標準)</h3>
  <!-- 高さも変わる、h1よりさらに大きい -->
  <h3 class="display-1">h3.display-1/font-size:6rem/font-weight:300</h3>
  <h3 class="display-2">h3.display-2</h3>
  <h3 class="display-3">h3.display-3</h3>
  <h3 class="display-4">h3.display-4</h3>
  <h3 class="display-5">h3.display-5</h3>
  <h3 class="display-6">h3.display-6</h3>

マーク:mark


mark要素を使って、テキストをハイライト表示させることができます。

定義済みクラス「.mark」を使用してハイライト表示させることもできます。

  <p>ps://bttb.jp/bootstrap5/index.php?strkey=mark" class="bg-warning text-dark">mark要素を使って、テキストを<ps://bttb.jp/bootstrap5/index.php?strkey=mark" class="bg-warning text-dark">mark>ハイライト表示</ps://bttb.jp/bootstrap5/index.php?strkey=mark" class="bg-warning text-dark">mark>させることができます。</p>
  <p>定義済みクラス「.ps://bttb.jp/bootstrap5/index.php?strkey=mark" class="bg-warning text-dark">mark」を使用して<span class="ps://bttb.jp/bootstrap5/index.php?strkey=mark" class="bg-warning text-dark">mark">ハイライト表示</span>させることもできます。</p>

スモール:small


「small要素」を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。

「smallクラス」を使用してsmall要素とスタイルを一致させることもできます。

  <p><ps://bttb.jp/bootstrap5/index.php?strkey=small" class="bg-warning text-dark">small>「ps://bttb.jp/bootstrap5/index.php?strkey=small" class="bg-warning text-dark">small要素」</ps://bttb.jp/bootstrap5/index.php?strkey=small" class="bg-warning text-dark">small>を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。</p>
  <p><span class="ps://bttb.jp/bootstrap5/index.php?strkey=small" class="bg-warning text-dark">small">「ps://bttb.jp/bootstrap5/index.php?strkey=small" class="bg-warning text-dark">smallクラス」</span>を使用してps://bttb.jp/bootstrap5/index.php?strkey=small" class="bg-warning text-dark">small要素とスタイルを一致させることもできます。</p>

リード文:lead


目立たせたい段落(p.lead)

標準的な段落(p)

  <!-- 標準的なPタグより、文字を目立たせることができる -->
  <p class="ps://bttb.jp/bootstrap5/index.php?strkey=lead" class="bg-warning text-dark">lead">目立たせたい段落(p.ps://bttb.jp/bootstrap5/index.php?strkey=lead" class="bg-warning text-dark">lead)</p>
  <p>標準的な段落(p)</p>

コードの表記:preとcode



    <p>サンプルテキスト</p>
    <p>2行目のサンプルテキスト</p>
  
  <pre><code>
    <p>サンプルテキスト</p>
    <p>2行目のサンプルテキスト</p>
  </code></pre>

引用:blockquote


基本の引用文です。

  <ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote class="ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote">
    <p class="mb-0">基本の引用文です。</p>
  </ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote>

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


基本の引用文です。

文章の引用元が明示できます。
  <ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote class="ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote ps://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-center">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote>

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


基本の引用文です。

文章の引用元が明示できます。
  <ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote class="ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote ps://bttb.jp/bootstrap5/index.php?strkey=text-end" class="bg-warning text-dark">text-end">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </ps://bttb.jp/bootstrap5/index.php?strkey=blockquote" class="bg-warning text-dark">blockquote>

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


基本の引用文です。

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

略語:abbr


HTML

HTML

  <!-- 略語にカーソルを合わせるとtitleの内容(正式名称)を表示される -->
  <p><ps://bttb.jp/bootstrap5/index.php?strkey=abbr" class="bg-warning text-dark">abbr title="HyperText Markup Language">HTML</ps://bttb.jp/bootstrap5/index.php?strkey=abbr" class="bg-warning text-dark">abbr></p>
  <p><ps://bttb.jp/bootstrap5/index.php?strkey=abbr" class="bg-warning text-dark">abbr title="HyperText Markup Language" class="initialism">HTML</ps://bttb.jp/bootstrap5/index.php?strkey=abbr" class="bg-warning text-dark">abbr></p>

HTML5 強調:strongとb


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

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

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

HTML5 取り消し線:del


del要素のデフォルトスタイルを使って、テキストを削除されたテキストとして取り消し線を表示させることができます。

  <p>ps://bttb.jp/bootstrap5/index.php?strkey=del" class="bg-warning text-dark">del要素のデフォルトスタイルを使って、テキストを<ps://bttb.jp/bootstrap5/index.php?strkey=del" class="bg-warning text-dark">del>削除されたテキスト</ps://bttb.jp/bootstrap5/index.php?strkey=del" class="bg-warning text-dark">del>として取り消し線を表示させることができます。</p>

HTML5 英語を斜体で表示:em


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

  <p>ps://bttb.jp/bootstrap5/index.php?strkey=em" class="bg-warning text-dark">em要素のデフォルトスタイルを使って、テキストを<ps://bttb.jp/bootstrap5/index.php?strkey=em" class="bg-warning text-dark">em>強調したいテキスト(Emphasis text)</ps://bttb.jp/bootstrap5/index.php?strkey=em" class="bg-warning text-dark">em>としてイタリック体または斜体で表示させることができます。</p>

HTML5 アンダーライン:u


u要素のデフォルトスタイルを使って、テキストをラベル付けされたテキストとして下線を表示させることができます。

  <p>ps://bttb.jp/bootstrap5/index.php?strkey=u" class="bg-warning text-dark">u要素のデフォルトスタイルを使って、テキストを<ps://bttb.jp/bootstrap5/index.php?strkey=u" class="bg-warning text-dark">u>ラベル付けされたテキスト</ps://bttb.jp/bootstrap5/index.php?strkey=u" class="bg-warning text-dark">u>として下線を表示させることができます。</p>

HTML5 取り消し線:s


s要素のデフォルトスタイルを使って、テキストを無効なテキストとして取り消し線を表示させることができます。

  <p>ps://bttb.jp/bootstrap5/index.php?strkey=s" class="bg-warning text-dark">s要素のデフォルトスタイルを使って、テキストを<ps://bttb.jp/bootstrap5/index.php?strkey=s" class="bg-warning text-dark">s>無効なテキスト</ps://bttb.jp/bootstrap5/index.php?strkey=s" class="bg-warning text-dark">s>として取り消し線を表示させることができます。</p>

HTML5 下線:ins


ins要素のデフォルトスタイルを使って、テキストを後から挿入されたテキストとして下線を表示することができます。

  <p>ps://bttb.jp/bootstrap5/index.php?strkey=ins" class="bg-warning text-dark">ins要素のデフォルトスタイルを使って、テキストを<ps://bttb.jp/bootstrap5/index.php?strkey=ins" class="bg-warning text-dark">ins>後から挿入されたテキスト</ps://bttb.jp/bootstrap5/index.php?strkey=ins" class="bg-warning text-dark">ins>として下線を表示することができます。</p>

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


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

アラートの背景色:alert-*


  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-primary" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-primary</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-secondary" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-secondary</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-success" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-success</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-danger" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-danger</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-warning" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-warning</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-info" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-info</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-light" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-light</div>
  <div class="alert ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-dark" role="alert">ps://bttb.jp/bootstrap5/index.php?strkey=alert-" class="bg-warning text-dark">alert-dark</div>

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


  <!-- btn-closeで×マーク background: svg -->
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    右側の「×」マークをクリックするとアラートが閉じます
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
    </button>
  </div>

アラート内にコンテンツを追加する:alert


  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert ps://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert-success" role="ps://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert">
    <h4 class="ps://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert-heading">アラートのタイトル</h4>
    <p>アラートの内容</p>
    <p class="mb-0"><a href="#" class="ps://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert-link">詳細内容へ</a></p>
    <p class="mb-0"><a href="#">問い合わせ</a></p>
  </div>
  

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


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

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


primary NEW

secondary 11

success 111

danger 1111

warning 0

info99

light 999

dark 9999

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

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


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

aタグ(リンク)のバッジを作成する:badge


  <!-- aタグにps://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badgeを設定する、バッチをクリックすると動作する -->
  <a href="#" class="ps://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge bg-success">ps://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-primary</a>

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


  <!-- ps://bttb.jp/bootstrap5/index.php?strkey=button" class="bg-warning text-dark">buttonにspanでカウンターを設定する、ボタンをクリックすると動作する -->
  <!-- spanにbadgeを設定し、badgeの色も設定する -->
  <ps://bttb.jp/bootstrap5/index.php?strkey=button" class="bg-warning text-dark">button type="ps://bttb.jp/bootstrap5/index.php?strkey=button" class="bg-warning text-dark">button" class="btn btn-primary">
    ps://bttb.jp/bootstrap5/index.php?strkey=button" class="bg-warning text-dark">button <span class="badge bg-light text-dark">4</span>
  </ps://bttb.jp/bootstrap5/index.php?strkey=button" class="bg-warning text-dark">button>

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


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

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


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

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


インライン表示のdiv
インライン表示のdiv
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=d-inline" class="bg-warning text-dark">d-inline bg-primary text-white">インライン表示のdiv</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=d-inline" class="bg-warning text-dark">d-inline bg-dark text-white">インライン表示のdiv</div>

インライン表示のspan:span


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

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


ブロック表示のspan ブロック表示のspan
  <span class="ps://bttb.jp/bootstrap5/index.php?strkey=d-block" class="bg-warning text-dark">d-block bg-primary text-white">ブロック表示のspan</span>
  <span class="ps://bttb.jp/bootstrap5/index.php?strkey=d-block" class="bg-warning text-dark">d-block bg-dark text-white">ブロック表示のspan</span>

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


lgより大きい画面幅で非表示
lgより大きい画面幅で表示
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=d-lg-none" class="bg-warning text-dark">d-lg-none bg-primary text-white">lgより大きい画面幅で非表示</div>
  <div class="d-none d-lg-block bg-secondary text-white">lgより大きい画面幅で表示</div>

印刷時の表示/非表示を設定する:d-print-none


スクリーンのみ表示(印刷時のみ非表示)
印刷時のみ表示(スクリーンでは非表示)
  <div class="d-print-none">スクリーンのみ表示(印刷時のみ非表示)</div>
  <div class="d-none d-print-block">印刷時のみ表示(スクリーンでは非表示)</div>

Embed埋め込み/アスペクト比16:9:ratio-16x9


  <!-- 大きさが自動調整される -->
  <!-- アスペクト比を持つ親要素に iframeに設定する -->
  <div class="ratio ps://bttb.jp/bootstrap5/index.php?strkey=ratio-16x9" class="bg-warning text-dark">ratio-16x9">
    <iframe src="https://www.youtube.com/embed/SGqg_ZzThDU?rel=0" title="YouTube" allowfullscreen></iframe>
  </div>

インラインでフロートを設定する:float-start


float-start float-end float-none
  <!-- spanだからインラインでフロートする、文字数分だけ表示される -->
  <!-- 重ならない、float-noneはfloatしないとのと同じ状態 -->
  <span class="ps://bttb.jp/bootstrap5/index.php?strkey=float-start" class="bg-warning text-dark">float-start">ps://bttb.jp/bootstrap5/index.php?strkey=float-start" class="bg-warning text-dark">float-start</span>
  <span class="float-end">float-end</span>
  <span class="float-none">float-none</span>

インライン改行でフロートを設定する:float-none


float-start
float-end
float-none テキスト
  <!-- 改行brを入れると、その行単位でフロートが効く -->
  <!-- ps://bttb.jp/bootstrap5/index.php?strkey=float-none" class="bg-warning text-dark">float-noneはfloatしないとのと同じ状態 -->
  <span class="float-start">float-start</span><br>
  <span class="float-end">float-end</span><br>
  <span class="ps://bttb.jp/bootstrap5/index.php?strkey=float-none" class="bg-warning text-dark">float-none">ps://bttb.jp/bootstrap5/index.php?strkey=float-none" class="bg-warning text-dark">float-none</span>
  <span>テキスト</span>

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


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

Float(画像と文字):float-startとfloat-none


Image
文字が重ならない、画像と同じ位置からスタート
Image
文字が重ならない、画像と同じ位置からスタート
Image
画像の位置から改行されて、文字がスタート
  <div class="clearfix mb-2">
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=float-start" class="bg-warning text-dark">float-start"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    文字が重ならない、画像と同じ位置からスタート
  </div>
  <div class="clearfix mb-2">
    <div class="float-end"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    文字が重ならない、画像と同じ位置からスタート
  </div>
  <!-- ps://bttb.jp/bootstrap5/index.php?strkey=float-none" class="bg-warning text-dark">float-noneはfloatしないとのと同じ状態 -->
  <div class="clearfix">
    <div class="ps://bttb.jp/bootstrap5/index.php?strkey=float-none" class="bg-warning text-dark">float-none"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    画像の位置から改行されて、文字がスタート
  </div>

Float(画像同士)左と右:float-startとfloat-end


左寄せ画像 右寄せ画像 テキストは、div内の空いているスペースに表示される
  <!-- divでclearfixなので、/div後はfloatを引きずらない -->
  <div class="clearfix">
    <img src="https://via.placeholder.com/200x200" class="ps://bttb.jp/bootstrap5/index.php?strkey=float-start" class="bg-warning text-dark">float-start" alt="左寄せ画像">
    <img src="https://via.placeholder.com/200x200" class="ps://bttb.jp/bootstrap5/index.php?strkey=float-end" class="bg-warning text-dark">float-end" alt="右寄せ画像">
    テキストは、div内の空いているスペースに表示される
  </div>

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


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

リストグループ:list-group


  • リスト項目1
  • リスト項目2
  • リスト項目3
  <!-- リストグループは、コンポーネント -->
  <ul class="list-group">
    <li class="list-group-item">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

リスト項目をアクティブ状態にする:list-group-itemとactive


  • アクティブリスト項目1
  • リスト項目2
  • リスト項目3
  <ul class="list-group">
    <li class="list-group-item active">アクティブリスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

リストグループの背景色:list-group-item-*


  • これは「primary」のリスト項目です。
  • これは「secondary」のリスト項目です。
  • これは「success」のリスト項目です。
  • これは「danger」のリスト項目です。
  • これは「warning」のリスト項目です。
  • これは「info」のリスト項目です。
  • これは「light」のリスト項目です。
  • これは「dark」のリスト項目です。
  • これは「デフォルト」のリスト項目です。
  <ul class="list-group">
    <li class="list-group-item list-group-item-primary">これは「primary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-secondary">これは「secondary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-success">これは「success」のリスト項目です。</li>
    <li class="list-group-item list-group-item-danger">これは「danger」のリスト項目です。</li>
    <li class="list-group-item list-group-item-warning">これは「warning」のリスト項目です。</li>
    <li class="list-group-item list-group-item-info">これは「info」のリスト項目です。</li>
    <li class="list-group-item list-group-item-light">これは「light」のリスト項目です。</li>
    <li class="list-group-item list-group-item-dark">これは「dark」のリスト項目です。</li>
    <li class="list-group-item">これは「デフォルト」のリスト項目です。</li>
  </ul>

リスト項目を無効状態にする:disabled


  • 無効化されるように見えるリスト項目
  • リスト項目2
  • リスト項目3
  <ul class="list-group">
    <li class="list-group-item ps://bttb.jp/bootstrap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled">無効化されるように見えるリスト項目</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>

バッジ付きリストグループ:badge-pill


  • リスト項目1 14
  • リスト項目2 2
  • リスト項目3 1
  <ul class="list-group">
    <!-- justify-content-betweenで左と右端にする -->
    <!-- align-items-centerで縦整列にする -->
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>

ホバー、無効、アクティブの状態を持つ :list-groupとlist-group-item-action


リスト項目1 リスト項目2
  <!-- ホバー、無効、アクティブの状態を持つ  -->
  <!-- btnクラスは使わず、list-group-item-actionを使う  -->
  <!-- disabledにすることで、pointer-events: none が適用され、ホバーやアクティブな状態がトリガーを防ぐ -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <button type="button" class="list-group-item list-group-item-action">リスト項目ボタン</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目ボタンdisabled</button>
  </div>

リストグループ背景色:list-group-item-*


  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">これは「primary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">これは「secondary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">これは「success」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">これは「danger」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">これは「warning」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">これは「info」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">これは「light」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">これは「dark」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action">これは「デフォルト」のリスト項目です。</a>
  </div>

クラスのリストグループアクティブ状態:active


  <!-- ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">activeを付けると、背景色が濃くなる -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「primary」。</a>
    <a href="#"
      class="list-group-item list-group-item-action list-group-item-secondary ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「secondary」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「success」。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「danger」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「warning」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「info」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「light」</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「dark」</a>
    <a href="#" class="list-group-item list-group-item-action ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「デフォルト(何も設定なし)」</a>
  </div>

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


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

li ボーダーなしのリストグループ:list-group-flush


  • リスト項目1
  • リスト項目2
  • リスト項目3
  <div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト項目1</li>
      <li class="list-group-item">リスト項目2</li>
      <li class="list-group-item">リスト項目3</li>
    </ul>
  </div>

ボタンのリストグループ:list-group-item-action


  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
    <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
  </div>

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


タイトル 1 タイトル 2 タイトル 3 タイトル 4
vertical-align: middle vertical-align: middle vertical-align: middle XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
vertical-align: bottom vertical-align: bottom vertical-align: bottom XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
vertical-align: middle vertical-align: middle align-top XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
  <table class="table align-middle">
    <thead>
      <tr>
        <th scope="col" class="w-25">タイトル 1</th>
        <th scope="col" class="w-25">タイトル 2</th>
        <th scope="col" class="w-25">タイトル 3</th>
        <th scope="col" class="w-25">タイトル 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
      <tr class="align-bottom">
        <td>vertical-align: bottom</td>
        <td>vertical-align: bottom</td>
        <td>vertical-align: bottom</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
      <tr>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td class="align-top">align-top</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
    </tbody>
  </table>

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


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

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


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

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


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

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


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="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="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="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>

ページネーション基本:paginationとpage-item


  <nav aria-label="検索結果のページ設定">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

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


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

ページネーションの配置 右寄せ:justify-content-end


  <nav>
    <ul class="pagination ps://bttb.jp/bootstrap5/index.php?strkey=justify-content-end" class="bg-warning text-dark">justify-content-end">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

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


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

リンクの無効状態やアクティブ状態を指定する:activeとdisabled


  <nav>
    <ul class="pagination">
      <!-- リンク無効 -->
      <li class="page-item ps://bttb.jp/bootstrap5/index.php?strkey=disabled" class="bg-warning text-dark">disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <!-- 現在のページ位置 visually-hiddenで視覚支援説明 -->
      <li class="page-item ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active"><a class="page-link" href="#">2 <span class="visually-hidden">現ページ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションのサイズ:pagination-lg


  <nav>
    <ul class="pagination pagination-lg">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>

ページネーションのサイズ:pagination-sm


  <nav>
    <ul class="pagination pagination-sm">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">前</a></li>
    </ul>
  </nav>

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


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

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


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

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


  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      ドロップダウン
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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


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

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


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

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" tabindex="-1" aria-disabled="true" href="#">メニュー02(無効)</a>
      <!-- ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">activeにした場合は、ps://bttb.jp/bootstrap5/index.php?strkey=aria-current" class="bg-warning text-dark">aria-current="true"で視覚支援をする -->
      <a class="dropdown-item ps://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active" ps://bttb.jp/bootstrap5/index.php?strkey=aria-current" class="bg-warning text-dark">aria-current="true" href="#">メニュー03(アクティブ)</a>
    </div>
  </div>

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


  <!-- 左方向へのドロップ -->
  <div class="text-center">
    <div class="btn-group dropstart">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向にドロップメニュー表示</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

js 右方向表示のドロップメニュー:dropright


  <!-- 右方向へのドロップ -->
  <div class="btn-group dropend">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">右方向にドロップメニュー表示</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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


  <!-- 上方向へのドロップ -->
  <div class="btn-group dropup">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">上方向にドロップメニュー表示</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

js オーバーフロー(枠から飛び出すメニュー)を制約する設定:data-boundary


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

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







  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- data-flip="true" Popper.jsが管理しているからbsは付けない-->
      <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
      </div>
    </div>
  </div>

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


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

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


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

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


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

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割する、ボタンを押してもメニューは開かない、スプリットボタンを押す必要がある -->
    <!--dropdown-toggle-splitはパディングのデザイン要素の役割  -->
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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


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

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


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

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


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

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


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

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


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

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


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

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


レスポンシブ画像
  <img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="ps://bttb.jp/bootstrap5/index.php?strkey=img-fluid" class="bg-warning text-dark">img-fluid" alt="レスポンシブ画像">

画像の中央寄せ:mx-autoとd-block


中央寄せ画像
  <!-- imgにclassを設定する -->
  <img src="https://via.placeholder.com/200x200" class="ps://bttb.jp/bootstrap5/index.php?strkey=mx-auto" class="bg-warning text-dark">mx-auto ps://bttb.jp/bootstrap5/index.php?strkey=d-block" class="bg-warning text-dark">d-block" alt="中央寄せ画像">

画像の中央寄せ:text-center


中央寄せ画像
  <!-- divにclassを設定する -->
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-center">
    <img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
  </div>

サムネイル画像:img-thumbnail


サムネイル画像
  <!-- imgにclassを設定する -->
  <img src="https://via.placeholder.com/200x200" class="ps://bttb.jp/bootstrap5/index.php?strkey=img-thumbnail" class="bg-warning text-dark">img-thumbnail" alt="サムネイル画像">

影:Shadows


影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-lg)
  <!-- smとlgはサイズの指定 -->
  <div class="shadow-none p-3 mb-5 bg-light rounded">影なし(shadow-none)</div>
  <div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影(shadow-sm)</div>
  <div class="shadow p-3 mb-5 bg-light rounded">標準の影(shadow)</div>
  <div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影(shadow-lg)</div>

角丸:rounded


rounded
rounded-top
rounded-end
rounded-bottom
rounded-start
rounded-circle
rounded-0
  <!-- 背景色を設定しない限り適用されない、背景に適用される -->
  <!-- 角丸 -->
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-top bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-top</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-end bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-end</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-bottom bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-bottom</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-start bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-start</div>
  <!-- サークル -->
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-circle bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-circle</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-0 bg-warning">ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-0</div>

影と角丸の両方適用:shadowとrounded


小さめの影
標準の影
大きめの影
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=shadow" class="bg-warning text-dark">shadow-sm p-3 mb-5 bg-white ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded">小さめの影</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=shadow" class="bg-warning text-dark">shadow p-3 mb-5 bg-white ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-0">標準の影</div>
  <div class="ps://bttb.jp/bootstrap5/index.php?strkey=shadow" class="bg-warning text-dark">shadow-lg p-3 mb-5 bg-white ps://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded">大きめの影</div>

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


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

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


formタイトルにfont-awesome

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

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


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

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



  <form>
    <!-- 大サイズのテキスト入力欄 -->
    <div class="mb-3">
      <label for="input1">大サイズのテキスト入力欄 form-controlps://bttb.jp/bootstrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg</label>
      <input type="text" class="form-control form-controlps://bttb.jp/bootstrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg" id="input1" placeholder="form-controlps://bttb.jp/bootstrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg">
    </div>
    <!-- 標準サイズのテキスト入力欄 -->
    <div class="mb-3">
      <label for="input2">標準サイズのテキスト入力欄</label>
      <input type="text" class="form-control" id="input2" placeholder="Default size">
    </div>
    <!-- 小サイズのテキスト入力欄 -->
    <div class="mb-3">
      <label for="input3">小サイズのテキスト入力欄 form-controlps://bttb.jp/bootstrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm</label>
      <input type="text" class="form-control form-controlps://bttb.jp/bootstrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm" id="input3" placeholder="form-controlps://bttb.jp/bootstrap5/index.php?strkey=-sm" class="bg-warning text-dark">-sm">
    </div>
    <hr>
    <!-- 大サイズのプルダウンメニュー -->
    <div class="mb-3">
      <label for="select1">大サイズのプルダウンメニュー form-selectps://bttb.jp/bootstrap5/index.php?strkey=-lg" class="bg-warning text-dark">-lg</label>
      <select class="form-select form-selectps://bttb.j