s

bootstrap5.css

bootstrap5.css
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
bootstrap5.css
*,
*::before,
*::after {
  /* box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します */
  /* border-boxは、パディングとボーダーを幅と高さに含めない(初期値) */
  box-sizing: border-box;
}
bootstrap5.css
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
bootstrap5.css
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}
bootstrap5.css
body {
  /* bodyの最初の設定 */
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
bootstrap5.css
[tabindex="-1"]:focus {
  /* フォーカス状態になった時の輪郭線を指定する */
  outline: 0 !important;
}
bootstrap5.css
hr {
  box-sizing: content-box;
  height: 0;
  /* overflowは、ボックス内に収まらない場合に、はみ出た部分の表示の仕方を指定する */
  overflow: visible;
}
bootstrap5.css
abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}
bootstrap5.css
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
bootstrap5.css
b,
strong {
  font-weight: bolder;
}
bootstrap5.css
small {
  font-size: 80%;
}
bootstrap5.css
sub,
sup {
  /* 下線付き文字 */
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
bootstrap5.css
sub {
  bottom: -0.25em;
}
bootstrap5.css
sup {
  top: -0.5em;
}
bootstrap5.css
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
bootstrap5.css
a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}
bootstrap5.css
a:not([href]):not([tabindex]):focus {
  outline: 0;
}
bootstrap5.css
pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
bootstrap5.css
img {
  vertical-align: middle;
  border-style: none;
}
bootstrap5.css
svg {
  overflow: hidden;
  vertical-align: middle;
}
bootstrap5.css
table {
  border-collapse: collapse;
}
bootstrap5.css
caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}
bootstrap5.css
label {
  display: inline-block;
  margin-bottom: 0.5rem;
}
bootstrap5.css
button {
  border-radius: 0;
}
bootstrap5.css
button:focus {
  /* buttonにフォーカルが当たったら */
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
bootstrap5.css
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
bootstrap5.css
button,
input {
  overflow: visible;
}
bootstrap5.css
button,
select {
  /* 文字の大文字等への変換 */
  text-transform: none;
}
bootstrap5.css
select {
  word-wrap: normal;
}
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
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
bootstrap5.css
input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}
bootstrap5.css
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}
bootstrap5.css
textarea {
  overflow: auto;
  /* resizeは、ユーザーが要素のサイズを変更できるかどうか */
  resize: vertical;
}
bootstrap5.css
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
bootstrap5.css
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}
bootstrap5.css
progress {
  vertical-align: baseline;
}
bootstrap5.css
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
bootstrap5.css
[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
bootstrap5.css
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
bootstrap5.css
output {
  display: inline-block;
}
bootstrap5.css
summary {
  display: list-item;
  cursor: pointer;
}
bootstrap5.css
template {
  display: none;
}
bootstrap5.css
[hidden] {
  display: none !important;
}
bootstrap5.css
h1,
.h1 {
  font-size: 2.5rem;
}
bootstrap5.css
h2,
.h2 {
  font-size: 2rem;
}
bootstrap5.css
h3,
.h3 {
  font-size: 1.75rem;
}
bootstrap5.css
h4,
.h4 {
  font-size: 1.5rem;
}
bootstrap5.css
h5,
.h5 {
  font-size: 1.25rem;
}
bootstrap5.css
h6,
.h6 {
  font-size: 1rem;
}
bootstrap5.css
.lead {
  font-size: 1.25rem;
  font-weight: 300;
}
bootstrap5.css
.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap5.css
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
bootstrap5.css
small,
.small {
  font-size: 80%;
  font-weight: 400;
}
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
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
bootstrap5.css
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
bootstrap5.css
.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
bootstrap5.css
.blockquote-footer {
  display: block;
  font-size: 80%;
  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: 90%;
  color: #6c757d;
}
bootstrap5.css
code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;
}
bootstrap5.css
kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}
bootstrap5.css
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}
bootstrap5.css
pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}
bootstrap5.css
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
bootstrap5.css
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}
bootstrap5.css
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
bootstrap5.css
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
bootstrap5.css
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
bootstrap5.css
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
bootstrap5.css
.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
bootstrap5.css
.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
bootstrap5.css
.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
bootstrap5.css
.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
bootstrap5.css
.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
bootstrap5.css
.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
bootstrap5.css
.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
bootstrap5.css
.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
bootstrap5.css
.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
bootstrap5.css
.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
bootstrap5.css
.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
bootstrap5.css
.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
bootstrap5.css
.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
bootstrap5.css
.order-first {
  -ms-flex-order: -1;
  order: -1;
}
bootstrap5.css
.order-last {
  -ms-flex-order: 13;
  order: 13;
}
bootstrap5.css
.order-0 {
  -ms-flex-order: 0;
  order: 0;
}
bootstrap5.css
.order-1 {
  -ms-flex-order: 1;
  order: 1;
}
bootstrap5.css
.order-2 {
  -ms-flex-order: 2;
  order: 2;
}
bootstrap5.css
.order-3 {
  -ms-flex-order: 3;
  order: 3;
}
bootstrap5.css
.order-4 {
  -ms-flex-order: 4;
  order: 4;
}
bootstrap5.css
.order-5 {
  -ms-flex-order: 5;
  order: 5;
}
bootstrap5.css
.order-6 {
  -ms-flex-order: 6;
  order: 6;
}
bootstrap5.css
.order-7 {
  -ms-flex-order: 7;
  order: 7;
}
bootstrap5.css
.order-8 {
  -ms-flex-order: 8;
  order: 8;
}
bootstrap5.css
.order-9 {
  -ms-flex-order: 9;
  order: 9;
}
bootstrap5.css
.order-10 {
  -ms-flex-order: 10;
  order: 10;
}
bootstrap5.css
.order-11 {
  -ms-flex-order: 11;
  order: 11;
}
bootstrap5.css
.order-12 {
  -ms-flex-order: 12;
  order: 12;
}
bootstrap5.css
.offset-1 {
  margin-left: 8.333333%;
}
bootstrap5.css
.offset-2 {
  margin-left: 16.666667%;
}
bootstrap5.css
.offset-3 {
  margin-left: 25%;
}
bootstrap5.css
.offset-4 {
  margin-left: 33.333333%;
}
bootstrap5.css
.offset-5 {
  margin-left: 41.666667%;
}
bootstrap5.css
.offset-6 {
  margin-left: 50%;
}
bootstrap5.css
.offset-7 {
  margin-left: 58.333333%;
}
bootstrap5.css
.offset-8 {
  margin-left: 66.666667%;
}
bootstrap5.css
.offset-9 {
  margin-left: 75%;
}
bootstrap5.css
.offset-10 {
  margin-left: 83.333333%;
}
bootstrap5.css
.offset-11 {
  margin-left: 91.666667%;
}
bootstrap5.css
@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}
bootstrap5.css
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
bootstrap5.css
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}
bootstrap5.css
.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}
bootstrap5.css
.table-sm th,
.table-sm td {
  padding: 0.3rem;
}
bootstrap5.css
.table-bordered {
  border: 1px solid #dee2e6;
}
bootstrap5.css
.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}
bootstrap5.css
.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}
bootstrap5.css
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
bootstrap5.css
.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}
bootstrap5.css
.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}
bootstrap5.css
.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}
bootstrap5.css
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}
bootstrap5.css
.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}
bootstrap5.css
.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}
bootstrap5.css
.table-hover .table-success:hover {
  background-color: #b1dfbb;
}
bootstrap5.css
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}
bootstrap5.css
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
bootstrap5.css
@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}
bootstrap5.css
@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md > .table-bordered {
    border: 0;
  }
}
bootstrap5.css
@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}
bootstrap5.css
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}
bootstrap5.css
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
bootstrap5.css
.table-responsive > .table-bordered {
  border: 0;
}
bootstrap5.css
.form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
bootstrap5.css
.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
bootstrap5.css
select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
bootstrap5.css
.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}
bootstrap5.css
.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;
  line-height: 1.5;
}
bootstrap5.css
.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}
bootstrap5.css
.form-control-plaintext {
  display: block;
  width: 100%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  margin-bottom: 0;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
bootstrap5.css
.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap5.css
.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
select.form-control[size],
select.form-control[multiple] {
  height: auto;
}
bootstrap5.css
.form-text {
  display: block;
  margin-top: 0.25rem;
}
bootstrap5.css
.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
bootstrap5.css
.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}
bootstrap5.css
.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}
bootstrap5.css
.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}
bootstrap5.css
.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
}
bootstrap5.css
.form-check-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}
bootstrap5.css
.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}
bootstrap5.css
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}
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;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}
bootstrap5.css
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
bootstrap5.css
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
bootstrap5.css
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
bootstrap5.css
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .form-control-file:valid ~ .valid-feedback,
.was-validated .form-control-file:valid ~ .valid-tooltip,
.form-control-file.is-valid ~ .valid-feedback,
.form-control-file.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: #28a745;
}
bootstrap5.css
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip,
.form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label {
  color: #28a745;
}
bootstrap5.css
.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #28a745;
}
bootstrap5.css
.was-validated .custom-control-input:valid ~ .valid-feedback,
.was-validated .custom-control-input:valid ~ .valid-tooltip,
.custom-control-input.is-valid ~ .valid-feedback,
.custom-control-input.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}
bootstrap5.css
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before,
.custom-control-input.is-valid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
bootstrap5.css
.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #28a745;
}
bootstrap5.css
.was-validated .custom-file-input:valid ~ .custom-file-label,
.custom-file-input.is-valid ~ .custom-file-label {
  border-color: #28a745;
}
bootstrap5.css
.was-validated .custom-file-input:valid ~ .valid-feedback,
.was-validated .custom-file-input:valid ~ .valid-tooltip,
.custom-file-input.is-valid ~ .valid-feedback,
.custom-file-input.is-valid ~ .valid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-file-input:valid:focus ~ .custom-file-label,
.custom-file-input.is-valid:focus ~ .custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
bootstrap5.css
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  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;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}
bootstrap5.css
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
bootstrap5.css
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip,
.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}
bootstrap5.css
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip,
.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip,
.custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before,
.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}
bootstrap5.css
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #dc3545;
}
bootstrap5.css
.was-validated .custom-file-input:invalid ~ .custom-file-label,
.custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #dc3545;
}
bootstrap5.css
.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip,
.custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
  display: block;
}
bootstrap5.css
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label,
.custom-file-input.is-invalid:focus ~ .custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
bootstrap5.css
.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}
bootstrap5.css
@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}
bootstrap5.css
.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
bootstrap5.css
.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.btn.disabled,
.btn:disabled {
  /* 透明度は、0.0(完全に透明)~1.0(完全に不透明) */
  /* 文字を薄くしたいときに利用する */
  opacity: 0.65;
}
bootstrap5.css
a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}
bootstrap5.css
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
bootstrap5.css
.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap5.css
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}
bootstrap5.css
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
bootstrap5.css
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
bootstrap5.css
.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
bootstrap5.css
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}
bootstrap5.css
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
bootstrap5.css
.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap5.css
.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}
bootstrap5.css
.btn-success:focus,
.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}
bootstrap5.css
.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap5.css
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}
bootstrap5.css
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}
bootstrap5.css
.btn-info:focus,
.btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
bootstrap5.css
.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap5.css
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}
bootstrap5.css
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
bootstrap5.css
.btn-warning:focus,
.btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
bootstrap5.css
.btn-warning.disabled,
.btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}
bootstrap5.css
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
bootstrap5.css
.btn-danger:focus,
.btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}
bootstrap5.css
.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap5.css
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}
bootstrap5.css
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}
bootstrap5.css
.btn-light:focus,
.btn-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
bootstrap5.css
.btn-light.disabled,
.btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap5.css
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
  color: #212529;
  background-color: #dae0e5;
  border-color: #d3d9df;
}
bootstrap5.css
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
bootstrap5.css
.btn-dark:focus,
.btn-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}
bootstrap5.css
.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
bootstrap5.css
.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #1d2124;
  border-color: #171a1d;
}
bootstrap5.css
.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}
bootstrap5.css
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap5.css
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap5.css
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap5.css
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap5.css
.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}
bootstrap5.css
.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap5.css
.btn-outline-success:focus,
.btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
bootstrap5.css
.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap5.css
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
bootstrap5.css
.btn-outline-info:focus,
.btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
bootstrap5.css
.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap5.css
.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
bootstrap5.css
.btn-outline-warning:focus,
.btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
.btn-outline-danger:focus,
.btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
bootstrap5.css
.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap5.css
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
bootstrap5.css
.btn-outline-light:focus,
.btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
bootstrap5.css
.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap5.css
.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
bootstrap5.css
.btn-outline-dark:focus,
.btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
bootstrap5.css
.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}
bootstrap5.css
.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
bootstrap5.css
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
bootstrap5.css
.btn-link:focus,
.btn-link.focus {
  text-decoration: underline;
  box-shadow: none;
}
bootstrap5.css
.btn-link:disabled,
.btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}
bootstrap5.css
.btn-lg,
.btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap5.css
.btn-block {
  display: block;
  width: 100%;
}
bootstrap5.css
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
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 {
  position: relative;
  height: 0;
  /* はみ出た部分は、非表示にする */
  /* あえて一部表示で、それ以外は非表示という使い方もする */
  overflow: hidden;
  transition: height 0.35s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
bootstrap5.css
.dropup,
.dropright,
.dropdown,
.dropleft {
  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-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}
bootstrap5.css
@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}
bootstrap5.css
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
bootstrap5.css
.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
bootstrap5.css
.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
bootstrap5.css
.dropleft .dropdown-toggle::after {
  display: none;
}
bootstrap5.css
.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
bootstrap5.css
.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}
bootstrap5.css
.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}
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 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}
bootstrap5.css
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}
bootstrap5.css
.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
bootstrap5.css
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
bootstrap5.css
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}
bootstrap5.css
.btn-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
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:not(:first-child),
.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,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}
bootstrap5.css
.dropleft .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 {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}
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:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
bootstrap5.css
.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}
bootstrap5.css
.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}
bootstrap5.css
.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}
bootstrap5.css
.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}
bootstrap5.css
.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}
bootstrap5.css
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.input-group > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
bootstrap5.css
.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.input-group-prepend,
.input-group-append {
  display: -ms-flexbox;
  display: flex;
}
bootstrap5.css
.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}
bootstrap5.css
.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}
bootstrap5.css
.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
bootstrap5.css
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap5.css
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}
bootstrap5.css
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}
bootstrap5.css
.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}
bootstrap5.css
.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
bootstrap5.css
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}
bootstrap5.css
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff;
}
bootstrap5.css
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
bootstrap5.css
.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}
bootstrap5.css
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}
bootstrap5.css
.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
bootstrap5.css
.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}
bootstrap5.css
.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}
bootstrap5.css
.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
bootstrap5.css
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}
bootstrap5.css
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
bootstrap5.css
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-switch {
  padding-left: 2.25rem;
}
bootstrap5.css
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
bootstrap5.css
.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}
bootstrap5.css
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}
bootstrap5.css
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.custom-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
bootstrap5.css
.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}
bootstrap5.css
.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}
bootstrap5.css
.custom-select::-ms-expand {
  display: none;
}
bootstrap5.css
.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}
bootstrap5.css
.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}
bootstrap5.css
.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}
bootstrap5.css
.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}
bootstrap5.css
.custom-file-input:focus ~ .custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-file-input:disabled ~ .custom-file-label {
  background-color: #e9ecef;
}
bootstrap5.css
.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}
bootstrap5.css
.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}
bootstrap5.css
.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
bootstrap5.css
.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
  border-radius: 0 0.25rem 0.25rem 0;
}
bootstrap5.css
.custom-range {
  width: 100%;
  height: calc(1rem + 0.4rem);
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
.custom-range:focus {
  outline: none;
}
bootstrap5.css
.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.custom-range::-moz-focus-outer {
  border: 0;
}
bootstrap5.css
.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    transition: none;
  }
}
bootstrap5.css
.custom-range::-webkit-slider-thumb:active {
  background-color: #b3d7ff;
}
bootstrap5.css
.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    transition: none;
  }
}
bootstrap5.css
.custom-range::-moz-range-thumb:active {
  background-color: #b3d7ff;
}
bootstrap5.css
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap5.css
.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    transition: none;
  }
}
bootstrap5.css
.custom-range::-ms-thumb:active {
  background-color: #b3d7ff;
}
bootstrap5.css
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
bootstrap5.css
.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}
bootstrap5.css
.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}
bootstrap5.css
.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
bootstrap5.css
.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}
bootstrap5.css
.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}
bootstrap5.css
.custom-range:disabled::-moz-range-track {
  cursor: default;
}
bootstrap5.css
.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}
bootstrap5.css
.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}
bootstrap5.css
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap5.css
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
bootstrap5.css
.nav-link:hover,
.nav-link:focus {
  text-decoration: 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-item {
  margin-bottom: -1px;
}
bootstrap5.css
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}
bootstrap5.css
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
bootstrap5.css
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
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: #007bff;
}
bootstrap5.css
.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}
bootstrap5.css
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
bootstrap5.css
.tab-content > .tab-pane {
  display: none;
}
bootstrap5.css
.tab-content > .active {
  display: block;
}
bootstrap5.css
.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
bootstrap5.css
.navbar > .container,
.navbar > .container-fluid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
bootstrap5.css
.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}
bootstrap5.css
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
bootstrap5.css
.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap5.css
.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}
bootstrap5.css
.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}
bootstrap5.css
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap5.css
.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}
bootstrap5.css
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}
bootstrap5.css
@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
bootstrap5.css
@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    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 > .container,
  .navbar-expand-sm > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    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 > .container,
  .navbar-expand-md > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    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 > .container,
  .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    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 > .container,
  .navbar-expand-xl > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}
