a

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
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
bootstrap5.css
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
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
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
bootstrap5.css
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
bootstrap5.css
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
bootstrap5.css
blockquote {
  margin: 0 0 1rem;
}
bootstrap5.css
small {
  font-size: 80%;
}
bootstrap5.css
sub,
sup {
  /* 下線付き文字 */
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
bootstrap5.css
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
bootstrap5.css
a:hover {
  color: #0056b3;
  text-decoration: underline;
}
bootstrap5.css
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
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
pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}
bootstrap5.css
figure {
  margin: 0 0 1rem;
}
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
th {
  /* inheritは継承する */
  text-align: inherit;
}
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,
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
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
bootstrap5.css
output {
  display: inline-block;
}
bootstrap5.css
summary {
  display: list-item;
  cursor: pointer;
}
bootstrap5.css
template {
  display: none;
}
bootstrap5.css
[hidden] {
  display: none !important;
}
bootstrap5.css
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
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
mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}
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
.blockquote-footer::before {
  /* 前に文字を追加する */
  content: "20140A0";
}
bootstrap5.css
.img-fluid {
  max-width: 100%;
  height: auto;
}
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-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}
bootstrap5.css
.figure-caption {
  font-size: 90%;
  color: #6c757d;
}
bootstrap5.css
code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;
}
bootstrap5.css
a > code {
  color: inherit;
}
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
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
bootstrap5.css
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
bootstrap5.css
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
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-last {
  -ms-flex-order: 13;
  order: 13;
}
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 {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}
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-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}
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-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap5.css
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}
bootstrap5.css
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}
bootstrap5.css
.table-hover .table-primary:hover {
  background-color: #9fcdff;
}
bootstrap5.css
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}
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-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}
bootstrap5.css
.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}
bootstrap5.css
.table-hover .table-info:hover {
  background-color: #abdde5;
}
bootstrap5.css
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}
bootstrap5.css
.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}
bootstrap5.css
.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}
bootstrap5.css
.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}
bootstrap5.css
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}
bootstrap5.css
.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}
bootstrap5.css
.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}
bootstrap5.css
.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}
bootstrap5.css
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}
bootstrap5.css
.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}
bootstrap5.css
.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}
bootstrap5.css
.table-hover .table-light:hover {
  background-color: #ececf6;
}
bootstrap5.css
.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}
bootstrap5.css
.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}
bootstrap5.css
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}
bootstrap5.css
.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}
bootstrap5.css
.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}
bootstrap5.css
.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap5.css
.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap5.css
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap5.css
.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}
bootstrap5.css
.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
bootstrap5.css
.table-dark {
  color: #fff;
  background-color: #343a40;
}
bootstrap5.css
.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}
bootstrap5.css
.table-dark.table-bordered {
  border: 0;
}
bootstrap5.css
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
bootstrap5.css
.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}
bootstrap5.css
@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::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap5.css
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
bootstrap5.css
select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
bootstrap5.css
.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}
bootstrap5.css
.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
textarea.form-control {
  height: auto;
}
bootstrap5.css
.form-group {
  margin-bottom: 1rem;
}
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-label {
  margin-bottom: 0;
}
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:hover {
  color: #212529;
  text-decoration: 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 {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap5.css
.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}
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 {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap5.css
.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}
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 {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}
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 {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap5.css
.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}
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 {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap5.css
.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}
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 {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
bootstrap5.css
.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}
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 {
  color: #007bff;
  border-color: #007bff;
}
bootstrap5.css
.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
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 {
  color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap5.css
.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
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 {
  color: #ffc107;
  border-color: #ffc107;
}
bootstrap5.css
.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
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 {
  color: #dc3545;
  border-color: #dc3545;
}
bootstrap5.css
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
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 {
  color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap5.css
.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
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 {
  color: #343a40;
  border-color: #343a40;
}
bootstrap5.css
.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
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 {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}
bootstrap5.css
.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}
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
.btn-block + .btn-block {
  margin-top: 0.5rem;
}
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-toggle:empty::after {
  margin-left: 0;
}
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
.dropdown-menu-left {
  right: auto;
  left: 0;
}
bootstrap5.css
.dropdown-menu-right {
  right: 0;
  left: auto;
}
bootstrap5.css
@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}
bootstrap5.css
@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}
bootstrap5.css
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
bootstrap5.css
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
bootstrap5.css
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}
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
.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropright .dropdown-toggle::after {
  vertical-align: 0;
}
bootstrap5.css
.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}
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
.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap5.css
.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}
bootstrap5.css
.dropdown-menu[x-placement^="top"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}
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.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}
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:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}
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-toolbar .input-group {
  width: auto;
}
bootstrap5.css
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}
bootstrap5.css
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
bootstrap5.css
.btn-group > .btn: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,
.btn-group-vertical > .btn-group {
  width: 100%;
}
bootstrap5.css
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}
bootstrap5.css
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap5.css
.btn-group-vertical > .btn: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,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 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 > .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-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}
bootstrap5.css
.input-group-prepend {
  margin-right: -1px;
}
bootstrap5.css
.input-group-append {
  margin-left: -1px;
}
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-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}
bootstrap5.css
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap5.css
.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 .nav-link {
  padding-right: 0;
  padding-left: 0;
}
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 (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
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 (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
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 (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
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 > .container,
.navbar-expand > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}
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 .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
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 {
  color: rgba(0, 0, 0, 0.9);
}
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 {
  color: rgba(0, 0, 0, 0.5);
}
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-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}
bootstrap5.css
.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}
bootstrap5.css
.navbar-light .navbar-text a {
  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 {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
  color: #fff;
}
bootstrap5.css
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}
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-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}
bootstrap5.css
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}
bootstrap5.css
.navbar-dark .navbar-text a {
  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 > hr {
  margin-right: 0;
  margin-left: 0;
}
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-title {
  margin-bottom: 0.75rem;
}
bootstrap5.css
.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}
bootstrap5.css
.card-text:last-child {
  margin-bottom: 0;
}
bootstrap5.css
.card-link:hover {
  text-decoration: none;
}
bootstrap5.css
.card-link + .card-link {
  margin-left: 1.25rem;
}
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
.card-deck .card {
  margin-bottom: 15px;
}
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
.card-group > .card {
  margin-bottom: 15px;
}
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 {
  overflow: hidden;
}
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
.accordion > .card .card-header {
  margin-bottom: -1px;
}
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 {
  padding-left: 0.5rem;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}
