flex

bootstrap5.css

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

bootstrap5.css

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

bootstrap5.css

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

bootstrap5.css

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

bootstrap5.css

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

bootstrap5.css

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

bootstrap5.css

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

bootstrap5.css

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

bootstrap5.css

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

bootstrap5.css

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

bootstrap5.css

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

bootstrap5.css

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

bootstrap5.css

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

bootstrap5.css

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

bootstrap5.css

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

bootstrap5.css

.order-first {
  -ms-flex-order: -1;
  order: -1;
}

bootstrap5.css

.order-last {
  -ms-flex-order: 13;
  order: 13;
}

bootstrap5.css

.order-0 {
  -ms-flex-order: 0;
  order: 0;
}

bootstrap5.css

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

bootstrap5.css

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

bootstrap5.css

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

bootstrap5.css

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

bootstrap5.css

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

bootstrap5.css

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

bootstrap5.css

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

bootstrap5.css

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

bootstrap5.css

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

bootstrap5.css

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

bootstrap5.css

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

bootstrap5.css

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

bootstrap5.css

@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

.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

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-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-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-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

bootstrap5.css

.btn-group-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

.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 > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

bootstrap5.css

.input-group-prepend,
.input-group-append {
  display: -ms-flexbox;
  display: flex;
}

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

.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}

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

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

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-sm .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

bootstrap5.css

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-md .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

bootstrap5.css

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

bootstrap5.css

@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .navbar-expand-xl .navbar-collapse {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

bootstrap5.css

.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

bootstrap5.css

.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}

bootstrap5.css

.navbar-expand > .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

.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-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

bootstrap5.css

.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

bootstrap5.css

@media (min-width: 576px) {
  .card-deck {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

bootstrap5.css

.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

bootstrap5.css

@media (min-width: 576px) {
  .card-group {
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

.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

.pagination {
  /* ページネーション */
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

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 {
  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-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}

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

.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

.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

bootstrap5.css

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

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.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

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

.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

.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

.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

.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;
}

html bootstrap5 Sample

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

flex文字01

flex文字02

flex文字03

  <div class="d-flex">
    <!-- 文字数等の大きさにより並んでいくだけ（自動マージンなし） -->
    <div>flex文字01</div>
    <div>flex文字02</div>　
    <div>flex文字03</div>
  </div>

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

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

  <div class="d-flex 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の書いた順ではなく、orderの数値123順に並ぶ -->
  <div class="d-flex">
    <div class="order-1">flex文字01</div>
    <div class="order-3">flex文字02</div>
    <div class="order-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="d-flex" style="height: 100px">
    <div class="p-2">flex文字01</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>

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

flex文字01（flex-grow-1）

flex文字02

flex文字03

  <div class="d-flex" style="height: 100px">
    <!--flex文字の幅を伸長で調整する(残り全部） -->
    <div class="p-2 flex-grow-1">flex文字01（flex-grow-1）</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>

flexの幅を縮小で調整する（他を優先）：flex-shrink

flex文字01（flex-shrink-1）

flex文字02

flex文字03

  <!-- flex文字の幅を縮小で調整する -->
  <div class="d-flex" style="height: 100px">
    <div class="p-2 flex-shrink-1">flex文字01（flex-shrink-1）</div>
    <div class="p-2 w-100">flex文字02</div>
    <div class="p-2 w-100">flex文字03</div>
  </div>

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

flex文字01

flex文字

  <div class="d-flex">
    <div class="flex-fill">flex文字01</div>
    <div class="flex-fill">flex文字</div>
    <div class="flex-fill">flex文字</div>
  </div>

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

flex文字01

flex文字02

flex文字03

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

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

flex文字01

flex文字02

flex文字03

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

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

flex文字01

flex文字02

flex文字03

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

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

flex文字01

flex文字02

flex文字03

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

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

flex文字01

flex文字02

flex文字0333333

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

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

flex文字01

flex文字02

flex文字03

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

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

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

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

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

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

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

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

flex文字01

flex文字02

flex文字03

flex文字04

flex文字05

flex文字06

flex文字07

flex文字08

flex文字09

flex文字10

flex文字11

flex文字12

  <div class="d-flex 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 flex-row-reverse">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

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

flex文字01

flex文字02

flex文字03

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

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

flex文字01

flex文字02

flex文字03

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

カードカラムによるレイアウト：card-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>

バッジ付きリストグループ：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>

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

hヘッダ

smallコンテンツ

pコンテンツ

smallコンテンツ

hヘッダ

smallコンテンツ

pコンテンツ

smallコンテンツ

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <!-- justify-content-betweenを使って左右に設置する -->
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">hヘッダ</h5>
        <small>smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</p>
      <small>smallコンテンツ</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">hヘッダ</h5>
        <small class="text-muted">smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</p>
      <small class="text-muted">smallコンテンツ</small>
    </a>
  </div>

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

  <div class="container py-5 d-flex justify-content-center">
    <!-- 左方向へのドロップ -->
    <div class="btn-group dropleft">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">左方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

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

  <div class="container py-5 d-flex justify-content-center">
    <!-- 右方向へのドロップ -->
    <div class="btn-group dropright">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">右方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

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

  <div class="container py-5 d-flex justify-content-center">
    <!-- 上方向へのドロップ -->
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">上方向へのドロップ</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">メニュー01</a>
        <a class="dropdown-item" href="#">メニュー02</a>
        <a class="dropdown-item" href="#">メニュー03</a>
      </div>
    </div>
  </div>

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

タイトル

ここに文章が入ります

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

ナビゲーション：flex

  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>

ナビゲーションを垂直（縦）に並べる：flex-column

  <!-- サイドメニューで使える -->
  <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>

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

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

flex

bootstrap5.css

html bootstrap5 Sample

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

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

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

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

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

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

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

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

flexの幅を縮小で調整する（他を優先）：flex-shrink

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カード01

カード03

カード05

カード08

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

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

hヘッダ

hヘッダ

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

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

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

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

タイトル

ナビゲーション：flex

ナビゲーションを垂直（縦）に並べる：flex-column

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

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

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