bootstrap5.css
.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
bootstrap5.css
.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}
bootstrap5.css
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
bootstrap5.css
.navbar-expand > .container,
.navbar-expand > .container-fluid {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
bootstrap5.css
.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
bootstrap5.css
.navbar-expand .navbar-toggler {
  display: none;
}
bootstrap5.css
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}
bootstrap5.css
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
bootstrap5.css
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap5.css
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
bootstrap5.css
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
  color: #fff;
}
bootstrap5.css
.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  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:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap5.css
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}
bootstrap5.css
.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}
bootstrap5.css
.card-text:last-child {
  margin-bottom: 0;
}
bootstrap5.css
.card-header {
  padding: 0.75rem 1.25rem;
  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-header + .list-group .list-group-item:first-child {
  border-top: 0;
}
bootstrap5.css
.card-footer {
  padding: 0.75rem 1.25rem;
  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-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}
bootstrap5.css
.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}
bootstrap5.css
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}
bootstrap5.css
.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
bootstrap5.css
@media (min-width: 576px) {
  .card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}
bootstrap5.css
.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
bootstrap5.css
@media (min-width: 576px) {
  .card-group {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    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
.card-columns .card {
  margin-bottom: 0.75rem;
}
bootstrap5.css
@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}
bootstrap5.css
.accordion > .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}
bootstrap5.css
.accordion > .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}
bootstrap5.css
.accordion > .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.accordion > .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap5.css
.breadcrumb {
  /* パン屑 */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}
bootstrap5.css
.pagination {
  /* ページネーション */
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}
bootstrap5.css
.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
bootstrap5.css
.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap5.css
.page-item:first-child .page-link {
  margin-left: 0;
  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
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}
bootstrap5.css
.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
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;
  line-height: 1.5;
}
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.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}
bootstrap5.css
a.badge:hover,
a.badge:focus {
  text-decoration: none;
}
bootstrap5.css
.badge:empty {
  display: none;
}
bootstrap5.css
.btn .badge {
  position: relative;
  top: -1px;
}
bootstrap5.css
.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}
bootstrap5.css
a.badge-primary:hover,
a.badge-primary:focus {
  color: #fff;
  background-color: #0062cc;
}
bootstrap5.css
a.badge-primary:focus,
a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
bootstrap5.css
.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}
bootstrap5.css
a.badge-secondary:hover,
a.badge-secondary:focus {
  color: #fff;
  background-color: #545b62;
}
bootstrap5.css
a.badge-secondary:focus,
a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap5.css
.badge-success {
  color: #fff;
  background-color: #28a745;
}
bootstrap5.css
a.badge-success:hover,
a.badge-success:focus {
  color: #fff;
  background-color: #1e7e34;
}
bootstrap5.css
a.badge-success:focus,
a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
bootstrap5.css
a.badge-info:hover,
a.badge-info:focus {
  color: #fff;
  background-color: #117a8b;
}
bootstrap5.css
a.badge-info:focus,
a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
bootstrap5.css
a.badge-warning:hover,
a.badge-warning:focus {
  color: #212529;
  background-color: #d39e00;
}
bootstrap5.css
a.badge-warning:focus,
a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
bootstrap5.css
a.badge-danger:hover,
a.badge-danger:focus {
  color: #fff;
  background-color: #bd2130;
}
bootstrap5.css
a.badge-danger:focus,
a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
bootstrap5.css
a.badge-light:hover,
a.badge-light:focus {
  color: #212529;
  background-color: #dae0e5;
}
bootstrap5.css
a.badge-light:focus,
a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
bootstrap5.css
a.badge-dark:hover,
a.badge-dark:focus {
  color: #fff;
  background-color: #1d2124;
}
bootstrap5.css
a.badge-dark:focus,
a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
bootstrap5.css
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}
bootstrap5.css
.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}
bootstrap5.css
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap5.css
.alert-dismissible {
  padding-right: 4rem;
}
bootstrap5.css
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
bootstrap5.css
.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
bootstrap5.css
.alert-secondary hr {
  border-top-color: #c8cbcf;
}
bootstrap5.css
.alert-secondary .alert-link {
  color: #202326;
}
bootstrap5.css
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
bootstrap5.css
.alert-success hr {
  border-top-color: #b1dfbb;
}
bootstrap5.css
.alert-success .alert-link {
  color: #0b2e13;
}
bootstrap5.css
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
bootstrap5.css
@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
bootstrap5.css
.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}
bootstrap5.css
.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
bootstrap5.css
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
bootstrap5.css
.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}
bootstrap5.css
.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}
bootstrap5.css
.media-body {
  -ms-flex: 1;
  flex: 1;
}
bootstrap5.css
.list-group {
  /* flexでcolumn形式にする */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}
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.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap5.css
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
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: #007bff;
  border-color: #007bff;
}
bootstrap5.css
.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}
bootstrap5.css
.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}
bootstrap5.css
.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}
bootstrap5.css
.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}
bootstrap5.css
@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-sm .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-sm .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-md .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-md .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-lg .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-lg .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-xl .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-xl .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}
bootstrap5.css
.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
bootstrap5.css
.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}
bootstrap5.css
.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}
bootstrap5.css
.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
bootstrap5.css
.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}
bootstrap5.css
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #004085;
  background-color: #9fcdff;
}
bootstrap5.css
.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}
bootstrap5.css
.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}
bootstrap5.css
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #383d41;
  background-color: #c8cbcf;
}
bootstrap5.css
.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}
bootstrap5.css
.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}
bootstrap5.css
.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}
bootstrap5.css
.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}
bootstrap5.css
.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}
bootstrap5.css
.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}
bootstrap5.css
.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}
bootstrap5.css
.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}
bootstrap5.css
.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}
bootstrap5.css
.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}
bootstrap5.css
.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}
bootstrap5.css
.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}
bootstrap5.css
.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}
bootstrap5.css
.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}
bootstrap5.css
.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}
bootstrap5.css
.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}
bootstrap5.css
.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}
bootstrap5.css
.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}
bootstrap5.css
.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}
bootstrap5.css
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}
bootstrap5.css
.close:hover {
  color: #000;
  text-decoration: none;
}
bootstrap5.css
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: 0.75;
}
bootstrap5.css
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap5.css
a.close.disabled {
  pointer-events: none;
}
bootstrap5.css
.toast {
  max-width: 350px;
  overflow: hidden;
  font-size: 0.875rem;
  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.25rem 0.75rem rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  border-radius: 0.25rem;
}
bootstrap5.css
.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}
bootstrap5.css
.toast.showing {
  opacity: 1;
}
bootstrap5.css
.toast.show {
  display: block;
  opacity: 1;
}
bootstrap5.css
.toast.hide {
  display: none;
}
bootstrap5.css
.toast-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.25rem 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);
}
bootstrap5.css
.toast-body {
  padding: 0.75rem;
}
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: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
bootstrap5.css
.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}
bootstrap5.css
.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}
bootstrap5.css
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}
bootstrap5.css
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
bootstrap5.css
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}
bootstrap5.css
.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}
bootstrap5.css
.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}
bootstrap5.css
.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}
bootstrap5.css
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}
bootstrap5.css
.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}
bootstrap5.css
.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  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.show {
  opacity: 0.5;
}
bootstrap5.css
.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
bootstrap5.css
.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}
bootstrap5.css
.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}
bootstrap5.css
.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
bootstrap5.css
.modal-footer > :not(:first-child) {
  margin-left: 0.25rem;
}
bootstrap5.css
.modal-footer > :not(:last-child) {
  margin-right: 0.25rem;
}
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 {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}
bootstrap5.css
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}
bootstrap5.css
.tooltip.show {
  opacity: 0.9;
}
bootstrap5.css
.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}
bootstrap5.css
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.bs-tooltip-top,
.bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}
bootstrap5.css
.bs-tooltip-top .arrow,
.bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}
bootstrap5.css
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}
bootstrap5.css
.bs-tooltip-right,
.bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}
bootstrap5.css
.bs-tooltip-right .arrow,
.bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}
bootstrap5.css
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  right: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}
bootstrap5.css
.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}
bootstrap5.css
.bs-tooltip-bottom .arrow,
.bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}
bootstrap5.css
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}
bootstrap5.css
.bs-tooltip-left,
.bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}
bootstrap5.css
.bs-tooltip-left .arrow,
.bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}
bootstrap5.css
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  left: 0;
  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;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}