bootstrap5.css
.breadcrumb-item.active {
  color: #6c757d;
}
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:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #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.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
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
.badge-primary {
  color: #fff;
  background-color: #007bff;
}
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
.badge-info {
  color: #fff;
  background-color: #17a2b8;
}
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
.badge-warning {
  color: #212529;
  background-color: #ffc107;
}
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
.badge-danger {
  color: #fff;
  background-color: #dc3545;
}
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
.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}
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
.badge-dark {
  color: #fff;
  background-color: #343a40;
}
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
@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}
bootstrap5.css
.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}
bootstrap5.css
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap5.css
.alert-heading {
  color: inherit;
}
bootstrap5.css
.alert-link {
  font-weight: 700;
}
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-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
bootstrap5.css
.alert-primary hr {
  border-top-color: #9fcdff;
}
bootstrap5.css
.alert-primary .alert-link {
  color: #002752;
}
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
.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
bootstrap5.css
.alert-info hr {
  border-top-color: #abdde5;
}
bootstrap5.css
.alert-info .alert-link {
  color: #062c33;
}
bootstrap5.css
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
bootstrap5.css
.alert-warning hr {
  border-top-color: #ffe8a1;
}
bootstrap5.css
.alert-warning .alert-link {
  color: #533f03;
}
bootstrap5.css
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
bootstrap5.css
.alert-danger hr {
  border-top-color: #f1b0b7;
}
bootstrap5.css
.alert-danger .alert-link {
  color: #491217;
}
bootstrap5.css
.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
bootstrap5.css
.alert-light hr {
  border-top-color: #ececf6;
}
bootstrap5.css
.alert-light .alert-link {
  color: #686868;
}
bootstrap5.css
.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}
bootstrap5.css
.alert-dark hr {
  border-top-color: #b9bbbe;
}
bootstrap5.css
.alert-dark .alert-link {
  color: #040505;
}
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: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-open {
  overflow: hidden;
}
bootstrap5.css
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
bootstrap5.css
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
bootstrap5.css
.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
bootstrap5.css
.modal.fade .modal-dialog {
  transition: -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.fade {
  opacity: 0;
}
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-title {
  margin-bottom: 0;
  line-height: 1.5;
}
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
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}
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
.popover-body {
  padding: 0.5rem 0.75rem;
  color: #212529;
}
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
@-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
.align-baseline {
  vertical-align: baseline !important;
}
bootstrap5.css
.align-top {
  vertical-align: top !important;
}
bootstrap5.css
.align-middle {
  vertical-align: middle !important;
}
bootstrap5.css
.align-bottom {
  vertical-align: bottom !important;
}
bootstrap5.css
.align-text-bottom {
  vertical-align: text-bottom !important;
}
bootstrap5.css
.align-text-top {
  vertical-align: text-top !important;
}
bootstrap5.css
.bg-primary {
  background-color: #007bff !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
.bg-info {
  background-color: #17a2b8 !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
.bg-warning {
  background-color: #ffc107 !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
.bg-danger {
  background-color: #dc3545 !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
.bg-light {
  background-color: #f8f9fa !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
.bg-dark {
  background-color: #343a40 !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-white {
  background-color: #fff !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-0 {
  border: 0 !important;
}
bootstrap5.css
.border-top-0 {
  border-top: 0 !important;
}
bootstrap5.css
.border-right-0 {
  border-right: 0 !important;
}
bootstrap5.css
.border-bottom-0 {
  border-bottom: 0 !important;
}
bootstrap5.css
.border-left-0 {
  border-left: 0 !important;
}
bootstrap5.css
.border-primary {
  border-color: #007bff !important;
}
bootstrap5.css
.border-secondary {
  border-color: #6c757d !important;
}
bootstrap5.css
.border-success {
  border-color: #28a745 !important;
}
bootstrap5.css
.border-info {
  border-color: #17a2b8 !important;
}
bootstrap5.css
.border-warning {
  border-color: #ffc107 !important;
}
bootstrap5.css
.border-danger {
  border-color: #dc3545 !important;
}
bootstrap5.css
.border-light {
  border-color: #f8f9fa !important;
}
bootstrap5.css
.border-dark {
  border-color: #343a40 !important;
}
bootstrap5.css
.border-white {
  border-color: #fff !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
.float-left {
  float: left !important;
}
bootstrap5.css
.float-right {
  float: right !important;
}
bootstrap5.css
.float-none {
  float: none !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
@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}
bootstrap5.css
.overflow-auto {
  overflow: auto !important;
}
bootstrap5.css
.overflow-hidden {
  overflow: hidden !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
.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
.w-25 {
  width: 25% !important;
}
bootstrap5.css
.w-50 {
  width: 50% !important;
}
bootstrap5.css
.w-75 {
  width: 75% !important;
}
bootstrap5.css
.w-100 {
  width: 100% !important;
}
bootstrap5.css
.w-auto {
  width: auto !important;
}
bootstrap5.css
.h-25 {
  height: 25% !important;
}
bootstrap5.css
.h-50 {
  height: 50% !important;
}
bootstrap5.css
.h-75 {
  height: 75% !important;
}
bootstrap5.css
.h-100 {
  height: 100% !important;
}
bootstrap5.css
.h-auto {
  height: auto !important;
}
bootstrap5.css
.mw-100 {
  max-width: 100% !important;
}
bootstrap5.css
.mh-100 {
  max-height: 100% !important;
}
bootstrap5.css
.min-vw-100 {
  min-width: 100vw !important;
}
bootstrap5.css
.min-vh-100 {
  min-height: 100vh !important;
}
bootstrap5.css
.vw-100 {
  width: 100vw !important;
}
bootstrap5.css
.vh-100 {
  height: 100vh !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
.m-0 {
  margin: 0 !important;
}
bootstrap5.css
.mt-0,
.my-0 {
  margin-top: 0 !important;
}
bootstrap5.css
.mr-0,
.mx-0 {
  margin-right: 0 !important;
}
bootstrap5.css
.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}
bootstrap5.css
.ml-0,
.mx-0 {
  margin-left: 0 !important;
}
bootstrap5.css
.m-1 {
  margin: 0.25rem !important;
}
bootstrap5.css
.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}
bootstrap5.css
.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}
bootstrap5.css
.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}
bootstrap5.css
.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}
bootstrap5.css
.m-2 {
  margin: 0.5rem !important;
}
bootstrap5.css
.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}
bootstrap5.css
.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}
bootstrap5.css
.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}
bootstrap5.css
.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}
bootstrap5.css
.m-3 {
  margin: 1rem !important;
}
bootstrap5.css
.mt-3,
.my-3 {
  margin-top: 1rem !important;
}
bootstrap5.css
.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}
bootstrap5.css
.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}
bootstrap5.css
.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}
bootstrap5.css
.m-4 {
  margin: 1.5rem !important;
}
bootstrap5.css
.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}
bootstrap5.css
.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}
bootstrap5.css
.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}
bootstrap5.css
.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}
bootstrap5.css
.m-5 {
  margin: 3rem !important;
}
bootstrap5.css
.mt-5,
.my-5 {
  margin-top: 3rem !important;
}
bootstrap5.css
.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}
bootstrap5.css
.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}
bootstrap5.css
.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}
bootstrap5.css
.p-0 {
  padding: 0 !important;
}
bootstrap5.css
.pt-0,
.py-0 {
  padding-top: 0 !important;
}
bootstrap5.css
.pr-0,
.px-0 {
  padding-right: 0 !important;
}
bootstrap5.css
.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}
bootstrap5.css
.pl-0,
.px-0 {
  padding-left: 0 !important;
}
bootstrap5.css
.p-1 {
  padding: 0.25rem !important;
}
bootstrap5.css
.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}
bootstrap5.css
.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}
bootstrap5.css
.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}
bootstrap5.css
.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}
bootstrap5.css
.p-2 {
  padding: 0.5rem !important;
}
bootstrap5.css
.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}
bootstrap5.css
.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}
bootstrap5.css
.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}
bootstrap5.css
.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}
bootstrap5.css
.p-3 {
  padding: 1rem !important;
}
bootstrap5.css
.pt-3,
.py-3 {
  padding-top: 1rem !important;
}
bootstrap5.css
.pr-3,
.px-3 {
  padding-right: 1rem !important;
}
bootstrap5.css
.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}
bootstrap5.css
.pl-3,
.px-3 {
  padding-left: 1rem !important;
}
bootstrap5.css
.p-4 {
  padding: 1.5rem !important;
}
bootstrap5.css
.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}
bootstrap5.css
.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}
bootstrap5.css
.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}
bootstrap5.css
.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}
bootstrap5.css
.p-5 {
  padding: 3rem !important;
}
bootstrap5.css
.pt-5,
.py-5 {
  padding-top: 3rem !important;
}
bootstrap5.css
.pr-5,
.px-5 {
  padding-right: 3rem !important;
}
bootstrap5.css
.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}
bootstrap5.css
.pl-5,
.px-5 {
  padding-left: 3rem !important;
}
bootstrap5.css
.m-n1 {
  margin: -0.25rem !important;
}
bootstrap5.css
.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}
bootstrap5.css
.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}
bootstrap5.css
.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}
bootstrap5.css
.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}
bootstrap5.css
.m-n2 {
  margin: -0.5rem !important;
}
bootstrap5.css
.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}
bootstrap5.css
.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}
bootstrap5.css
.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}
bootstrap5.css
.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}
bootstrap5.css
.m-n3 {
  margin: -1rem !important;
}
bootstrap5.css
.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}
bootstrap5.css
.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}
bootstrap5.css
.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}
bootstrap5.css
.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}
bootstrap5.css
.m-n4 {
  margin: -1.5rem !important;
}
bootstrap5.css
.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}
bootstrap5.css
.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}
bootstrap5.css
.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}
bootstrap5.css
.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}
bootstrap5.css
.m-n5 {
  margin: -3rem !important;
}
bootstrap5.css
.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}
bootstrap5.css
.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}
bootstrap5.css
.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}
bootstrap5.css
.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}
bootstrap5.css
.m-auto {
  margin: auto !important;
}
bootstrap5.css
.mt-auto,
.my-auto {
  margin-top: auto !important;
}
bootstrap5.css
.mr-auto,
.mx-auto {
  margin-right: auto !important;
}
bootstrap5.css
.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}
bootstrap5.css
.ml-auto,
.mx-auto {
  margin-left: auto !important;
}
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
.text-left {
  text-align: left !important;
}
bootstrap5.css
.text-right {
  text-align: right !important;
}
bootstrap5.css
.text-center {
  text-align: center !important;
}
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
@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
bootstrap5.css
@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
bootstrap5.css
@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-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-weight-light {
  font-weight: 300 !important;
}
bootstrap5.css
.font-weight-lighter {
  font-weight: lighter !important;
}
bootstrap5.css
.font-weight-normal {
  font-weight: 400 !important;
}
bootstrap5.css
.font-weight-bold {
  font-weight: 700 !important;
}
bootstrap5.css
.font-weight-bolder {
  font-weight: bolder !important;
}
bootstrap5.css
.font-italic {
  font-style: italic !important;
}
bootstrap5.css
.text-white {
  color: #fff !important;
}
bootstrap5.css
.text-primary {
  color: #007bff !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
.text-info {
  color: #17a2b8 !important;
}
bootstrap5.css
a.text-info:hover,
a.text-info:focus {
  color: #0f6674 !important;
}
bootstrap5.css
.text-warning {
  color: #ffc107 !important;
}
bootstrap5.css
a.text-warning:hover,
a.text-warning:focus {
  color: #ba8b00 !important;
}
bootstrap5.css
.text-danger {
  color: #dc3545 !important;
}
bootstrap5.css
a.text-danger:hover,
a.text-danger:focus {
  color: #a71d2a !important;
}
bootstrap5.css
.text-light {
  color: #f8f9fa !important;
}
bootstrap5.css
a.text-light:hover,
a.text-light:focus {
  color: #cbd3da !important;
}
bootstrap5.css
.text-dark {
  color: #343a40 !important;
}
bootstrap5.css
a.text-dark:hover,
a.text-dark:focus {
  color: #121416 !important;
}
bootstrap5.css
.text-body {
  color: #212529 !important;
}
bootstrap5.css
.text-muted {
  color: #6c757d !important;
}
bootstrap5.css
.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
bootstrap5.css
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}
bootstrap5.css
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
bootstrap5.css
.text-decoration-none {
  text-decoration: none !important;
}
bootstrap5.css
.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>">
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>">1列目</div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>">2列目</div>
  </div>
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>">
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>">1列目</div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>">2列目</div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>">3列目</div>
  </div>

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