bootstrap5.css
.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}
bootstrap5.css
.popover .arrow::before,
.popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap5.css
.bs-popover-top,
.bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.5rem;
}
bootstrap5.css
.bs-popover-top > .arrow,
.bs-popover-auto[x-placement^="top"] > .arrow {
  bottom: calc((0.5rem + 1px) * -1);
}
bootstrap5.css
.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .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 > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}
bootstrap5.css
.bs-popover-right,
.bs-popover-auto[x-placement^="right"] {
  margin-left: 0.5rem;
}
bootstrap5.css
.bs-popover-right > .arrow,
.bs-popover-auto[x-placement^="right"] > .arrow {
  left: calc((0.5rem + 1px) * -1);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}
bootstrap5.css
.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .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-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .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[x-placement^="bottom"] {
  margin-top: 0.5rem;
}
bootstrap5.css
.bs-popover-bottom > .arrow,
.bs-popover-auto[x-placement^="bottom"] > .arrow {
  top: calc((0.5rem + 1px) * -1);
}
bootstrap5.css
.bs-popover-bottom > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .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 > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .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[x-placement^="bottom"] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}
bootstrap5.css
.bs-popover-left,
.bs-popover-auto[x-placement^="left"] {
  margin-right: 0.5rem;
}
bootstrap5.css
.bs-popover-left > .arrow,
.bs-popover-auto[x-placement^="left"] > .arrow {
  right: calc((0.5rem + 1px) * -1);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}
bootstrap5.css
.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .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-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
  right: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-left-color: #fff;
}
bootstrap5.css
.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  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
.carousel {
  position: relative;
}
bootstrap5.css
.carousel.pointer-event {
  -ms-touch-action: pan-y;
  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: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
bootstrap5.css
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}
bootstrap5.css
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
bootstrap5.css
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
bootstrap5.css
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}
bootstrap5.css
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1;
}
bootstrap5.css
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
bootstrap5.css
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}
bootstrap5.css
.carousel-control-prev {
  left: 0;
}
bootstrap5.css
.carousel-control-next {
  right: 0;
}
bootstrap5.css
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}
bootstrap5.css
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
}
bootstrap5.css
.carousel-indicators li {
  box-sizing: content-box;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
bootstrap5.css
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}
bootstrap5.css
.carousel-indicators .active {
  opacity: 1;
}
bootstrap5.css
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}
bootstrap5.css
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
bootstrap5.css
@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
bootstrap5.css
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
  animation: spinner-border 0.75s linear infinite;
}
bootstrap5.css
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}
bootstrap5.css
@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
bootstrap5.css
@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
bootstrap5.css
.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: spinner-grow 0.75s linear infinite;
  animation: spinner-grow 0.75s linear infinite;
}
bootstrap5.css
.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}
bootstrap5.css
.align-baseline {
  vertical-align: baseline !important;
}
bootstrap5.css
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}
bootstrap5.css
.bg-secondary {
  background-color: #6c757d !important;
}
bootstrap5.css
a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}
bootstrap5.css
.bg-success {
  background-color: #28a745 !important;
}
bootstrap5.css
a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}
bootstrap5.css
a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}
bootstrap5.css
a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}
bootstrap5.css
a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}
bootstrap5.css
a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}
bootstrap5.css
a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}
bootstrap5.css
.bg-transparent {
  /* 完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。 */
  background-color: transparent !important;
}
bootstrap5.css
.border {
  border: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-top {
  border-top: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-right {
  border-right: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-left {
  border-left: 1px solid #dee2e6 !important;
}
bootstrap5.css
.border-secondary {
  border-color: #6c757d !important;
}
bootstrap5.css
.border-success {
  border-color: #28a745 !important;
}
bootstrap5.css
.rounded-sm {
  border-radius: 0.2rem !important;
}
bootstrap5.css
.rounded {
  border-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-right {
  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-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
bootstrap5.css
.rounded-lg {
  border-radius: 0.3rem !important;
}
bootstrap5.css
.rounded-circle {
  border-radius: 50% !important;
}
bootstrap5.css
.rounded-pill {
  border-radius: 50rem !important;
}
bootstrap5.css
.rounded-0 {
  border-radius: 0 !important;
}
bootstrap5.css
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
bootstrap5.css
.d-none {
  display: none !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-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: -ms-flexbox !important;
  display: flex !important;
}
bootstrap5.css
.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}
bootstrap5.css
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !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: -ms-flexbox !important;
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !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: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !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: -ms-flexbox !important;
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !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: -ms-flexbox !important;
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
bootstrap5.css
@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !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: -ms-flexbox !important;
    display: flex !important;
  }
  .d-print-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
bootstrap5.css
.embed-responsive {
  /* アスペクト比を持つ親要素に iframe のような埋め込みをラップします */
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
bootstrap5.css
.embed-responsive::before {
  display: block;
  content: "";
}
bootstrap5.css
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
bootstrap5.css
.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}
bootstrap5.css
.embed-responsive-16by9::before {
  padding-top: 56.25%;
}
bootstrap5.css
.embed-responsive-4by3::before {
  padding-top: 75%;
}
bootstrap5.css
.embed-responsive-1by1::before {
  padding-top: 100%;
}
bootstrap5.css
.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
bootstrap5.css
.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
bootstrap5.css
.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}
bootstrap5.css
.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}
bootstrap5.css
.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
bootstrap5.css
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
bootstrap5.css
.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}
bootstrap5.css
.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}
bootstrap5.css
.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}
bootstrap5.css
.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}
bootstrap5.css
.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}
bootstrap5.css
.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}
bootstrap5.css
.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
bootstrap5.css
.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
bootstrap5.css
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
bootstrap5.css
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
bootstrap5.css
.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}
bootstrap5.css
.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
bootstrap5.css
.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}
bootstrap5.css
.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
bootstrap5.css
.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}
bootstrap5.css
.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}
bootstrap5.css
.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}
bootstrap5.css
.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}
bootstrap5.css
.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}
bootstrap5.css
.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}
bootstrap5.css
.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}
bootstrap5.css
.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}
bootstrap5.css
.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}
bootstrap5.css
.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}
bootstrap5.css
.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}
bootstrap5.css
.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}
bootstrap5.css
.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}
bootstrap5.css
.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}
bootstrap5.css
@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: 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
.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
@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
bootstrap5.css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
bootstrap5.css
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
bootstrap5.css
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
bootstrap5.css
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !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
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}
bootstrap5.css
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
bootstrap5.css
.text-justify {
  text-align: justify !important;
}
bootstrap5.css
.text-wrap {
  white-space: normal !important;
}
bootstrap5.css
.text-nowrap {
  white-space: nowrap !important;
}
bootstrap5.css
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
bootstrap5.css
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !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
.font-italic {
  font-style: italic !important;
}
bootstrap5.css
a.text-primary:hover,
a.text-primary:focus {
  color: #0056b3 !important;
}
bootstrap5.css
.text-secondary {
  color: #6c757d !important;
}
bootstrap5.css
a.text-secondary:hover,
a.text-secondary:focus {
  color: #494f54 !important;
}
bootstrap5.css
.text-success {
  color: #28a745 !important;
}
bootstrap5.css
a.text-success:hover,
a.text-success:focus {
  color: #19692c !important;
}
bootstrap5.css
a.text-info:hover,
a.text-info:focus {
  color: #0f6674 !important;
}
bootstrap5.css
a.text-warning:hover,
a.text-warning:focus {
  color: #ba8b00 !important;
}
bootstrap5.css
a.text-danger:hover,
a.text-danger:focus {
  color: #a71d2a !important;
}
bootstrap5.css
a.text-light:hover,
a.text-light:focus {
  color: #cbd3da !important;
}
bootstrap5.css
a.text-dark:hover,
a.text-dark:focus {
  color: #121416 !important;
}
bootstrap5.css
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.text-reset {
  color: inherit !important;
}
bootstrap5.css
.visible {
  visibility: visible !important;
}
bootstrap5.css
.invisible {
  visibility: hidden !important;
}
bootstrap5.css
@media print {
  /* 印刷字に利用するCSS mediaで大きく括って、それぞれのタグの設定をする */
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

html bootstrap5 Sample

等幅カラム、レスポンシブなし、そのまま縮小:rowとcol


1列目
2列目
1列目
2列目
3列目
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">1列目</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">2列目</div>
  </div>
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">1列目</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">2列目</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">3列目</div>
  </div>

合計12になるようにカラムの幅を指定する:col-2


col-2
col-4
col-6
  <!-- 画面の大きさにより12分割され、数字の値の幅が割り当てられる -->
  <div class="row">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-2" class="bg-warning text-dark">col-2">s://bttb.jp/bootstrap5/index.php?strkey=col-2" class="bg-warning text-dark">col-2</div>
    <div class="col-4">col-4</div>
    <div class="col-6">col-6</div>
  </div>

1カラムのみ幅を設定、残りは等価:col-6


col
col-6
col
  <div class="row">
    <div class="col">col</div>
    <!-- 1つに数字を指定すると、それが確保され、残りは自動で等価に設定される -->
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-6" class="bg-warning text-dark">col-6">s://bttb.jp/bootstrap5/index.php?strkey=col-6" class="bg-warning text-dark">col-6</div>
    <div class="col">col</div>
  </div>

可変幅カラム(コンテンツの文字数により幅が可変になる):col-auto


col
col-auto:コンテンツ文字数によってが幅が可変
col
col
col-md-auto:Medium以上でコンテンツ文字数によって幅が可変
col
  <div class="row">
    <div class="col">col</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto">s://bttb.jp/bootstrap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto:コンテンツ文字数によってが幅が可変</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <!-- col-mdは、Medium以上の指定方法 -->
    <div class="col-md-auto">col-md-auto:Medium以上でコンテンツ文字数によって幅が可変</div>
    <div class="col">col</div>
  </div>

1つのrow内で12を超える場合、勝手に折り返り:col-9


col-9
col-4
col-6
  <div class="row">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-9" class="bg-warning text-dark">col-9">s://bttb.jp/bootstrap5/index.php?strkey=col-9" class="bg-warning text-dark">col-9</div>
    <div class="col-4">col-4</div>
    <div class="col-6">col-6</div>
  </div>

colなしを挿入すると、そこで折り返しが起こる:w-100


col
col
w-100
col
col
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=w-100" class="bg-warning text-dark">w-100">s://bttb.jp/bootstrap5/index.php?strkey=w-100" class="bg-warning text-dark">w-100</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

ブレイクポイントによる切り替え:col-sm-8


col-sm-8
col-sm-4
col-sm
col-sm
col-sm
  <!-- col-smの指定がブレークポイントとして機能する、スマートフォン(横持ち)の場合の指定ー -->
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>

グリッドレイアウトのネスト(入れ子、階層化):colとrow


第1階層: col-sm-9
第2階層: col-8
第2階層: col-4
第1階層: col-sm-3
  <!-- s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowの幅は、ひとつ上のhtmlタグの幅に制約を受けて100%になる -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-9">第1階層: s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-9
      <!-- 階層化s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">colの中にs://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row、s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">colの幅を基準にして12の計算が始まる -->
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row">
        <!-- s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">colを2つ書くと、それぞれの画面の状況により適用されるものが変わる -->
        <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-8">第2階層: s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-8</div>
        <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-4">第2階層: s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-4</div>
      </div>
    </div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-3">第1階層: s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col-sm-3</div>
  </div>

左寄せで配置:justify-content:flex-start


col-4
col-4
  <!-- 左寄せでスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-start">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

中央寄せで配置:justify-content:flex-center


col-4
col-4
  <!-- 中央寄席でスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-center">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

右寄せで配置:justify-content:flex-end


col-4
col-4
  <!-- 右寄せでスタート、12の残りは勝手に余白になる -->
  <div class="row justify-content-end">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

等間隔に配置:justify-content:space-around


col-4
col-4
  <!-- 中央に等間隔に配置され、残りは勝手に余白になる -->
  <div class="row justify-content-around">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

両端から均等に配置:justify-content:space-between


col-4
col-4
  <!-- 左右に配置され、残りは勝手に余白になる -->
  <div class="row justify-content-between">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>

カラム単位での垂直方向整列:align-self-*


align-self-start
align-self-center
align-self-end
  <div class="row">
    <!-- 垂直上寄せ -->
    <div class="col align-self-start">align-self-start</div>
    <!-- 垂直中央寄せ -->
    <div class="col align-self-center">align-self-center</div>
    <!-- 垂直下寄せ -->
    <div class="col align-self-end">align-self-end</div>
  </div>

画面の状況でカラムの幅を変える、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 s://bttb.jp/bootstrap5/index.php?strkey=col-md-8" class="bg-warning text-dark">col-md-8">col-12とs://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>

画面の状況で変える、Medium以上:Medium以上:col-md-4


col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4
  <div class="row">
    <!-- Medium以下なら、2列カラムにある-->
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
  </div>

行の分割をブレイクポイントで切り替える: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 s://bttb.jp/bootstrap5/index.php?strkey=d-none" class="bg-warning text-dark">d-none s://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>

ガターなしカラム:no-gutters


col
col
  <!-- ガターは、グリッドのカラム間にある余白のこと -->
  <!-- 画面いっぱいに広がる -->
  <div class="row no-gutters">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

何も書かなければガターあり(はみ出る):rowとcol


col
col
  <!-- 文字開始位置が、divに隣接しない -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col</div>
  </div>

カラムのオフセット offset-md-4


col-md-4
col-md-4とoffset-md-4
  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <!-- Medium以上で4列分左に移動 -->
    <!-- margin-left: 33.333333%; マージンレフトを設定して間を空ける-->
    <div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div>
  </div>

オフセットのリセット:offset-md-0


col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
  <div class="row">
    <div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
    <!-- Medium以上でオフセットをクリア -->
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
  </div>

コンテンツの並べ替え:order-1~order-12


第1のカラム(順序指定なし)
第2のカラム(順序指定は12)
第3のカラム(順序指定は1)
  <div class="row">
    <!-- orderの数字の小さい順に並ぶ、プログラムでhtmlを書くときは便利 -->
    <div class="col">第1のカラム(順序指定なし)</div>
    <div class="col order-12">第2のカラム(順序指定は12)</div>
    <div class="col order-1">第3のカラム(順序指定は1)</div>
  </div>

コンテンツの並べ替え:order-first


第1のカラム(順序指定なし)
第2のカラム(順序指定なし)
第3のカラム(順序指定は1)
  <div class="row">
    <div class="col">第1のカラム(順序指定なし)</div>
    <div class="col">第2のカラム(順序指定なし)</div>
    <!-- order-firstが最初に並ぶ、プログラムでhtmlを書くときは便利 -->
    <div class="col order-first">第3のカラム(順序指定は1)</div>
  </div>

垂直整列:align-items-startとalign-items-centerとalign-items-end


col
col
col
col
col
col
col
col
col
  <!-- 上寄せ高さは隣接rowで決まる模様 -->
  <div class="row align-items-start">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row align-items-center">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <!-- 下寄せ高さは隣接rowで決まる模様 -->
  <div class="row align-items-end">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

flexデフォルト、左から並ぶ、改行はしない:d-flex


flex文字01
flex文字02
 
flex文字03
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=d-flex" class="bg-warning text-dark">d-flex">
    <!-- 文字数等の大きさにより並んでいくだけ(自動マージンなし) -->
    <div>flex文字01</div>
    <div>flex文字02</div> 
    <div>flex文字03</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 s://bttb.jp/bootstrap5/index.php?strkey=flex-nowrap" class="bg-warning text-dark">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 s://bttb.jp/bootstrap5/index.php?strkey=flex-wrap" class="bg-warning text-dark">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文字の表示順序を入れ替えるクラス:order


flex文字01
flex文字02
flex文字03
  <!-- htmlの書いた順ではなく、s://bttb.jp/bootstrap5/index.php?strkey=order" class="bg-warning text-dark">orderの数値123順に並ぶ -->
  <div class="d-flex">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=order" class="bg-warning text-dark">order-1">flex文字01</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=order" class="bg-warning text-dark">order-3">flex文字02</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=order" class="bg-warning text-dark">order-2">flex文字03</div>
  </div>

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


flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- s://bttb.jp/bootstrap5/index.php?strkey=mr-auto" class="bg-warning text-dark">mr-autoが左寄せ -->
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=mr-auto" class="bg-warning text-dark">mr-auto">flex文字1</div>
    <div>flex文字2</div>
    <div>flex文字3</div>
  </div>

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


flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- mr-autoが右寄せ -->
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=ml-auto" class="bg-warning text-dark">ml-auto p-2">flex文字3</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <!-- flex文字の幅で伸長する -->
  <div class="s://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 s://bttb.jp/bootstrap5/index.php?strkey=flex-grow" class="bg-warning text-dark">flex-grow-1">flex文字01(s://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 flex-shrink-1">flex文字01(flex-shrink-1)</div>
    <div class="p-2 w-100">flex文字02</div>
    <div class="p-2 w-100">flex文字03</div>
  </div>

flex幅を隙間をなくして伸縮均衡:flex-fill


flex文字01
flex文字
flex文字
  <div class="d-flex">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=flex-fill" class="bg-warning text-dark">flex-fill">flex文字01</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=flex-fill" class="bg-warning text-dark">flex-fill">flex文字</div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=flex-fill" class="bg-warning text-dark">flex-fill">flex文字</div>
  </div>

flexコンテナの主軸方向 左から右:flex-row


flex文字01
flex文字02
flex文字03
  <div class="d-flex s://bttb.jp/bootstrap5/index.php?strkey=flex-row" class="bg-warning text-dark">flex-row">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

flex横の均等配置/左詰めで整列:justify-content-start


flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-start">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

flex横の均等配置/右詰めで整列:justify-content-end


flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-end">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

flex横の均等配置/センタに整列:justify-content-center


flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-center">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

flex横の均等配置/左と右は合わせて、間隔、余白ありで整列:justify-content-between


flex文字01
flex文字02
flex文字0333333
  <div class="d-flex justify-content-between">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字0333333</div>
  </div>

flex横の均等配置/センターで間隔、余白ありで整列:justify-content-around


flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-around">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


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

flex縦の均等配置/順序を反転させて下段からスタートする: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 s://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 s://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 s://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 s://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 align-content-stretch flex-wrap" style="height: 400px">
    <!-- height固定のサイズで、flaxの高さも自動で調整する -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-start" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-end" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-stretch" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-center" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


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

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


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

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


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

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


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

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


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

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


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

flexコンテナー内のアイテムの配置/rowで右から左:flex-row-reverse


flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-row-reverse">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/上から下:flex-column


flex文字01
flex文字02
flex文字03
  <div class="d-flex s://bttb.jp/bootstrap5/index.php?strkey=flex-column" class="bg-warning text-dark">flex-column">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

flexコンテナー内のアイテムの配置/下から上:flex-column-reverse


flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-column-reverse">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


...

カードのタイトル

カードの内容

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

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


背景色、文字色指定なし

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

背景色:bg-light

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色、文字色指定なし</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white s://bttb.jp/bootstrap5/index.php?strkey=bg-primary" class="bg-warning text-dark">bg-primary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色:s://bttb.jp/bootstrap5/index.php?strkey=bg-primary" class="bg-warning text-dark">bg-primary、文字色:s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white bg-secondary mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色:bg-secondary、文字色:s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white bg-success mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色:bg-success、文字色:s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white bg-danger mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色:bg-danger、文字色:s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white bg-warning mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色:bg-warning、文字色:s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white bg-info mb-3" style="max-width: 25rem;">
    <div class="card-header">背景色:bg-info、文字色:s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">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 s://bttb.jp/bootstrap5/index.php?strkey=text-white" class="bg-warning text-dark">text-white bg-dark mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

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


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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

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


カードのヘッダー

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card mb-3" style="max-width: 25rem;">
    <div class="card-header">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>
  <!-- カード枠のボーダー色:青 s://bttb.jp/bootstrap5/index.php?strkey=border-primary" class="bg-warning text-dark">border-primary -->
  <div class="card s://bttb.jp/bootstrap5/index.php?strkey=border-primary" class="bg-warning text-dark">border-primary mb-3" style="max-width: 25rem;">
    <!-- ヘッダーのボーダー色:青 s://bttb.jp/bootstrap5/index.php?strkey=border-primary" class="bg-warning text-dark">border-primary -->
    <div class="card-header s://bttb.jp/bootstrap5/index.php?strkey=border-primary" class="bg-warning text-dark">border-primary">カードのヘッダー</div>
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
  </div>

カードデッキによるレイアウト:card-deck


...

カード01

カードの内容

...

カード02

カードの内容

...

カード03

カードの内容

カードの内容

  <div class="s://bttb.jp/bootstrap5/index.php?strkey=card-deck" class="bg-warning text-dark">card-deck">
    <!-- 複数のカードをレイアウトするためにs://bttb.jp/bootstrap5/index.php?strkey=card-deck" class="bg-warning text-dark">card-deckを使う、隙間ができる -->
    <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>
    <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>
    <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-group


...

カード01

カードの内容

...

カード02

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

...

カード03

カードの内容

カードの内容

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

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


...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="card-columns">
    <!-- ★複数のカードをレイアウトするために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">
      <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-right">
      <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="s://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card">
        <div class="s://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-body">
          <h4 class="s://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-title">カードのタイトル</h4>
          <p class="s://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="s://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card">
        <div class="s://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-body">
          <h4 class="s://bttb.jp/bootstrap5/index.php?strkey=card" class="bg-warning text-dark">card-title">カードのタイトル</h4>
          <p class="s://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


...

カードの内容

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

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


カードの内容

...
  <!-- カード下部に画像を配置:s://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="s://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=.s://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="s://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>

カード内のボーダーの無いリストグループ: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 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 s://bttb.jp/bootstrap5/index.php?strkey=w-75" class="bg-warning text-dark">w-75">
    <div class="card-body">
      <h4 class="card-title">カードの幅指定:s://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-right


標準(左寄せ)

カードの内容

ボタン

中央寄せ:text-center

カードの内容

ボタン

右寄せ:text-right

カードの内容

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

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


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

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


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

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


border-0 border-top-0 border-right-0 border-bottom-0 border-left-0
  <!-- 全ボーダー削除 -->
  <span class="border s://bttb.jp/bootstrap5/index.php?strkey=border-0" class="bg-warning text-dark">border-0">s://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-right-0">border-right-0</span>
  <span class="border border-bottom-0">border-bottom-0</span>
  <span class="border border-left-0">border-left-0</span>

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


  <div class="text-center">
    <p><a href="#" class="s://bttb.jp/bootstrap5/index.php?strkey=text-primary" class="bg-warning text-dark">text-primary">s://bttb.jp/bootstrap5/index.php?strkey=text-primary" class="bg-warning text-dark">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="s://bttb.jp/bootstrap5/index.php?strkey=bg-primary" class="bg-warning text-dark">bg-primary text-white d-block py-2">s://bttb.jp/bootstrap5/index.php?strkey=bg-primary" class="bg-warning text-dark">bg-primary</a></p>
    <p><a href="#" class="bg-secondary text-white d-block py-2">bg-secondary</a></p>
    <p><a href="#" class="bg-success text-white d-block py-2">bg-success</a></p>
    <p><a href="#" class="bg-danger text-white d-block py-2">bg-danger</a></p>
    <p><a href="#" class="bg-warning text-dark d-block py-2">bg-warning</a></p>
    <p><a href="#" class="bg-info text-white d-block py-2">bg-info</a></p>
    <p><a href="#" class="bg-light text-dark d-block py-2">bg-light</a></p>
    <p><a href="#" class="bg-dark text-white d-block py-2">bg-dark</a></p>
    <p><a href="#" class="bg-white text-dark d-block py-2">bg-white</a></p>
    <p><a href="#" class="bg-transparent d-block py-2">bg-transparent</a></p>
  </div>

幅を指定する:w-25


w-25
w-50
w-75
w-100
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=w-25" class="bg-warning text-dark">w-25 border">s://bttb.jp/bootstrap5/index.php?strkey=w-25" class="bg-warning text-dark">w-25</div>
  <div class="w-50 border">w-50</div>
  <div class="w-75 border">w-75</div>
  <div class="w-100 border">w-100</div>

高さを指定する:h-25


h-25
h-50
h-75
h-100
  <!-- ★inlineだと高さが変らない? -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=h-25" class="bg-warning text-dark">h-25 d-inline-block border">s://bttb.jp/bootstrap5/index.php?strkey=h-25" class="bg-warning text-dark">h-25</div>
  <div class="h-50 d-inline-block border">h-50</div>
  <div class="h-75 d-inline-block border">h-75</div>
  <div class="h-100 d-inline-block border">h-100</div>

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


  <!-- ★最大値が機能しない? -->
  <img class="s://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="">

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


  <img class="s://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="">

スクリーンリーダー非表示だけど非視覚者のみに読み上げる:sr-only


  <a class="sr-only sr-only-focusable" href="#">メインコンテンツへスキップ</a>

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


text-left

text-center

text-right

  <p class="s://bttb.jp/bootstrap5/index.php?strkey=text-left" class="bg-warning text-dark">text-left">s://bttb.jp/bootstrap5/index.php?strkey=text-left" class="bg-warning text-dark">text-left</p>
  <p class="text-center">text-center</p>
  <p class="text-right">text-right</p>

大文字と小文字を変換する:text-capitalize


Lowercased text.

Uppercased text.

CapiTaliZed text.

  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>
  <p class="s://bttb.jp/bootstrap5/index.php?strkey=text-capitalize" class="bg-warning text-dark">text-capitalize">CapiTaliZed text.</p>

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


太字(font-italic)

通常(font-weight-normal)

細字(font-weight-light)

イタリック体(font-italic)

  <p class="font-weight-bold">太字(s://bttb.jp/bootstrap5/index.php?strkey=font-italic" class="bg-warning text-dark">font-italic)</p>
  <p class="font-weight-normal">通常(font-weight-normal)</p>
  <p class="font-weight-light">細字(font-weight-light)</p>
  <p class="s://bttb.jp/bootstrap5/index.php?strkey=font-italic" class="bg-warning text-dark">font-italic">イタリック体(s://bttb.jp/bootstrap5/index.php?strkey=font-italic" class="bg-warning text-dark">font-italic)</p>

文字を均等割付(幅前提)する:text-justify


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

  <p class="text-justify">Bootstrapで、文字を均等割付する。</p>

等幅フォント:text-monospace


monospace
日本語の場合

  <p class="text-monospace">monospace<br>日本語の場合</p>

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


text-Lowercase(すべて小文字)

text-uppercase(すべて大文字)

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

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

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


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

  <p class="s://bttb.jp/bootstrap5/index.php?strkey=text-truncate" class="bg-warning text-dark">text-truncate s://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

h3.display-2

h3.display-3

h3.display-4

  <h3>h3(標準)</h3>
  <!-- 高さも変わる、h1よりさらに大きく -->
  <h3 class="display-1">h3.display-1</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>

マーク:mark


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

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

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

スモール:small


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

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

  <p><small>「small要素」</small>を使って、テキストを細目・注釈を表すテキストとして小さなサイズで表示させることができます。</p>
  <p><span class="small">「smallクラス」</span>を使用してsmall要素とスタイルを一致させることもできます。</p>

強調:strongとb


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

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

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

英語を斜体で表示:em


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

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

リード文:lead


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

標準的な段落(p)

  <p class="s://bttb.jp/bootstrap5/index.php?strkey=lead" class="bg-warning text-dark">lead">目立たせたい段落(p.s://bttb.jp/bootstrap5/index.php?strkey=lead" class="bg-warning text-dark">lead)</p>
  <p>標準的な段落(p)</p>