col-2
col-4
col-6
  <!-- 画面の大きさにより12分割され、数字の値の幅が割り当てられる -->
  <div class="row">
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col-2" class="bg-warning text-dark">col-2a>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=col-2" class="bg-warning text-dark">col-2a></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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col-6" class="bg-warning text-dark">col-6a>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=col-6" class="bg-warning text-dark">col-6a></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="col-auto">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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col-9" class="bg-warning text-dark">col-9a>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=col-9" class="bg-warning text-dark">col-9a></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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=w-100" class="bg-warning text-dark">w-100a>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=w-100" class="bg-warning text-dark">w-100a></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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col-sm-8" class="bg-warning text-dark">col-sm-8a>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=col-sm-8" class="bg-warning text-dark">col-sm-8a></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
  <!-- <a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>の幅は、ひとつ上のhtmlタグの幅に制約を受けて100%になる -->
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>">
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-sm-9">第1階層: <a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-sm-9
      <!-- 階層化<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>の中に<a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>、<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>の幅を基準にして12の計算が始まる -->
      <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>">
        <!-- <a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>を2つ書くと、それぞれの画面の状況により適用されるものが変わる -->
        <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-8">第2階層: <a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-8</div>
        <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-4">第2階層: <a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-4</div>
      </div>
    </div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-sm-3">第1階層: <a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>-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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=col-md-8" class="bg-warning text-dark">col-md-8a>">col-12と<a href="https://bttb.jp/bootstrap5/index.php?strkey=col-md-8" class="bg-warning text-dark">col-md-8a></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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=d-none" class="bg-warning text-dark">d-nonea> <a href="https://bttb.jp/bootstrap5/index.php?strkey=d-md-block" class="bg-warning text-dark">d-md-blocka>"></div>
    <!-- Medium以上では{dsplay:block}、未満では{display:none} -->
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

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