取り消し線:s


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

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

下線:ins


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

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

サブタイトル:text-muted


主タイトル キャプチャー サブタイトル(text-muted)

  <h4>主タイトル <small class="s://bttb.jp/bootstrap5/index.php?strkey=text-muted" class="bg-warning text-dark">text-muted">キャプチャー サブタイトル(s://bttb.jp/bootstrap5/index.php?strkey=text-muted" class="bg-warning text-dark">text-muted)</small></h4>

サンプル出力: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>

引用:blockquote


基本の引用文です。

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

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


基本の引用文です。

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

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


基本の引用文です。

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

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


基本の引用文です。

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

略語:abbr


HTML

HTML

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

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


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

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


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

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


  <div class="s://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert s://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert-success" role="s://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert">
    <h4 class="s://bttb.jp/bootstrap5/index.php?strkey=alert" class="bg-warning text-dark">alert-heading">アラートのタイトル</h4>
    <p>アラートの内容</p>
    <p class="mb-0"><a href="#" class="s://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>

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


primary 1

secondary 11

success 111

danger 1111

warning 0

info 99

light 999

dark 9999

  <p>primary <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-primary">1</span></p>
  <p>secondary <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-secondary">11</span></p>
  <p>success <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-success">111</span></p>
  <p>danger <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-danger">1111</span></p>
  <p>warning <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-warning">0</span></p>
  <p>info <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-info">99</span></p>
  <p>light <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-light">999</span></p>
  <p>dark <span class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-dark">9999</span></p>

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


Primary Secondary Success Danger Warning Info Light Dark
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-primary">Primary</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-secondary">Secondary</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-success">Success</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-danger">Danger</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-warning">Warning</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-info">Info</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-light">Light</span>
  <span class="badge s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill badge-dark">Dark</span>

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


  <a href="#" class="s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-success">s://bttb.jp/bootstrap5/index.php?strkey=badge" class="bg-warning text-dark">badge-primary</a>

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


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

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


  <!-- sr-onlyは非表示で、スクリーンリーダのみ読み上げます -->
  <button type="button" class="btn btn-primary">
    未読メッセージ <span class="badge badge-light">9</span>
    <span class="sr-only">未読メッセージ</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="s://bttb.jp/bootstrap5/index.php?strkey=d-inline" class="bg-warning text-dark">d-inline bg-primary text-white">インライン表示のdiv</div>
  <div class="s://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="s://bttb.jp/bootstrap5/index.php?strkey=d-block" class="bg-warning text-dark">d-block bg-primary text-white">ブロック表示のspan</span>
  <span class="s://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="s://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="s://bttb.jp/bootstrap5/index.php?strkey=d-print-none" class="bg-warning text-dark">d-print-none">スクリーンのみ表示(印刷時のみ非表示)</div>
  <div class="d-none d-print-block">印刷時のみ表示(スクリーンでは非表示)</div>

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


  <!-- 大きさが自動調整される -->
  <!-- アスペクト比を持つ親要素に iframe のような埋め込みをラップします -->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/SGqg_ZzThDU?rel=0"
      allowfullscreen></iframe>
  </div>

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