col
col
  <!-- ガターは、グリッドのカラム間にある余白のこと -->
  <!-- 画面いっぱいに広がる -->
  <div class="row <a href="https://bttb.jp/bootstrap5/index.php?strkey=no-gutters" class="bg-warning text-dark">no-guttersa>">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

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


col
col
  <!-- 文字開始位置が、divに隣接しない -->
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=row" class="bg-warning text-dark">rowa>">
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola></div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=col" class="bg-warning text-dark">cola></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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=offset-md-0" class="bg-warning text-dark">offset-md-0a>">col-sm-5とoffset-sm-2とcol-md-6と<a href="https://bttb.jp/bootstrap5/index.php?strkey=offset-md-0" class="bg-warning text-dark">offset-md-0a></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>
    <!-- <a href="https://bttb.jp/bootstrap5/index.php?strkey=order-first" class="bg-warning text-dark">order-firsta>が最初に並ぶ、プログラムでhtmlを書くときは便利 -->
    <div class="col <a href="https://bttb.jp/bootstrap5/index.php?strkey=order-first" class="bg-warning text-dark">order-firsta>">第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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=d-flex" class="bg-warning text-dark">d-flexa>">
    <!-- 文字数等の大きさにより並んでいくだけ(自動マージンなし) -->
    <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 flex-nowrap">
    <!-- d-flex以下は、インラインになるとrowとcolと同じ関係になる -->
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
    <div>flex文字04</div>
    <div>flex文字05</div>
    <div>flex文字06</div>
    <div>flex文字07</div>
    <div>flex文字08</div>
    <div>flex文字09</div>
    <div>flex文字10</div>
    <div>flex文字11</div>
    <div>flex文字12</div>
  </div>

flexのいい感じで自動で折り返す:flex-wrap


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

特定のflex文字の表示順序を入れ替えるクラス:order


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

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


flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- mr-autoが左寄せ -->
    <div class="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="ml-auto p-2">flex文字3</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <!-- flex文字の幅で伸長する -->
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=d-flex" class="bg-warning text-dark">d-flexa>" 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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-grow" class="bg-warning text-dark">flex-growa>-1">flex文字01(<a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-grow" class="bg-warning text-dark">flex-growa>-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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-shrink" class="bg-warning text-dark">flex-shrinka>-1">flex文字01(<a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-shrink" class="bg-warning text-dark">flex-shrinka>-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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-fill" class="bg-warning text-dark">flex-filla>">flex文字01</div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-fill" class="bg-warning text-dark">flex-filla>">flex文字</div>
    <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-fill" class="bg-warning text-dark">flex-filla>">flex文字</div>
  </div>

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


flex文字01
flex文字02
flex文字03
  <div class="d-flex <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-row" class="bg-warning text-dark">flex-rowa>">
    <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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=justify-content-end" class="bg-warning text-dark">justify-content-enda>">
    <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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=justify-content-center" class="bg-warning text-dark">justify-content-centera>">
    <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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=justify-content-between" class="bg-warning text-dark">justify-content-betweena>">
    <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 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 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 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 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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-row-reverse" class="bg-warning text-dark">flex-row-reversea>">
    <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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-column" class="bg-warning text-dark">flex-columna>">
    <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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-column-reverse" class="bg-warning text-dark">flex-column-reversea>">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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


...

カードのタイトル

カードの内容

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

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


背景色、文字色指定なし

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

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

カードのタイトル

カードの内容

背景色:bg-light

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

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

カードのヘッダとフッターの背景色を変える: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>
  <!-- カード枠のボーダー色:青 border-primary -->
  <div class="card border-primary mb-3" style="max-width: 25rem;">
    <!-- ヘッダーのボーダー色:青 border-primary -->
    <div class="card-header 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="card-deck">
    <!-- 複数のカードをレイアウトするために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="card-group">
    <!-- 複数のカードをレイアウトするためにcard-groupを使う、隙間が出来ない -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
    <!-- カード2 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード02</h4>
        <p class="card-text">カードの内容カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
    <!-- カード3 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">カードの内容</p>
        <p class="card-text">カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
  </div>

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


...

カード01

ここに文章が入ります

カード02

文章

文章
...

カード03

文章

文章

カード04

文章

文章

カード05

文章

文章

...

カード07

文章

文章

カード08

文章

文章

  <div class="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="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>
    <div class="col-sm-6">
      <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>
  </div>

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


...

カードの内容

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

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


カードの内容

...
  <!-- カード下部に画像を配置:card-img-bottom -->
  <div class="card" style="max-width: 25rem;">
    <div class="card-body">
      <p class="card-text">カードの内容</p>
    </div>
    <img class="card-img-bottom" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.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="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>
    <!-- <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-flush" class="bg-warning text-dark">list-group-flusha>は、ボーダーの無いリストグループ-->
    <ul class="list-group <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-flush" class="bg-warning text-dark">list-group-flusha>">
      <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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=w-75" class="bg-warning text-dark">w-75a>">
    <div class="card-body">
      <h4 class="card-title">カードの幅指定:<a href="https://bttb.jp/bootstrap5/index.php?strkey=w-75" class="bg-warning text-dark">w-75a></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に設定する、中央寄せ:<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-centera> -->
  <div class="card <a href="https://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-centera>">
    <div class="card-body">
      <h4 class="card-title">中央寄せ:<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-center" class="bg-warning text-dark">text-centera></h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- divに設定する、右寄せ:<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-right" class="bg-warning text-dark">text-righta> -->
  <div class="card <a href="https://bttb.jp/bootstrap5/index.php?strkey=text-right" class="bg-warning text-dark">text-righta>">
    <div class="card-body">
      <h4 class="card-title">右寄せ:<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-right" class="bg-warning text-dark">text-righta></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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>primary"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>primary</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>secondary"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>secondary</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>success"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>success</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>danger"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>danger</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>warning"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>warning</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>info"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>info</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>light"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>light</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>dark"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>dark</span>
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>white"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-" class="bg-warning text-dark">border-a>white</span>

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


border-0 border-top-0 border-right-0 border-bottom-0 border-left-0
  <!-- 全ボーダー削除 -->
  <span class="border <a href="https://bttb.jp/bootstrap5/index.php?strkey=border-0" class="bg-warning text-dark">border-0a>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=border-0" class="bg-warning text-dark">border-0a></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="text-primary">text-primary</a></p>
    <p><a href="#" class="text-secondary">text-secondary</a></p>
    <p><a href="#" class="text-success">text-success</a></p>
    <p><a href="#" class="text-danger">text-danger</a></p>
    <p><a href="#" class="text-warning">text-warning</a></p>
    <p><a href="#" class="text-info">text-info</a></p>
    <p><a href="#" class="text-light bg-dark">text-light</a></p>
    <p><a href="#" class="text-dark">text-dark</a></p>
    <p><a href="#" class="text-body">text-body</a></p>
    <p><a href="#" class="text-muted">text-muted</a></p>
    <p><a href="#" class="text-white bg-dark">text-white</a></p>
    <p><a href="#" class="text-black-50">text-black-50</a></p>
    <p><a href="#" class="text-white-50 bg-dark">text-white-50</a></p>
  </div>

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


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

幅を指定する:w-25


w-25
w-50
w-75
w-100
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=w-25" class="bg-warning text-dark">w-25a> border"><a href="https://bttb.jp/bootstrap5/index.php?strkey=w-25" class="bg-warning text-dark">w-25a></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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=h-25" class="bg-warning text-dark">h-25a> d-inline-block border"><a href="https://bttb.jp/bootstrap5/index.php?strkey=h-25" class="bg-warning text-dark">h-25a></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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=mh-100" class="bg-warning text-dark">mh-100a>" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">

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


  <img class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=mw-100" class="bg-warning text-dark">mw-100a>" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">

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


  <a class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=sr-only" class="bg-warning text-dark">sr-onlya> <a href="https://bttb.jp/bootstrap5/index.php?strkey=sr-only" class="bg-warning text-dark">sr-onlya>-focusable" href="#">メインコンテンツへスキップ</a>

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


text-left

text-center

text-right

  <p class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-left" class="bg-warning text-dark">text-lefta>"><a href="https://bttb.jp/bootstrap5/index.php?strkey=text-left" class="bg-warning text-dark">text-lefta></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="text-capitalize">CapiTaliZed text.</p>

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


太字(font-italic)

通常(font-weight-normal)

細字(font-weight-light)

イタリック体(font-italic)

  <p class="font-weight-bold">太字(font-italic)</p>
  <p class="font-weight-normal">通常(font-weight-normal)</p>
  <p class="font-weight-light">細字(font-weight-light)</p>
  <p class="font-italic">イタリック体(font-italic)</p>

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


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

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

スモール:small


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

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

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

英語を斜体で表示:em


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

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

リード文:lead


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

標準的な段落(p)

  <p class="lead">目立たせたい段落(p.lead)</p>
  <p>標準的な段落(p)</p>

サブタイトル:text-muted


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

  <h4>主タイトル <small class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-muted" class="bg-warning text-dark">text-muteda>">キャプチャー サブタイトル(<a href="https://bttb.jp/bootstrap5/index.php?strkey=text-muted" class="bg-warning text-dark">text-muteda>)</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>

変数の表記:var


y = mx + b
  <div>
    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
  </div>

引用:blockquote


基本の引用文です。

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

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


基本の引用文です。

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

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


基本の引用文です。

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

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


基本の引用文です。

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

略語:abbr


HTML

HTML

  <!-- カーソルを合わせるとtitleの内容を表示される -->
  <p><abbr title="HyperText Markup Language">HTML</abbr></p>
  <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

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


  <div class="alert alert-primary" role="alert">alert-primary</div>
  <div class="alert alert-secondary" role="alert">alert-secondary</div>
  <div class="alert alert-success" role="alert">alert-success</div>
  <div class="alert alert-danger" role="alert">alert-danger</div>
  <div class="alert alert-warning" role="alert">alert-warning</div>
  <div class="alert alert-info" role="alert">alert-info</div>
  <div class="alert alert-light" role="alert">alert-light</div>
  <div class="alert alert-dark" role="alert">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="alert alert-success" role="alert">
    <h4 class="alert-heading">アラートのタイトル</h4>
    <p>アラートの内容</p>
    <p class="mb-0"><a href="#" class="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="badge badge-primary">1</span></p>
  <p>secondary <span class="badge badge-secondary">11</span></p>
  <p>success <span class="badge badge-success">111</span></p>
  <p>danger <span class="badge badge-danger">1111</span></p>
  <p>warning <span class="badge badge-warning">0</span></p>
  <p>info <span class="badge badge-info">99</span></p>
  <p>light <span class="badge badge-light">999</span></p>
  <p>dark <span class="badge badge-dark">9999</span></p>

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


Primary Secondary Success Danger Warning Info Light Dark
  <span class="badge badge-pill badge-primary">Primary</span>
  <span class="badge badge-pill badge-secondary">Secondary</span>
  <span class="badge badge-pill badge-success">Success</span>
  <span class="badge badge-pill badge-danger">Danger</span>
  <span class="badge badge-pill badge-warning">Warning</span>
  <span class="badge badge-pill badge-info">Info</span>
  <span class="badge badge-pill badge-light">Light</span>
  <span class="badge badge-pill badge-dark">Dark</span>

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


  <a href="#" class="badge badge-success">badge-primary</a>

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


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

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


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

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


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

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


スクリーンのみ表示(印刷時のみ非表示)
印刷時のみ表示(スクリーンでは非表示)
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=d-print-none" class="bg-warning text-dark">d-print-nonea>">スクリーンのみ表示(印刷時のみ非表示)</div>
  <div class="d-none d-print-block">印刷時のみ表示(スクリーンでは非表示)</div>

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


  <!-- 大きさが自動調整される -->
  <!-- アスペクト比を持つ親要素に iframe のような埋め込みをラップします -->
  <div class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=embed-responsive" class="bg-warning text-dark">embed-responsivea> <a href="https://bttb.jp/bootstrap5/index.php?strkey=embed-responsive" class="bg-warning text-dark">embed-responsivea>-16by9">
    <iframe class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=embed-responsive" class="bg-warning text-dark">embed-responsivea>-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="float-left">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="float-left">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 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="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="float-left" alt="左寄せ画像">
    <img src="https://via.placeholder.com/200x200" class="float-right" alt="右寄せ画像">
  </div>

リストグループ:list-group


  • リスト項目1
  • リスト項目2
  • リスト項目3
  <ul class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group" class="bg-warning text-dark">list-groupa>">
    <li class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group" class="bg-warning text-dark">list-groupa>-item">リスト項目1</li>
    <li class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group" class="bg-warning text-dark">list-groupa>-item">リスト項目2</li>
    <li class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group" class="bg-warning text-dark">list-groupa>-item">リスト項目3</li>
  </ul>

インラインリストグループ:list-inline


  • インラインリスト項目
  • インラインリスト項目
  • インラインリスト項目
  <ul class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-inline" class="bg-warning text-dark">list-inlinea>">
    <li class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-inline" class="bg-warning text-dark">list-inlinea>-item">インラインリスト項目</li>
    <li class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-inline" class="bg-warning text-dark">list-inlinea>-item">インラインリスト項目</li>
    <li class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-inline" class="bg-warning text-dark">list-inlinea>-item">インラインリスト項目</li>
  </ul>

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


  • リストマーカーの無いリスト項目
  • リストマーカーの無いリスト項目
  • リストマーカーの無いリスト項目
  <ul class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-unstyled" class="bg-warning text-dark">list-unstyleda>">
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
  </ul>

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


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

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


  • これは「primary」のリスト項目です。
  • これは「secondary」のリスト項目です。
  • これは「success」のリスト項目です。
  • これは「danger」のリスト項目です。
  • これは「warning」のリスト項目です。
  • これは「info」のリスト項目です。
  • これは「light」のリスト項目です。
  • これは「dark」のリスト項目です。
  • これは「デフォルト」のリスト項目です。
  <ul class="list-group">
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>primary">これは「primary」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>secondary">これは「secondary」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>success">これは「success」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>danger">これは「danger」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>warning">これは「warning」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>info">これは「info」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>light">これは「light」のリスト項目です。</li>
    <li class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>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 badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>

定義リスト:dlとdtとdd


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

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


  <!-- サイドメニューでリンクさせる -->
  <div class="list-group">
    <a href="#" class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema> <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema>-action">リスト項目1</a>
    <a href="#" class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema> <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema>-action">リスト項目2</a>
    <a href="#" class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema> <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema>-action disabled">リスト項目3</a>
  </div>

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


  <div class="list-group">
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>primary">これは「primary」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>secondary">これは「secondary」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>success">これは「success」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>danger">これは「danger」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>warning">これは「warning」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>info">これは「info」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>light">これは「light」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>dark">これは「dark」のリスト項目です。</a>
    <a href="#" class="list-group-item <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item-" class="bg-warning text-dark">list-group-item-a>action">これは「デフォルト」のリスト項目です。</a>
  </div>

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


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

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


  <div class="list-group">
    <a href="#" class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema> <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema>-action <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-column" class="bg-warning text-dark">flex-columna> 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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema> <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-item" class="bg-warning text-dark">list-group-itema>-action <a href="https://bttb.jp/bootstrap5/index.php?strkey=flex-column" class="bg-warning text-dark">flex-columna> 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 <a href="https://bttb.jp/bootstrap5/index.php?strkey=list-group-flush" class="bg-warning text-dark">list-group-flusha>">
      <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


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


タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table 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="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="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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>primary">
        <td><a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>success">
        <td><a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>warning">
        <td><a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>danger">
        <td><a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>info">
        <td><a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>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="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>primary">th.<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>primary</th>
    </tr>
    <tr>
      <td class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>success">td.<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>success</td>
      <td class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>warning">td.<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>warning</td>
    </tr>
    <tr>
      <td class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>danger">td.<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>danger </td>
      <td class="<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>info">td.<a href="https://bttb.jp/bootstrap5/index.php?strkey=bg-" class="bg-warning text-dark">bg-a>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="table-active">
        <td>table-active</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-primary">
        <td>table-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-secondary">
        <td>table-secondary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-success">
        <td>table-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-danger">
        <td>table-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-warning">
        <td>table-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-info">
        <td>table-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-light">
        <td>table-light</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="table-dark">
        <td>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="table-active">table-active</th>
    </tr>
    <tr>
      <td class="table-primary">table-primary</td>
      <td class="table-secondary">table-secondary</td>
    </tr>
    <tr>
      <td class="table-success">table-success </td>
      <td class="table-danger">table-danger</td>
    </tr>
    <tr>
      <td class="table-warning">table-warning</td>
      <td class="table-info">table-info</td>
    </tr>
    <tr>
      <td class="table-light">table-light </td>
      <td class="table-dark">table-dark</td>
    </tr>
  </table>

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


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