float-left float-right float-none
  <!-- spanだからinlineで、文字数分だけ表示される、それをフロート -->
  <!-- 重ならない、前の要素の後に、順番が適用されていく -->
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=float-left" class="bg-warning text-dark">float-left">s://bttb.jp/bootstrap5/index.php?strkey=float-left" class="bg-warning text-dark">float-left</span>
  <span class="float-right">float-right</span>
  <span class="float-none">float-none</span>

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


float-left
float-right
float-none
  <!-- 改行brを入れると、その行でフロートが効く -->
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=float-left" class="bg-warning text-dark">float-left">s://bttb.jp/bootstrap5/index.php?strkey=float-left" class="bg-warning text-dark">float-left</span><br>
  <span class="float-right">float-right</span><br>
  <span class="float-none">float-none</span>

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


SM(small)以上で左寄せ
MD (medium)以上で左寄せ
LG (large)以上で左寄せ
XL (extra-large)以上で左寄せ
  <span class="float-sm-right">SM(small)以上で左寄せ</span><br>
  <span class="float-md-right">MD (medium)以上で左寄せ</span><br>
  <span class="float-lg-right">LG (large)以上で左寄せ</span><br>
  <span class="float-xl-right">XL (extra-large)以上で左寄せ</span>

フロートを解除する:clearfix


右フロート
  <!-- afterでフロート解除が行われるので、フロートではないコンテンツが回り込まずに別ブロックに表示される -->
  <!-- 重なっていない浮いているから背景色出る -->
  <!-- 幅50でmx-autoで赤色を指定している -->
  <div class="w-50 mx-auto bg-danger s://bttb.jp/bootstrap5/index.php?strkey=clearfix" class="bg-warning text-dark">clearfix">
    <div class="float-right bg-success">右フロート</div>
  </div>

フロートを解除しない(重なっているので背景色がでない)


右フロート
  <div class="w-50 mx-auto bg-danger">
    <div class="float-right bg-success">右フロート</div>
  </div>

Float(画像と文字):float-left


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

Float(画像同士)左と右:float-leftとfloat-right


左寄せ画像 右寄せ画像
  <!-- divでclearfixなので、/div後はfloatを引きずらない -->
  <div class="clearfix">
    <img src="https://via.placeholder.com/200x200" class="s://bttb.jp/bootstrap5/index.php?strkey=float-left" class="bg-warning text-dark">float-left" alt="左寄せ画像">
    <img src="https://via.placeholder.com/200x200" class="s://bttb.jp/bootstrap5/index.php?strkey=float-right" class="bg-warning text-dark">float-right" alt="右寄せ画像">
  </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-inline


  • インラインリスト項目
  • インラインリスト項目
  • インラインリスト項目
  <ul class="list-inline">
    <li class="list-inline-item">インラインリスト項目</li>
    <li class="list-inline-item">インラインリスト項目</li>
    <li class="list-inline-item">インラインリスト項目</li>
  </ul>

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


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

リスト項目をアクティブ状態にする:active


  • リスト項目1
  • リスト項目2
  • リスト項目3
  <ul class="list-group">
    <li class="list-group-item s://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">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


  • リスト項目1
  • リスト項目2
  • リスト項目3
  <ul class="list-group">
    <li class="list-group-item disabled">リスト項目1</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 s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary s://bttb.jp/bootstrap5/index.php?strkey=badge-pill" class="bg-warning text-dark">badge-pill">1</span>
    </li>
  </ul>

定義リスト:dlとdtとdd


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

divとaタグでリストグループ:list-groupとlist-group-item


  <!-- サイドメニューでリンクさせる -->
  <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>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </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


  <!-- s://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 s://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 s://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 s://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 s://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 s://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 s://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 s://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 s://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 s://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active">これはアクティブ状態の「デフォルト(何も設定なし)」</a>
  </div>

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


  <div class="list-group">
    <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">hヘッダ</h5>
        <small>smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</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">hヘッダ</h5>
        <small class="text-muted">smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</p>
      <small class="text-muted">smallコンテンツ</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>

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


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

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


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table s://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>
      <tr>
        <td>タイトル</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

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


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

テーブルthead:thead-dark


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

テーブルthead: thead-light


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

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


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

th,tdの背景色:bg-*


th(標準) th.bg-primary
td.bg-success td.bg-warning
td.bg-danger td.bg-info
  <table class="table table-dark">
    <tr>
      <th>th(標準) </th>
      <th class="s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-primary">th.s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-primary</th>
    </tr>
    <tr>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-success">td.s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-success</td>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-warning">td.s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-warning</td>
    </tr>
    <tr>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-danger">td.s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-danger </td>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-info">td.s://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-info</td>
    </tr>
  </table>

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


背景色用のクラス タイトル タイトル タイトル
なし(標準) データ データ データ
table-active データ データ データ
table-primary データ データ データ
table-secondary データ データ データ
table-success データ データ データ
table-danger データ データ データ
table-warning データ データ データ
table-info データ データ データ
table-light データ データ データ
table-dark データ データ データ
  <table class="table">
    <thead>
      <tr>
        <th scope="col">背景色用のクラス</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>なし(標準)</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-active">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-active</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-success">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-info">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-light">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-light</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark">
        <td>s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

th,tdの背景色:table-*


th(標準) table-active
table-primary table-secondary
table-success table-danger
table-warning table-info
table-light table-dark
  <table class="table">
    <tr>
      <td>th(標準) </th>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-active">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-active</th>
    </tr>
    <tr>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-primary</td>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-secondary</td>
    </tr>
    <tr>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-success">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-success </td>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-danger</td>
    </tr>
    <tr>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-warning</td>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-info">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-info</td>
    </tr>
    <tr>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-light">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-light </td>
      <td class="s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark">s://bttb.jp/bootstrap5/index.php?strkey=table-" class="bg-warning text-dark">table-dark</td>
    </tr>
  </table>

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


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table s://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>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>

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


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

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


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

テーブル:table-sm


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

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


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <!-- tableタグに設定するのではなく、divで囲む -->
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

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


タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-sm mb-5">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>

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


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


  <nav>
    <ul class="s://bttb.jp/bootstrap5/index.php?strkey=pagination" class="bg-warning text-dark">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>
    <ul class="pagination 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 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>
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">«</span><span
            class="sr-only">前へ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">»</span><span
            class="sr-only">次へ</span></a></li>
    </ul>
  </nav>

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


  <nav>
    <ul class="pagination">
      <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 active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</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 s://bttb.jp/bootstrap5/index.php?strkey=pagination-lg" class="bg-warning text-dark">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>

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


  <div class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown">
    <button class="btn btn-secondary s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-toggle" type="button" id="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdownMenuButton" s://bttb.jp/bootstrap5/index.php?strkey=data-toggle" class="bg-warning text-dark">data-toggle="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-menu" aria-labelledby="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdownMenuButton">
      <a class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">メニュー01</a>
      <a class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">メニュー02</a>
      <a class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown" class="bg-warning text-dark">dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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


  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=btn-group" class="bg-warning text-dark">btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      ドロップダウン
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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


  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown-menu" class="bg-warning text-dark">dropdown-menu" aria-labelledby="dropdownMenuButton">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <div class="dropdown-menu s://bttb.jp/bootstrap5/index.php?strkey=dropdown-menu-right" class="bg-warning text-dark">dropdown-menu-right">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>

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


  <div class="dropdown">
    <!-- 切り替えボタン -->
    <a class="btn btn-secondary s://bttb.jp/bootstrap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" href="#">メニュー02(無効)</a>
      <a class="dropdown-item s://bttb.jp/bootstrap5/index.php?strkey=active" class="bg-warning text-dark">active" href="#">メニュー03(アクティブ)</a>
    </div>
  </div>

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


  <div class="container py-5 d-flex justify-content-center">
    <!-- 左方向へのドロップ -->
    <div class="btn-group s://bttb.jp/bootstrap5/index.php?strkey=dropleft" class="bg-warning text-dark">dropleft">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

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


  <div class="container py-5 d-flex justify-content-center">
    <!-- 右方向へのドロップ -->
    <div class="btn-group s://bttb.jp/bootstrap5/index.php?strkey=dropright" class="bg-warning text-dark">dropright">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">右方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

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


  <div class="container py-5 d-flex justify-content-center">
    <!-- 上方向へのドロップ -->
    <div class="btn-group s://bttb.jp/bootstrap5/index.php?strkey=dropup" class="bg-warning text-dark">dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">上方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

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


  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <!-- ata-boundary="scrollParent"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
        s://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>

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







  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <!-- s://bttb.jp/bootstrap5/index.php?strkey=data-flip" class="bg-warning text-dark">data-flip="true"-->
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" s://bttb.jp/bootstrap5/index.php?strkey=data-flip" class="bg-warning text-dark">data-flip="true">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
      </div>
    </div>
  </div>

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


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

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


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

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary s://bttb.jp/bootstrap5/index.php?strkey=dropdown-toggle" class="bg-warning text-dark">dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=dropdown-menu" class="bg-warning text-dark">dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

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


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

ドロップダウンで用意されているJSメソッド:dropdpown('toggle')


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

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


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

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


  <div class="btn-group">
    <button type="button" class="btn btn-secondary">スプリットボタン</button>
    <!-- ボタンとメニューを分割して表示する -->
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
    </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>

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


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

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


図表の画像
図表キャプション左寄せ(デフォルト)(text-left:デフォルト)
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption s://bttb.jp/bootstrap5/index.php?strkey=text-left" class="bg-warning text-dark">text-left">図表キャプション左寄せ(デフォルト)(s://bttb.jp/bootstrap5/index.php?strkey=text-left" class="bg-warning text-dark">text-left:デフォルト)</figcaption>
  </figure>

図表キャプション中央寄せ: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 s://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-center">図表キャプション中央寄せ(s://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-center)</figcaption>
  </figure>

図表キャプション右寄せ:text-right


図表の画像
図表キャプション右寄せ(text-right)
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption s://bttb.jp/bootstrap5/index.php?strkey=text-right" class="bg-warning text-dark">text-right">図表キャプション右寄せ(s://bttb.jp/bootstrap5/index.php?strkey=text-right" class="bg-warning text-dark">text-right)</figcaption>
  </figure>

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


レスポンシブ画像
  <img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="s://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="s://bttb.jp/bootstrap5/index.php?strkey=mx-auto" class="bg-warning text-dark">mx-auto s://bttb.jp/bootstrap5/index.php?strkey=d-block" class="bg-warning text-dark">d-block" alt="中央寄せ画像">

画像の中央寄せ:text-center


中央寄せ画像
  <!-- divにclassを設定する -->
  <div class="s://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="s://bttb.jp/bootstrap5/index.php?strkey=img-thumbnail" class="bg-warning text-dark">img-thumbnail" alt="サムネイル画像">

ジャンボトロン:jumbotron


Jumbotron

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

  <!-- ジャンボトロンは、大型表示で、トップ見出しなどに使う用語 -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=jumbotron" class="bg-warning text-dark">jumbotron">
    <h4 class="display-3">Jumbotron</h4>
    <p class="lead">これはジャンボトロンのサンプルです。</p>
  </div>

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


Fluid jumbotron

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

  <div class="jumbotron s://bttb.jp/bootstrap5/index.php?strkey=jumbotron-fluid" class="bg-warning text-dark">jumbotron-fluid">
    <div class="container">
      <h4 class="display-3">Fluid jumbotron</h4>
      <p class="lead">これは全幅のジャンボトロンのサンプルです。</p>
    </div>
  </div>

影:Shadows


影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-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-right rounded-bottom rounded-left rounded-circle rounded-0
  <!-- 背景色を設定しない限り適用されない、背景に適用される -->
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded</span>
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-top bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-top</span>
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-right bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-right</span>
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-bottom bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-bottom</span>
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-left bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-left</span>
  <!-- サークル -->
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-circle bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-circle</span>
  <span class="s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-0 bg-warning">s://bttb.jp/bootstrap5/index.php?strkey=rounded" class="bg-warning text-dark">rounded-0</span>

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


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

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


formタイトル

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトル
  </h3>
  <div class="form-row">
    <!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-control">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="form-group col-sm-6">
      <label for="file1">File:</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

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


  <form>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <!-- inputの枠を表示しない -->
        <input type="text" class="s://bttb.jp/bootstrap5/index.php?strkey=form-control-plaintext" class="bg-warning text-dark">form-control-plaintext" readonly id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <!-- passwordを使うと、入力内容が*として表示される -->
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>

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



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

ファイル選択:custom-file


  <form>
    <div class="mb-5">
      <input type="file" id="dafaultFile" lang="ja">
      <label for="dafaultFile">ファイル選択...</label>
    </div>
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFile" lang="ja">
      <label class="custom-file-label" for="customFile">ファイル選択...</label>
    </div>
  </form>

チェックボックスを横並びに変更する:form-check-inline


  <form>
    <!-- form-groupではなく、form-checkを使う -->
    <div class="form-check s://bttb.jp/bootstrap5/index.php?strkey=form-check-inline" class="bg-warning text-dark">form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox02" value="option1">
      <label class="form-check-label" for="checkbox02">1</label>
    </div>
    <div class="form-check s://bttb.jp/bootstrap5/index.php?strkey=form-check-inline" class="bg-warning text-dark">form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox03" value="option2">
      <label class="form-check-label" for="checkbox03">2</label>
    </div>
    <div class="form-check s://bttb.jp/bootstrap5/index.php?strkey=form-check-inline" class="bg-warning text-dark">form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox04" value="option3" disabled>
      <label class="form-check-label" for="checkbox04">3</label>
    </div>
  </form>

チェックボックスを無効にする:disabled


  <form>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" value="" id="checkbox06" disabled>
      <label class="form-check-label" for="checkbox06">チェック(無効)</label>
    </div>
  </form>

ラベル表示のない項目を作成する


  <form>
    <div class="form-check">
      <input type="checkbox" class="form-check-input position-static" id="checkbox07" value="option1" aria-label="...">
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input position-static" name="blankRadio" id="blankRadio1" value="option1"
        aria-label="...">
    </div>
  </form>

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


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

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


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

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


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

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


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

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


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

プルダウンメニュー:custom-select


  <form>
    <select class="custom-select" multiple>
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>

カスタムプルダウンメニュー選択肢の数を指定:custom-select


  <form>
    <select class="custom-select" size="2">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>

プルダウンメニュー 大:custom-select-lg


  <form>
    <select class="custom-select custom-select-lg">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>

プルダウンメニュー 小:custom-select-sm


  <form>
    <select class="custom-select custom-select-sm">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>

fromにグリッドレイアウトを利用する:rowとcol


  <form>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">row">
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">
        <input type="text" class="form-control" placeholder="姓">
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">col">
        <input type="text" class="form-control" placeholder="名">
      </div>
    </div>
  </form>

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


  <form>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-row" class="bg-warning text-dark">form-row align-items-center">
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto">
        <label class="sr-only" for="inputName">氏名</label>
        <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto">
        <label class="sr-only" for="inputUsername">ユーザーネーム</label>
        <div class="input-group mb-2">
          <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
        </div>
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto">
        <div class="form-check mb-2">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> チェックする </label>
        </div>
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=col-auto" class="bg-warning text-dark">col-auto">
        <button type="submit" class="btn btn-primary mb-2">送信</button>
      </div>
    </div>
  </form>

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


  <form>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-row" class="bg-warning text-dark">form-row">
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group s://bttb.jp/bootstrap5/index.php?strkey=col-md-6" class="bg-warning text-dark">col-md-6">
        <label for="inputEmail">メールアドレス</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group s://bttb.jp/bootstrap5/index.php?strkey=col-md-6" class="bg-warning text-dark">col-md-6">
        <label for="inputPassword">パスワード</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-row" class="bg-warning text-dark">form-row">
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group col-md-4">
        <label for="inputState">国</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group col-md-2">
        <label for="inputZip">郵便番号</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group s://bttb.jp/bootstrap5/index.php?strkey=col-md-6" class="bg-warning text-dark">col-md-6">
        <label for="inputCity">都道府県</label>
        <input type="text" class="form-control" id="inputCity">
      </div>
    </div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group">
      <label for="inputAddress1">住所1</label>
      <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
    </div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group">
      <label for="inputAddress2">住所2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
    </div>
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=form-group" class="bg-warning text-dark">form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check">
        <label class="form-check-label" for="check">チェックする</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">サインイン</button>
  </form>

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


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

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


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

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


@
  <!-- formにclassを設定する -->
  <form class="s://bttb.jp/bootstrap5/index.php?strkey=form-inline" class="bg-warning text-dark">form-inline">
    <label class="sr-only" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="sr-only" for="username">ユーザーネーム</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">
        チェックする
      </label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>

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


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

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


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

カスタムセレクト:custom-select


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

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


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

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


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

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


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

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


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

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


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

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


  <div class="input-group">
    <input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=input-group-append" class="bg-warning text-dark">input-group-append">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">アクション</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
      </div>
    </div>
  </div>

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


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

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


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

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


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

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


Default
  <!-- 標準サイズの入力グループ -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group mb-3">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group-prepend">
      <span class="s://bttb.jp/bootstrap5/index.php?strkey=input-group" class="bg-warning text-dark">input-group-text" id="inputGroup-sizing-default">Default</span>
    </div>
    <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
  </div>

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


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

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


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

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


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

ツールチップJS:valid-tooltip


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

レンジ入力:form-control-range


  <!-- レンジ上の●をマウスで動かして入力させる -->
  <form>
    <div class="form-group">
      <label for="formControlRange">レンジ入力の例</label>
      <input type="range" class="s://bttb.jp/bootstrap5/index.php?strkey=form-control-range" class="bg-warning text-dark">form-control-range" id="formControlRange">
    </div>
  </form>

カスタムレンジ入力:custom-range


  <!-- レンジ上の●をマウスで動かして入力させる -->
  <form>
    <div class="form-group mb-5">
      <label for="customRange1">カスタムレンジ入力の例</label>
      <input type="range" class="custom-range" id="customRange1">
    </div>
    <div class="form-group mb-5">
      <label for="customRange2">0-5まで(min="0",max="5")</label>
      <input type="range" class="custom-range" min="0" max="5" id="customRange2">
    </div>
    <div class="form-group mb-5">
      <label for="customRange3">0-5まで、0.5刻み(step="0.5")</label>
      <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
    </div>
  </form>

ボタンの色:btn-*


  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-primary">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-primary</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-secondary">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-secondary</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-success">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-success</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-danger">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-danger</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-warning">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-warning</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-info">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-info</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-light">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-light</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-dark">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-dark</button>
  <button type="button" class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-link">s://bttb.jp/bootstrap5/index.php?strkey=btn-" class="bg-warning text-dark">btn-link</button>

アウトラインボタンの色:btn-outline-*


  <!-- 塗りつぶしがない -->
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-primary">outline-primary</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-secondary">outline-secondary</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-success">outline-success</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-danger">outline-danger</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-warning">outline-warning</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-info">outline-info</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-light">outline-light</button>
  <button class="btn s://bttb.jp/bootstrap5/index.php?strkey=btn-outline-" class="bg-warning text-dark">btn-outline-dark">outline-dark</button>

ボタンサイズを変更する:btn-lg:btn-sm


  <button class="btn btn-primary btn-lg">大サイズ</button>
  <button class="btn btn-primary">通常サイズ</button>
  <button class="btn btn-primary btn-sm">小サイズ</button>

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


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

ブロックのボタン:btn-block


  <!-- ブロックにすることで、高さの調整も出来るようになる -->
  <button class="btn btn-primary btn-lg s://bttb.jp/bootstrap5/index.php?strkey=btn-block" class="bg-warning text-dark">btn-block">ブロックレベルボタン</button>

a要素やinput要素でボタンを作成する:btn


  <!-- aも、inputも、typeでも見た目は変らず -->
  <a class="s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn-primary" href="#" role="button">a要素ボタン</a>
  <input class="s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn-primary" type="button" value="inputボタン">
  <input class="s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn-primary" type="submit" value="submitボタン">
  <input class="s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn s://bttb.jp/bootstrap5/index.php?strkey=btn" class="bg-warning text-dark">btn-primary" type="reset" value="resetボタン">

ラジオボタンをボタンに変更する:labelとbtnとdata-toggle=buttons


  <div class="btn-group" data-toggle="buttons">
    <!-- labelでinputを囲む -->
    <label class="btn btn-secondary active">
      <input type="radio" checked autocomplete="off">ラジオ1
    </label>
    <label class="btn btn-secondary">
      <input type="radio" autocomplete="off">ラジオ2
    </label>
    <label class="btn btn-secondary">
      <input type="radio" autocomplete="off">ラジオ3
    </label>
  </div>

チェックボックスをボタン変更する:labelとbtnとdata-toggle=buttons


  <!-- data-toggle="button" を指定すると、トグルボタンを作成することができます -->
  <!-- トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持される -->
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked autocomplete="off">チェック1
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック2
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック3
    </label>
  </div>

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


  <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">無効ボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>

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


  <button class="btn btn-lg btn-primary" disabled>無効ボタン</button>
  <button class="btn btn-lg btn-primary">通常ボタン</button>

ボタングループ:btn-group


  <!-- s://bttb.jp/bootstrap5/index.php?strkey=btn-group" class="bg-warning text-dark">btn-groupを付けて、roleとaria-labelで視覚支援する  -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=btn-group" class="bg-warning text-dark">btn-group" role="group" aria-label="基本的な使用例">
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>

ボタンツールバー:btn-toolbar


  <div class="s://bttb.jp/bootstrap5/index.php?strkey=btn-toolbar" class="bg-warning text-dark">btn-toolbar" role="toolbar" aria-label="ボタンツールバー">
    <!-- ボタンをひとまとめにすることができる -->
    <div class="btn-group mr-2" role="group" aria-label="ボタングループ1">
      <button type="button" class="btn btn-secondary">1</button>
      <button type="button" class="btn btn-secondary">2</button>
      <button type="button" class="btn btn-secondary">3</button>
      <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="btn-group mr-2" role="group" aria-label="ボタングループ2">
      <button type="button" class="btn btn-secondary">A</button>
      <button type="button" class="btn btn-secondary">B</button>
      <button type="button" class="btn btn-secondary">C</button>
    </div>
    <div class="btn-group" role="group" aria-label="ボタングループ3">
      <button type="button" class="btn btn-secondary">D</button>
    </div>
  </div>

ボタングループ:ボタンのサイズ変更:btn-group-lg




  <div class="btn-group btn-group-lg" role="group" aria-label="グループ1">
    <button type="button" class="btn btn-secondary">大左ボタン</button>
    <button type="button" class="btn btn-secondary">大中ボタン</button>
    <button type="button" class="btn btn-secondary">大右ボタン</button>
  </div>
  <hr>
  <div class="btn-group" role="group" aria-label="グループ2">
    <!-- 何もなければデフォルト -->
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>
  <hr>
  <!-- btn-group-sm -->
  <div class="btn-group btn-group-sm" role="group" aria-label="グループ3">
    <button type="button" class="btn btn-secondary">小左ボタン</button>
    <button type="button" class="btn btn-secondary">小中ボタン</button>
    <button type="button" class="btn btn-secondary">小右ボタン</button>
  </div>

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


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

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


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

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


  <!-- ボタンが押されている状態と押されていない状態を表示する -->
  <button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true"
    autocomplete="off">プッシュ状態</button>
  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false"
    autocomplete="off">未プッシュ状態</button>

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


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

メディアオブジェクト画像とタイトルと説明のセット:media


タイトル
ここに文章が入ります
  <!-- s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">mediaでflexコンテナになる -->
  <!-- 画像が左に配置される -->
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media-body">
      <h5>タイトル</h5>
      ここに文章が入ります
    </div>
  </div>

メディアオブジェクト上部に画像を配置:align-self-start


タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
  <div class="media">
    <!-- アイキャッチなどに利用 -->
    <img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
    </div>
  </div>

メディアオブジェクト画像の配置を変える:order-*


タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
  <!-- s://bttb.jp/bootstrap5/index.php?strkey=order-" class="bg-warning text-dark">order-1とs://bttb.jp/bootstrap5/index.php?strkey=order-" class="bg-warning text-dark">order-2を使う -->
  <div class="media">
    <img class="s://bttb.jp/bootstrap5/index.php?strkey=order-" class="bg-warning text-dark">order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body s://bttb.jp/bootstrap5/index.php?strkey=order-" class="bg-warning text-dark">order-1">
      <h5>タイトル</h5>
      HTMLの構造上、画像を先に、メディア本文を後に記述していますが、s://bttb.jp/bootstrap5/index.php?strkey=order-" class="bg-warning text-dark">order-*クラスを使用して表示上の順序を入れ替えています。
    </div>
  </div>

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


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

メディアオブジェクトの入れ子:media


タイトル
ここに文章が入りますここに文章が入ります
子のタイトル
ここに文章が入りますここに文章が入ります
  <div class="s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入ります
      <!-- s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media-bodyの中にさらにs://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media -->
      <div class="s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media mt-3">
        <a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
        <div class="s://bttb.jp/bootstrap5/index.php?strkey=media" class="bg-warning text-dark">media-body">
          <h5>子のタイトル</h5>
          ここに文章が入りますここに文章が入ります
        </div>
      </div>
    </div>
  </div>

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


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

タブ型ナビゲーション(JavaScript経由):thisとtabとshow


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

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


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

ナビバーとコンテナ:container


コンテンツcontainer

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

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

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


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

外部コンテンツの表示/非表示:navbar-togglerとnavbar-toggler-icon


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

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


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

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


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

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


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

ピル型ナビゲーション:nav-pills


  <ul class="nav nav-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 disabled" href="#">無効</a></li>
  </ul>

ナビゲ―ション項目の幅を調整:nav-fill


  <!-- 収まらない場合は、改行される -->
  <nav class="nav nav-pills s://bttb.jp/bootstrap5/index.php?strkey=nav-fill" class="bg-warning text-dark">nav-fill">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>

ナビゲ―ション項目の幅を調整:nav-justified


  <!-- 幅に合わせる、収まらない場合は高さが変わる -->
  <nav class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>

ナビゲーション:flex


  <nav class="nav nav-pills s://bttb.jp/bootstrap5/index.php?strkey=flex" class="bg-warning text-dark">flex-column s://bttb.jp/bootstrap5/index.php?strkey=flex" class="bg-warning text-dark">flex-sm-row">
    <a class="s://bttb.jp/bootstrap5/index.php?strkey=flex" class="bg-warning text-dark">flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="s://bttb.jp/bootstrap5/index.php?strkey=flex" class="bg-warning text-dark">flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="s://bttb.jp/bootstrap5/index.php?strkey=flex" class="bg-warning text-dark">flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

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


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

タブ型ナビゲーション:nav-tabs


  <ul class="nav nav-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 disabled" href="#">無効</a></li>
  </ul>

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


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

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


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

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


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

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


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

navbar-brand画像:navbar-brand


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

ボタン:navbar


  <nav class="s://bttb.jp/bootstrap5/index.php?strkey=navbar" class="bg-warning text-dark">navbar s://bttb.jp/bootstrap5/index.php?strkey=navbar" class="bg-warning text-dark">navbar-dark bg-dark">
    <form class="form-inline">
      <button class="btn btn-light mr-3" type="button">通常のボタン</button>
      <button class="btn btn-sm btn-light" type="button">小サイズのボタン</button>
    </form>
  </nav>

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


  <nav class="navbar navbar-expand-lg s://bttb.jp/bootstrap5/index.php?strkey=navbar-dark" class="bg-warning text-dark">navbar-dark s://bttb.jp/bootstrap5/index.php?strkey=bg-dark" class="bg-warning text-dark">bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <!-- アウトラインの検索ボタン、darkだど映える -->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>

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


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

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


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

ナビゲーション:navとnav-itemとnav-link


  <ul class="nav">
    <li class="s://bttb.jp/bootstrap5/index.php?strkey=nav-item" class="bg-warning text-dark">nav-item"><a class="s://bttb.jp/bootstrap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link active" href="#">アクティブ</a></li>
    <li class="s://bttb.jp/bootstrap5/index.php?strkey=nav-item" class="bg-warning text-dark">nav-item"><a class="s://bttb.jp/bootstrap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link" href="#">リンク</a></li>
    <li class="s://bttb.jp/bootstrap5/index.php?strkey=nav-item" class="bg-warning text-dark">nav-item"><a class="s://bttb.jp/bootstrap5/index.php?strkey=nav-link" class="bg-warning text-dark">nav-link disabled" href="#">無効</a></li>
  </ul>

ナビゲーション中央寄せ:justify-content-center


  <ul class="nav justify-content-center">
    <!-- 中央寄せ -->
    <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーション右寄せ:justify-content-end


  <ul class="nav justify-content-end">
    <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを垂直(縦)に並べる:flex-column


  <!-- サイドメニューで使える -->
  <ul class="nav s://bttb.jp/bootstrap5/index.php?strkey=flex-column" class="bg-warning text-dark">flex-column">
    <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 disabled" href="#">無効</a></li>
  </ul>

ナビゲーションを縦に並べる:nav要素、li使わないaのみ


  <!-- flex-columnを使うと、liと同じ効果が得られる -->
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">アクティブ</a>
    <a class="nav-link" href="#">リンク</a>
    <a class="nav-link disabled" href="#">無効</a>
  </nav>

コンポーネントパンくずリスト:breadcrumb:breadcrumb-item


  <nav aria-label="breadcrumb" role="navigation">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">ホーム</a></li>
      <li class="breadcrumb-item"><a href="#">ライブラリー</a></li>
      <li class="breadcrumb-item active" aria-current="page">データ</li>
    </ol>
  </nav>

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


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

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


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

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


  <!-- 高さはstyleで設定する -->
  <div class="progress" style="height: 20px;">
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

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


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

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


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

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


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

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


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

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


カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
  <div class="accordion" id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
            aria-expanded="true" aria-controls="collapseOne">
            カード01の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          カード01のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo">
            カード02の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
          カード02のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
            aria-expanded="false" aria-controls="collapseThree">
            カード03の切替ボタン
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
          カード03のコンテンツ。再びクリック又は他のカードの切替ボタンをクリックすると非表示になります。
        </div>
      </div>
    </div>
  </div>

折り畳みのJavaScript使用:show.bs.collapse


表示する

表示と非表示が切り替わるコンテンツ
  <p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
  <div class="collapse" id="sample2">
    表示と非表示が切り替わるコンテンツ
  </div>
  <script>
    // hide.bs.collapseはイベント
    $(function () {
      $('#sample2').on('hide.bs.collapse', function () {
        $('.toggle-btn').html('表示する');
      });
      $('#sample2').on('show.bs.collapse', function () {
        $('.toggle-btn').html('非表示にする');
      });
    });
  </script>

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


コンテンツ1

コンテンツ2

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

表示と非表示が切り替わるJS:collapse()


a要素によるボタン

表示と非表示が切り替わるコンテンツ
  <p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
  <div class="collapse2">
    表示と非表示が切り替わるコンテンツ
  </div>
  <script>
    $('.toggle-btn').click(function () {
      $('.collapse2').collapse();
    });
  </script>

表示と非表示が切り替わるボタン:collapse('toggle')


a要素によるボタン

表示と非表示が切り替わるコンテンツ
  <p><a class="btn btn-primary toggle-btn" href="#" role="button">a要素によるボタン</a></p>
  <div class="collapse">
    表示と非表示が切り替わるコンテンツ
  </div>
  <!-- ボタンにイベントを設定して、切り替えるclassを指定して、toggleで切り替わる -->
  <script>
    $('.toggle-btn').click(function () {
      $('.collapse').collapse('toggle');
    });
  </script>

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


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

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


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

カルーセル基本的な使用例:carouselとcarousel-innerとcarousel-item


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

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


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

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


  <div class="container">
    <div id="carouselExample" class="carousel slide">
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- コントローラー部分 -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $('#carouselExample').on('slide.bs.carousel', function () {
      $('#carouselExample .carousel-caption').hide();
    });
    $('#carouselExample').on('slid.bs.carousel', function () {
      $('#carouselExample .carousel-caption').show();
    });
  </script>

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


  <div class="container">
    <div id="carouselExample2" class="carousel slide">
      <!-- data-ride="carousel"は不要 -->
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExample" data-slide-to="1"></li>
        <li data-target="#carouselExample" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル1</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル2</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル3</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
  <script>
    $(function () {
      $('#carouselExample2').carousel();
    });
  </script>

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


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

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


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

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


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

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


  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal s://bttb.jp/bootstrap5/index.php?strkey=fade" class="bg-warning text-dark">fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

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


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

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


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

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


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

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


  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
    <!-- モーダル -->
    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体s://bttb.jp/bootstrap5/index.php?strkey=modal-lg" class="bg-warning text-dark">modal-lg -->
      <div class="modal-dialog s://bttb.jp/bootstrap5/index.php?strkey=modal-lg" class="bg-warning text-dark">modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <!-- モーダルのフッター -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

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


    <button type="button" class="btn btn-secondary" data-toggle="modal"
      data-target="#smallModal">モーダルボタン(modal-sm)</button>
    <!-- モーダル -->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
      aria-hidden="true">
      <!-- 小さなモーダルのダイアログ本体modal-sm -->
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

モーダル:JavaScript使用


    <div class="container">
      <p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
      <!-- モーダル -->
      <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <!-- モーダルのダイアログ本体 -->
        <div class="modal-dialog" role="document">
          <!-- モーダルのコンテンツ -->
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                  aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">モーダルの本文</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('.btn').click(function () {
        $('#myModal').modal('show');
      });
    </script>

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


    <div class="container">
      <p class="text-center my-5"><button type="button" class="btn btn-primary" data-toggle="modal"
          data-target="#myModal">モーダルボタン</button></p>
      <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                  aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">モーダルの本文が入ります。</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">変更を保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('#myModal').on('hide.bs.modal', function (e) {
        if (!confirm('閉じてよろしいですか?')) {
          e.preventDefault();
        }
      });
    </script>
</body>
</html>