bootstrap4.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: 
bootstrap4.css
*,
*::before,
*::after {
  box-sizing: border-box;
}
bootstrap4.css
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
bootstrap4.css
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}
bootstrap4.css
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;
}
bootstrap4.css
[tabindex="-1"]:focus {
  outline: 0 !important;
}
bootstrap4.css
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
bootstrap4.css
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
bootstrap4.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;
}
bootstrap4.css
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
bootstrap4.css
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
bootstrap4.css
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
bootstrap4.css
dd {
  margin-bottom: .5rem;
  margin-left: 0;
}
bootstrap4.css
blockquote {
  margin: 0 0 1rem;
}
bootstrap4.css
small {
  font-size: 80%;
}
bootstrap4.css
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
bootstrap4.css
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
bootstrap4.css
a:hover {
  color: #0056b3;
  text-decoration: underline;
}
bootstrap4.css
a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
bootstrap4.css
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}
bootstrap4.css
a:not([href]):not([tabindex]):focus {
  outline: 0;
}
bootstrap4.css
pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}
bootstrap4.css
pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}
bootstrap4.css
figure {
  margin: 0 0 1rem;
}
bootstrap4.css
img {
  vertical-align: middle;
  border-style: none;
}
bootstrap4.css
svg {
  overflow: hidden;
  vertical-align: middle;
}
bootstrap4.css
table {
  border-collapse: collapse;
}
bootstrap4.css
caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}
bootstrap4.css
th {
  text-align: inherit;
}
bootstrap4.css
label {
  display: inline-block;
  margin-bottom: 0.5rem;
}
bootstrap4.css
button {
  border-radius: 0;
}
bootstrap4.css
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
bootstrap4.css
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
bootstrap4.css
button,
select {
  text-transform: none;
}
bootstrap4.css
select {
  word-wrap: normal;
}
bootstrap4.css
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
bootstrap4.css
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
bootstrap4.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;
}
bootstrap4.css
input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}
bootstrap4.css
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}
bootstrap4.css
textarea {
  overflow: auto;
  resize: vertical;
}
bootstrap4.css
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
bootstrap4.css
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}
bootstrap4.css
progress {
  vertical-align: baseline;
}
bootstrap4.css
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
bootstrap4.css
[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}
bootstrap4.css
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
bootstrap4.css
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}
bootstrap4.css
output {
  display: inline-block;
}
bootstrap4.css
summary {
  display: list-item;
  cursor: pointer;
}
bootstrap4.css
template {
  display: none;
}
bootstrap4.css
[hidden] {
  display: none !important;
}
bootstrap4.css
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
bootstrap4.css
.lead {
  font-size: 1.25rem;
  font-weight: 300;
}
bootstrap4.css
.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap4.css
.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap4.css
.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap4.css
.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}
bootstrap4.css
hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
bootstrap4.css
small,
.small {
  font-size: 80%;
  font-weight: 400;
}
bootstrap4.css
mark,
.mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}
bootstrap4.css
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
bootstrap4.css
.list-inline {
  padding-left: 0;
  list-style: none;
}
bootstrap4.css
.list-inline-item {
  display: inline-block;
}
bootstrap4.css
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
bootstrap4.css
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
bootstrap4.css
.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
bootstrap4.css
.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}
bootstrap4.css
.blockquote-footer::before {
  content: "20140A0";
}
bootstrap4.css
.img-fluid {
  max-width: 100%;
  height: auto;
}
bootstrap4.css
.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}
bootstrap4.css
.figure {
  display: inline-block;
}
bootstrap4.css
.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}
bootstrap4.css
.figure-caption {
  font-size: 90%;
  color: #6c757d;
}
bootstrap4.css
code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;
}
bootstrap4.css
a > code {
  color: inherit;
}
bootstrap4.css
kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}
bootstrap4.css
kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}
bootstrap4.css
pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}
bootstrap4.css
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
bootstrap4.css
.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}
bootstrap4.css
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
bootstrap4.css
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
bootstrap4.css
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
bootstrap4.css
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
bootstrap4.css
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
bootstrap4.css
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
bootstrap4.css
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
bootstrap4.css
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
bootstrap4.css
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
bootstrap4.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-righ
bootstrap4.css
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
bootstrap4.css
.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
bootstrap4.css
.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
bootstrap4.css
.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
bootstrap4.css
.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
bootstrap4.css
.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
bootstrap4.css
.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
bootstrap4.css
.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
bootstrap4.css
.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
bootstrap4.css
.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
bootstrap4.css
.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
bootstrap4.css
.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
bootstrap4.css
.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
bootstrap4.css
.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
bootstrap4.css
.order-last {
  -ms-flex-order: 13;
  order: 13;
}
bootstrap4.css
.offset-1 {
  margin-left: 8.333333%;
}
bootstrap4.css
.offset-2 {
  margin-left: 16.666667%;
}
bootstrap4.css
.offset-3 {
  margin-left: 25%;
}
bootstrap4.css
.offset-4 {
  margin-left: 33.333333%;
}
bootstrap4.css
.offset-5 {
  margin-left: 41.666667%;
}
bootstrap4.css
.offset-6 {
  margin-left: 50%;
}
bootstrap4.css
.offset-7 {
  margin-left: 58.333333%;
}
bootstrap4.css
.offset-8 {
  margin-left: 66.666667%;
}
bootstrap4.css
.offset-9 {
  margin-left: 75%;
}
bootstrap4.css
.offset-10 {
  margin-left: 83.333333%;
}
bootstrap4.css
.offset-11 {
  margin-left: 91.666667%;
}
bootstrap4.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%;
bootstrap4.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%;
bootstrap4.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%;
bootstrap4.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%;
bootstrap4.css
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}
bootstrap4.css
.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
bootstrap4.css
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}
bootstrap4.css
.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}
bootstrap4.css
.table-sm th,
.table-sm td {
  padding: 0.3rem;
}
bootstrap4.css
.table-bordered {
  border: 1px solid #dee2e6;
}
bootstrap4.css
.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}
bootstrap4.css
.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 2px;
}
bootstrap4.css
.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0;
}
bootstrap4.css
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
bootstrap4.css
.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap4.css
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #b8daff;
}
bootstrap4.css
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #7abaff;
}
bootstrap4.css
.table-hover .table-primary:hover {
  background-color: #9fcdff;
}
bootstrap4.css
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #9fcdff;
}
bootstrap4.css
.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #d6d8db;
}
bootstrap4.css
.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
  border-color: #b3b7bb;
}
bootstrap4.css
.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}
bootstrap4.css
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}
bootstrap4.css
.table-success,
.table-success > th,
.table-success > td {
  background-color: #c3e6cb;
}
bootstrap4.css
.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
  border-color: #8fd19e;
}
bootstrap4.css
.table-hover .table-success:hover {
  background-color: #b1dfbb;
}
bootstrap4.css
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}
bootstrap4.css
.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb;
}
bootstrap4.css
.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda;
}
bootstrap4.css
.table-hover .table-info:hover {
  background-color: #abdde5;
}
bootstrap4.css
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}
bootstrap4.css
.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffeeba;
}
bootstrap4.css
.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
  border-color: #ffdf7e;
}
bootstrap4.css
.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}
bootstrap4.css
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}
bootstrap4.css
.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f5c6cb;
}
bootstrap4.css
.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
  border-color: #ed969e;
}
bootstrap4.css
.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}
bootstrap4.css
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}
bootstrap4.css
.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}
bootstrap4.css
.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
  border-color: #fbfcfc;
}
bootstrap4.css
.table-hover .table-light:hover {
  background-color: #ececf6;
}
bootstrap4.css
.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}
bootstrap4.css
.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c8ca;
}
bootstrap4.css
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
  border-color: #95999c;
}
bootstrap4.css
.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}
bootstrap4.css
.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}
bootstrap4.css
.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap4.css
.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap4.css
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}
bootstrap4.css
.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}
bootstrap4.css
.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
bootstrap4.css
.table-dark {
  color: #fff;
  background-color: #343a40;
}
bootstrap4.css
.table-dark th,
.table-dark td,
.table-dark thead th {
  border-color: #454d55;
}
bootstrap4.css
.table-dark.table-bordered {
  border: 0;
}
bootstrap4.css
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
bootstrap4.css
.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
bootstrap4.css
.table-responsive > .table-bordered {
  border: 0;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
bootstrap4.css
.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}
bootstrap4.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);
}
bootstrap4.css
.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap4.css
.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap4.css
.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap4.css
.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap4.css
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
bootstrap4.css
.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}
bootstrap4.css
select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
bootstrap4.css
.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
select.form-control[size], select.form-control[multiple] {
  height: auto;
}
bootstrap4.css
textarea.form-control {
  height: auto;
}
bootstrap4.css
.form-group {
  margin-bottom: 1rem;
}
bootstrap4.css
.form-text {
  display: block;
  margin-top: 0.25rem;
}
bootstrap4.css
.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}
bootstrap4.css
.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}
bootstrap4.css
.form-check {
  position: relative;
  display: block;
  padding-left: 1.25rem;
}
bootstrap4.css
.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.25rem;
}
bootstrap4.css
.form-check-input:disabled ~ .form-check-label {
  color: #6c757d;
}
bootstrap4.css
.form-check-label {
  margin-bottom: 0;
}
bootstrap4.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;
}
bootstrap4.css
.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
}
bootstrap4.css
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}
bootstrap4.css
.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #28a745;
}
bootstrap4.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;
}
bootstrap4.css
.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
  color: #28a745;
}
bootstrap4.css
.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
  border-color: #28a745;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.css
.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
  border-color: #28a745;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}
bootstrap4.css
.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: .1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #dc3545;
}
bootstrap4.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;
}
bootstrap4.css
.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
  color: #dc3545;
}
bootstrap4.css
.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.css
.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
  border-color: #dc3545;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.form-inline {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-align: center;
  align-items: center;
}
bootstrap4.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;
  
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
bootstrap4.css
.btn:hover {
  color: #212529;
  text-decoration: none;
}
bootstrap4.css
.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap4.css
.btn.disabled, .btn:disabled {
  opacity: 0.65;
}
bootstrap4.css
a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}
bootstrap4.css
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap4.css
.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}
bootstrap4.css
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
bootstrap4.css
.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.css
.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
bootstrap4.css
.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
bootstrap4.css
.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap4.css
.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}
bootstrap4.css
.btn-success:focus, .btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}
bootstrap4.css
.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap4.css
.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}
bootstrap4.css
.btn-info:focus, .btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
bootstrap4.css
.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap4.css
.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}
bootstrap4.css
.btn-warning:focus, .btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
bootstrap4.css
.btn-warning.disabled, .btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap4.css
.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}
bootstrap4.css
.btn-danger:focus, .btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}
bootstrap4.css
.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-light {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap4.css
.btn-light:hover {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}
bootstrap4.css
.btn-light:focus, .btn-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
}
bootstrap4.css
.btn-light.disabled, .btn-light:disabled {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
bootstrap4.css
.btn-dark:hover {
  color: #fff;
  background-color: #23272b;
  border-color: #1d2124;
}
bootstrap4.css
.btn-dark:focus, .btn-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
}
bootstrap4.css
.btn-dark.disabled, .btn-dark:disabled {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-primary {
  color: #007bff;
  border-color: #007bff;
}
bootstrap4.css
.btn-outline-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap4.css
.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
bootstrap4.css
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #007bff;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.css
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
bootstrap4.css
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap4.css
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-success {
  color: #28a745;
  border-color: #28a745;
}
bootstrap4.css
.btn-outline-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}
bootstrap4.css
.btn-outline-success:focus, .btn-outline-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
bootstrap4.css
.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: #28a745;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-info {
  color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap4.css
.btn-outline-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
bootstrap4.css
.btn-outline-info:focus, .btn-outline-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
bootstrap4.css
.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}
bootstrap4.css
.btn-outline-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}
bootstrap4.css
.btn-outline-warning:focus, .btn-outline-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
bootstrap4.css
.btn-outline-warning.disabled, .btn-outline-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}
bootstrap4.css
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
bootstrap4.css
.btn-outline-danger:focus, .btn-outline-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
bootstrap4.css
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap4.css
.btn-outline-light:hover {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
bootstrap4.css
.btn-outline-light:focus, .btn-outline-light.focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
bootstrap4.css
.btn-outline-light.disabled, .btn-outline-light:disabled {
  color: #f8f9fa;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}
bootstrap4.css
.btn-outline-dark:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}
bootstrap4.css
.btn-outline-dark:focus, .btn-outline-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
bootstrap4.css
.btn-outline-dark.disabled, .btn-outline-dark:disabled {
  color: #343a40;
  background-color: transparent;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.btn-link {
  font-weight: 400;
  color: #007bff;
  text-decoration: none;
}
bootstrap4.css
.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
}
bootstrap4.css
.btn-link:focus, .btn-link.focus {
  text-decoration: underline;
  box-shadow: none;
}
bootstrap4.css
.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}
bootstrap4.css
.btn-lg, .btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}
bootstrap4.css
.btn-sm, .btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}
bootstrap4.css
.btn-block {
  display: block;
  width: 100%;
}
bootstrap4.css
.btn-block + .btn-block {
  margin-top: 0.5rem;
}
bootstrap4.css
.fade {
  transition: opacity 0.15s linear;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
bootstrap4.css
.fade:not(.show) {
  opacity: 0;
}
bootstrap4.css
.collapse:not(.show) {
  display: none;
}
bootstrap4.css
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
bootstrap4.css
.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}
bootstrap4.css
.dropdown-toggle {
  white-space: nowrap;
}
bootstrap4.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;
}
bootstrap4.css
.dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap4.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;
}
bootstrap4.css
.dropdown-menu-left {
  right: auto;
  left: 0;
}
bootstrap4.css
.dropdown-menu-right {
  right: 0;
  left: auto;
}
bootstrap4.css
@media (min-width: 576px) {
  .dropdown-menu-sm-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-right {
    right: 0;
    left: auto;
  }
}
bootstrap4.css
@media (min-width: 768px) {
  .dropdown-menu-md-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-right {
    right: 0;
    left: auto;
  }
}
bootstrap4.css
@media (min-width: 992px) {
  .dropdown-menu-lg-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-right {
    right: 0;
    left: auto;
  }
}
bootstrap4.css
@media (min-width: 1200px) {
  .dropdown-menu-xl-left {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-right {
    right: 0;
    left: auto;
  }
}
bootstrap4.css
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}
bootstrap4.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;
}
bootstrap4.css
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap4.css
.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}
bootstrap4.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;
}
bootstrap4.css
.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap4.css
.dropright .dropdown-toggle::after {
  vertical-align: 0;
}
bootstrap4.css
.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}
bootstrap4.css
.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
bootstrap4.css
.dropleft .dropdown-toggle::after {
  display: none;
}
bootstrap4.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;
}
bootstrap4.css
.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}
bootstrap4.css
.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}
bootstrap4.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;
}
bootstrap4.css
.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}
bootstrap4.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;
}
bootstrap4.css
.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}
bootstrap4.css
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}
bootstrap4.css
.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
bootstrap4.css
.dropdown-menu.show {
  display: block;
}
bootstrap4.css
.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}
bootstrap4.css
.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}
bootstrap4.css
.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
bootstrap4.css
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
bootstrap4.css
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}
bootstrap4.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;
}
bootstrap4.css
.btn-toolbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
bootstrap4.css
.btn-toolbar .input-group {
  width: auto;
}
bootstrap4.css
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
bootstrap4.css
.dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after,
.dropright .dropdown-toggle-split::after {
  margin-left: 0;
}
bootstrap4.css
.dropleft .dropdown-toggle-split::before {
  margin-right: 0;
}
bootstrap4.css
.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}
bootstrap4.css
.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
bootstrap4.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;
}
bootstrap4.css
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
bootstrap4.css
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}
bootstrap4.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;
}
bootstrap4.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%;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.input-group > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
bootstrap4.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;
}
bootstrap4.css
.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap4.css
.input-group-prepend,
.input-group-append {
  display: -ms-flexbox;
  display: flex;
}
bootstrap4.css
.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}
bootstrap4.css
.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}
bootstrap4.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;
}
bootstrap4.css
.input-group-prepend {
  margin-right: -1px;
}
bootstrap4.css
.input-group-append {
  margin-left: -1px;
}
bootstrap4.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;
}
bootstrap4.css
.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}
bootstrap4.css
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}
bootstrap4.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;
}
bootstrap4.css
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}
bootstrap4.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;
}
bootstrap4.css
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}
bootstrap4.css
.custom-control-inline {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}
bootstrap4.css
.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
bootstrap4.css
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}
bootstrap4.css
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap4.css
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff;
}
bootstrap4.css
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
bootstrap4.css
.custom-control-input:disabled ~ .custom-control-label {
  color: #6c757d;
}
bootstrap4.css
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
}
bootstrap4.css
.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
bootstrap4.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;
}
bootstrap4.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%;
}
bootstrap4.css
.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
bootstrap4.css
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}
bootstrap4.css
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap4.css
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap4.css
.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
bootstrap4.css
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap4.css
.custom-switch {
  padding-left: 2.25rem;
}
bootstrap4.css
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}
bootstrap4.css
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}
bootstrap4.css
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}
bootstrap4.css
.custom-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap4.css
.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
bootstrap4.css
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}
bootstrap4.css
.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}
bootstrap4.css
.custom-select::-ms-expand {
  display: none;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}
bootstrap4.css
.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}
bootstrap4.css
.custom-file-input:focus ~ .custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap4.css
.custom-file-input:disabled ~ .custom-file-label {
  background-color: #e9ecef;
}
bootstrap4.css
.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}
bootstrap4.css
.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.custom-range {
  width: 100%;
  height: calc(1rem + 0.4rem);
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap4.css
.custom-range:focus {
  outline: none;
}
bootstrap4.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);
}
bootstrap4.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);
}
bootstrap4.css
.custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap4.css
.custom-range::-moz-focus-outer {
  border: 0;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    transition: none;
  }
}
bootstrap4.css
.custom-range::-webkit-slider-thumb:active {
  background-color: #b3d7ff;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    transition: none;
  }
}
bootstrap4.css
.custom-range::-moz-range-thumb:active {
  background-color: #b3d7ff;
}
bootstrap4.css
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    transition: none;
  }
}
bootstrap4.css
.custom-range::-ms-thumb:active {
  background-color: #b3d7ff;
}
bootstrap4.css
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
bootstrap4.css
.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}
bootstrap4.css
.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}
bootstrap4.css
.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
bootstrap4.css
.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}
bootstrap4.css
.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}
bootstrap4.css
.custom-range:disabled::-moz-range-track {
  cursor: default;
}
bootstrap4.css
.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}
bootstrap4.css
.nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap4.css
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}
bootstrap4.css
.nav-link:hover, .nav-link:focus {
  text-decoration: none;
}
bootstrap4.css
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
bootstrap4.css
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
bootstrap4.css
.nav-tabs .nav-item {
  margin-bottom: -1px;
}
bootstrap4.css
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap4.css
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
}
bootstrap4.css
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
bootstrap4.css
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
bootstrap4.css
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap4.css
.nav-pills .nav-link {
  border-radius: 0.25rem;
}
bootstrap4.css
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #007bff;
}
bootstrap4.css
.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}
bootstrap4.css
.nav-justified .nav-item {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
bootstrap4.css
.tab-content > .tab-pane {
  display: none;
}
bootstrap4.css
.tab-content > .active {
  display: block;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.navbar-brand:hover, .navbar-brand:focus {
  text-decoration: none;
}
bootstrap4.css
.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
bootstrap4.css
.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}
bootstrap4.css
.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}
bootstrap4.css
.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.navbar-toggler:hover, .navbar-toggler:focus {
  text-decoration: none;
}
bootstrap4.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%;
}
bootstrap4.css
@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
@media (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
.navbar-expand {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
bootstrap4.css
.navbar-expand > .container,
.navbar-expand > .container-fluid {
  padding-right: 0;
  padding-left: 0;
}
bootstrap4.css
.navbar-expand .navbar-nav {
  -ms-flex-direction: row;
  flex-direction: row;
}
bootstrap4.css
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
bootstrap4.css
.navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
bootstrap4.css
.navbar-expand > .container,
.navbar-expand > .container-fluid {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
bootstrap4.css
.navbar-expand .navbar-collapse {
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
bootstrap4.css
.navbar-expand .navbar-toggler {
  display: none;
}
bootstrap4.css
.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap4.css
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap4.css
.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}
bootstrap4.css
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
}
bootstrap4.css
.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}
bootstrap4.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);
}
bootstrap4.css
.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}
bootstrap4.css
.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}
bootstrap4.css
.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap4.css
.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
  color: rgba(0, 0, 0, 0.9);
}
bootstrap4.css
.navbar-dark .navbar-brand {
  color: #fff;
}
bootstrap4.css
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}
bootstrap4.css
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}
bootstrap4.css
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
bootstrap4.css
.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}
bootstrap4.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;
}
bootstrap4.css
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}
bootstrap4.css
.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}
bootstrap4.css
.navbar-dark .navbar-text a {
  color: #fff;
}
bootstrap4.css
.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
  color: #fff;
}
bootstrap4.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;
}
bootstrap4.css
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
bootstrap4.css
.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap4.css
.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap4.css
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}
bootstrap4.css
.card-title {
  margin-bottom: 0.75rem;
}
bootstrap4.css
.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}
bootstrap4.css
.card-text:last-child {
  margin-bottom: 0;
}
bootstrap4.css
.card-link:hover {
  text-decoration: none;
}
bootstrap4.css
.card-link + .card-link {
  margin-left: 1.25rem;
}
bootstrap4.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);
}
bootstrap4.css
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
bootstrap4.css
.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}
bootstrap4.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);
}
bootstrap4.css
.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
bootstrap4.css
.card-header-tabs {
  margin-right: -0.625rem;
  margin-bottom: -0.75rem;
  margin-left: -0.625rem;
  border-bottom: 0;
}
bootstrap4.css
.card-header-pills {
  margin-right: -0.625rem;
  margin-left: -0.625rem;
}
bootstrap4.css
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}
bootstrap4.css
.card-img {
  width: 100%;
  border-radius: calc(0.25rem - 1px);
}
bootstrap4.css
.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
bootstrap4.css
.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
bootstrap4.css
.card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
bootstrap4.css
.card-deck .card {
  margin-bottom: 15px;
}
bootstrap4.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;
  }
}
bootstrap4.css
.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
bootstrap4.css
.card-group > .card {
  margin-bottom: 15px;
}
bootstrap4.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 >
bootstrap4.css
.card-columns .card {
  margin-bottom: 0.75rem;
}
bootstrap4.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%;
  }
}
bootstrap4.css
.accordion > .card {
  overflow: hidden;
}
bootstrap4.css
.accordion > .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}
bootstrap4.css
.accordion > .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}
bootstrap4.css
.accordion > .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
bootstrap4.css
.accordion > .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
bootstrap4.css
.accordion > .card .card-header {
  margin-bottom: -1px;
}
bootstrap4.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;
}
bootstrap4.css
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
bootstrap4.css
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}
bootstrap4.css
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}
bootstrap4.css
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}
bootstrap4.css
.breadcrumb-item.active {
  color: #6c757d;
}
bootstrap4.css
.pagination {
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}
bootstrap4.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;
}
bootstrap4.css
.page-link:hover {
  z-index: 2;
  color: #0056b3;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
bootstrap4.css
.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
bootstrap4.css
.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap4.css
.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
bootstrap4.css
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap4.css
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}
bootstrap4.css
.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
bootstrap4.css
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
bootstrap4.css
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
bootstrap4.css
.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
bootstrap4.css
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
bootstrap4.css
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}
bootstrap4.css
a.badge:hover, a.badge:focus {
  text-decoration: none;
}
bootstrap4.css
.badge:empty {
  display: none;
}
bootstrap4.css
.btn .badge {
  position: relative;
  top: -1px;
}
bootstrap4.css
.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}
bootstrap4.css
.badge-primary {
  color: #fff;
  background-color: #007bff;
}
bootstrap4.css
a.badge-primary:hover, a.badge-primary:focus {
  color: #fff;
  background-color: #0062cc;
}
bootstrap4.css
a.badge-primary:focus, a.badge-primary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}
bootstrap4.css
.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}
bootstrap4.css
a.badge-secondary:hover, a.badge-secondary:focus {
  color: #fff;
  background-color: #545b62;
}
bootstrap4.css
a.badge-secondary:focus, a.badge-secondary.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}
bootstrap4.css
.badge-success {
  color: #fff;
  background-color: #28a745;
}
bootstrap4.css
a.badge-success:hover, a.badge-success:focus {
  color: #fff;
  background-color: #1e7e34;
}
bootstrap4.css
a.badge-success:focus, a.badge-success.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}
bootstrap4.css
.badge-info {
  color: #fff;
  background-color: #17a2b8;
}
bootstrap4.css
a.badge-info:hover, a.badge-info:focus {
  color: #fff;
  background-color: #117a8b;
}
bootstrap4.css
a.badge-info:focus, a.badge-info.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}
bootstrap4.css
.badge-warning {
  color: #212529;
  background-color: #ffc107;
}
bootstrap4.css
a.badge-warning:hover, a.badge-warning:focus {
  color: #212529;
  background-color: #d39e00;
}
bootstrap4.css
a.badge-warning:focus, a.badge-warning.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}
bootstrap4.css
.badge-danger {
  color: #fff;
  background-color: #dc3545;
}
bootstrap4.css
a.badge-danger:hover, a.badge-danger:focus {
  color: #fff;
  background-color: #bd2130;
}
bootstrap4.css
a.badge-danger:focus, a.badge-danger.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}
bootstrap4.css
.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}
bootstrap4.css
a.badge-light:hover, a.badge-light:focus {
  color: #212529;
  background-color: #dae0e5;
}
bootstrap4.css
a.badge-light:focus, a.badge-light.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}
bootstrap4.css
.badge-dark {
  color: #fff;
  background-color: #343a40;
}
bootstrap4.css
a.badge-dark:hover, a.badge-dark:focus {
  color: #fff;
  background-color: #1d2124;
}
bootstrap4.css
a.badge-dark:focus, a.badge-dark.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}
bootstrap4.css
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}
bootstrap4.css
@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}
bootstrap4.css
.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}
bootstrap4.css
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
bootstrap4.css
.alert-heading {
  color: inherit;
}
bootstrap4.css
.alert-link {
  font-weight: 700;
}
bootstrap4.css
.alert-dismissible {
  padding-right: 4rem;
}
bootstrap4.css
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}
bootstrap4.css
.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
bootstrap4.css
.alert-primary hr {
  border-top-color: #9fcdff;
}
bootstrap4.css
.alert-primary .alert-link {
  color: #002752;
}
bootstrap4.css
.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}
bootstrap4.css
.alert-secondary hr {
  border-top-color: #c8cbcf;
}
bootstrap4.css
.alert-secondary .alert-link {
  color: #202326;
}
bootstrap4.css
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
bootstrap4.css
.alert-success hr {
  border-top-color: #b1dfbb;
}
bootstrap4.css
.alert-success .alert-link {
  color: #0b2e13;
}
bootstrap4.css
.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}
bootstrap4.css
.alert-info hr {
  border-top-color: #abdde5;
}
bootstrap4.css
.alert-info .alert-link {
  color: #062c33;
}
bootstrap4.css
.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
bootstrap4.css
.alert-warning hr {
  border-top-color: #ffe8a1;
}
bootstrap4.css
.alert-warning .alert-link {
  color: #533f03;
}
bootstrap4.css
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
bootstrap4.css
.alert-danger hr {
  border-top-color: #f1b0b7;
}
bootstrap4.css
.alert-danger .alert-link {
  color: #491217;
}
bootstrap4.css
.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
bootstrap4.css
.alert-light hr {
  border-top-color: #ececf6;
}
bootstrap4.css
.alert-light .alert-link {
  color: #686868;
}
bootstrap4.css
.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}
bootstrap4.css
.alert-dark hr {
  border-top-color: #b9bbbe;
}
bootstrap4.css
.alert-dark .alert-link {
  color: #040505;
}
bootstrap4.css
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
bootstrap4.css
@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
bootstrap4.css
.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
bootstrap4.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;
}
bootstrap4.css
.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    -webkit-animation: none;
    animation: none;
  }
}
bootstrap4.css
.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}
bootstrap4.css
.media-body {
  -ms-flex: 1;
  flex: 1;
}
bootstrap4.css
.list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}
bootstrap4.css
.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}
bootstrap4.css
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}
bootstrap4.css
.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}
bootstrap4.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);
}
bootstrap4.css
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
bootstrap4.css
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
bootstrap4.css
.list-group-item.disabled, .list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}
bootstrap4.css
.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
bootstrap4.css
.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}
bootstrap4.css
.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
bootstrap4.css
.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}
bootstrap4.css
.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
bootstrap4.css
.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}
bootstrap4.css
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
  color: #004085;
  background-color: #9fcdff;
}
bootstrap4.css
.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}
bootstrap4.css
.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}
bootstrap4.css
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
  color: #383d41;
  background-color: #c8cbcf;
}
bootstrap4.css
.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}
bootstrap4.css
.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}
bootstrap4.css
.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}
bootstrap4.css
.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}
bootstrap4.css
.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}
bootstrap4.css
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}
bootstrap4.css
.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}
bootstrap4.css
.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}
bootstrap4.css
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}
bootstrap4.css
.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}
bootstrap4.css
.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}
bootstrap4.css
.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}
bootstrap4.css
.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}
bootstrap4.css
.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}
bootstrap4.css
.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}
bootstrap4.css
.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}
bootstrap4.css
.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}
bootstrap4.css
.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}
bootstrap4.css
.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}
bootstrap4.css
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
bootstrap4.css
.close:hover {
  color: #000;
  text-decoration: none;
}
bootstrap4.css
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}
bootstrap4.css
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
bootstrap4.css
a.close.disabled {
  pointer-events: none;
}
bootstrap4.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;
}
bootstrap4.css
.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}
bootstrap4.css
.toast.showing {
  opacity: 1;
}
bootstrap4.css
.toast.show {
  display: block;
  opacity: 1;
}
bootstrap4.css
.toast.hide {
  display: none;
}
bootstrap4.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);
}
bootstrap4.css
.toast-body {
  padding: 0.75rem;
}
bootstrap4.css
.modal-open {
  overflow: hidden;
}
bootstrap4.css
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
bootstrap4.css
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
bootstrap4.css
.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
bootstrap4.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);
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
bootstrap4.css
.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}
bootstrap4.css
.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}
bootstrap4.css
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}
bootstrap4.css
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
bootstrap4.css
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}
bootstrap4.css
.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}
bootstrap4.css
.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}
bootstrap4.css
.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}
bootstrap4.css
.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}
bootstrap4.css
.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}
bootstrap4.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;
}
bootstrap4.css
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
bootstrap4.css
.modal-backdrop.fade {
  opacity: 0;
}
bootstrap4.css
.modal-backdrop.show {
  opacity: 0.5;
}
bootstrap4.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;
}
bootstrap4.css
.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}
bootstrap4.css
.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}
bootstrap4.css
.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}
bootstrap4.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;
}
bootstrap4.css
.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}
bootstrap4.css
.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}
bootstrap4.css
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
bootstrap4.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;
  }
}
bootstrap4.css
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}
bootstrap4.css
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}
bootstrap4.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;
}
bootstrap4.css
.tooltip.show {
  opacity: 0.9;
}
bootstrap4.css
.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}
bootstrap4.css
.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap4.css
.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
  padding: 0.4rem 0;
}
bootstrap4.css
.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
  bottom: 0;
}
bootstrap4.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;
}
bootstrap4.css
.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
  padding: 0 0.4rem;
}
bootstrap4.css
.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}
bootstrap4.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;
}
bootstrap4.css
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
  padding: 0.4rem 0;
}
bootstrap4.css
.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
  top: 0;
}
bootstrap4.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;
}
bootstrap4.css
.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
  padding: 0 0.4rem;
}
bootstrap4.css
.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}
bootstrap4.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;
}
bootstrap4.css
.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}
bootstrap4.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;
}
bootstrap4.css
.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}
bootstrap4.css
.popover .arrow::before, .popover .arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}
bootstrap4.css
.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
  margin-bottom: 0.5rem;
}
bootstrap4.css
.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
  bottom: calc((0.5rem + 1px) * -1);
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.css
.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
  margin-left: 0.5rem;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.css
.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
  margin-top: 0.5rem;
}
bootstrap4.css
.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
  top: calc((0.5rem + 1px) * -1);
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.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;
}
bootstrap4.css
.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
  margin-right: 0.5rem;
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.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;
}
bootstrap4.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);
}
bootstrap4.css
.popover-header:empty {
  display: none;
}
bootstrap4.css
.popover-body {
  padding: 0.5rem 0.75rem;
  color: #212529;
}
bootstrap4.css
.carousel {
  position: relative;
}
bootstrap4.css
.carousel.pointer-event {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
bootstrap4.css
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
bootstrap4.css
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
bootstrap4.css
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}
bootstrap4.css
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
bootstrap4.css
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
bootstrap4.css
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  -webkit-transform: none;
  transform: none;
}
bootstrap4.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;
}
bootstrap4.css
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: 0s 0.6s opacity;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}
bootstrap4.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;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
bootstrap4.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;
}
bootstrap4.css
.carousel-control-prev {
  left: 0;
}
bootstrap4.css
.carousel-control-next {
  right: 0;
}
bootstrap4.css
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%;
}
bootstrap4.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;
}
bootstrap4.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: .5;
  transition: opacity 0.6s ease;
}
bootstrap4.css
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}
bootstrap4.css
.carousel-indicators .active {
  opacity: 1;
}
bootstrap4.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;
}
bootstrap4.css
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
bootstrap4.css
@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
bootstrap4.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 .75s linear infinite;
  animation: spinner-border .75s linear infinite;
}
bootstrap4.css
@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
bootstrap4.css
@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
bootstrap4.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 .75s linear infinite;
  animation: spinner-grow .75s linear infinite;
}
bootstrap4.css
.align-baseline {
  vertical-align: baseline !important;
}
bootstrap4.css
.align-top {
  vertical-align: top !important;
}
bootstrap4.css
.align-middle {
  vertical-align: middle !important;
}
bootstrap4.css
.align-bottom {
  vertical-align: bottom !important;
}
bootstrap4.css
.align-text-bottom {
  vertical-align: text-bottom !important;
}
bootstrap4.css
.align-text-top {
  vertical-align: text-top !important;
}
bootstrap4.css
.bg-primary {
  background-color: #007bff !important;
}
bootstrap4.css
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}
bootstrap4.css
.bg-secondary {
  background-color: #6c757d !important;
}
bootstrap4.css
a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #545b62 !important;
}
bootstrap4.css
.bg-success {
  background-color: #28a745 !important;
}
bootstrap4.css
a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
  background-color: #1e7e34 !important;
}
bootstrap4.css
.bg-info {
  background-color: #17a2b8 !important;
}
bootstrap4.css
a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
  background-color: #117a8b !important;
}
bootstrap4.css
.bg-warning {
  background-color: #ffc107 !important;
}
bootstrap4.css
a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #d39e00 !important;
}
bootstrap4.css
.bg-danger {
  background-color: #dc3545 !important;
}
bootstrap4.css
a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #bd2130 !important;
}
bootstrap4.css
.bg-light {
  background-color: #f8f9fa !important;
}
bootstrap4.css
a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #dae0e5 !important;
}
bootstrap4.css
.bg-dark {
  background-color: #343a40 !important;
}
bootstrap4.css
a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #1d2124 !important;
}
bootstrap4.css
.bg-white {
  background-color: #fff !important;
}
bootstrap4.css
.bg-transparent {
  background-color: transparent !important;
}
bootstrap4.css
.border {
  border: 1px solid #dee2e6 !important;
}
bootstrap4.css
.border-top {
  border-top: 1px solid #dee2e6 !important;
}
bootstrap4.css
.border-right {
  border-right: 1px solid #dee2e6 !important;
}
bootstrap4.css
.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}
bootstrap4.css
.border-left {
  border-left: 1px solid #dee2e6 !important;
}
bootstrap4.css
.border-0 {
  border: 0 !important;
}
bootstrap4.css
.border-top-0 {
  border-top: 0 !important;
}
bootstrap4.css
.border-right-0 {
  border-right: 0 !important;
}
bootstrap4.css
.border-bottom-0 {
  border-bottom: 0 !important;
}
bootstrap4.css
.border-left-0 {
  border-left: 0 !important;
}
bootstrap4.css
.border-primary {
  border-color: #007bff !important;
}
bootstrap4.css
.border-secondary {
  border-color: #6c757d !important;
}
bootstrap4.css
.border-success {
  border-color: #28a745 !important;
}
bootstrap4.css
.border-info {
  border-color: #17a2b8 !important;
}
bootstrap4.css
.border-warning {
  border-color: #ffc107 !important;
}
bootstrap4.css
.border-danger {
  border-color: #dc3545 !important;
}
bootstrap4.css
.border-light {
  border-color: #f8f9fa !important;
}
bootstrap4.css
.border-dark {
  border-color: #343a40 !important;
}
bootstrap4.css
.border-white {
  border-color: #fff !important;
}
bootstrap4.css
.rounded-sm {
  border-radius: 0.2rem !important;
}
bootstrap4.css
.rounded {
  border-radius: 0.25rem !important;
}
bootstrap4.css
.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}
bootstrap4.css
.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}
bootstrap4.css
.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
bootstrap4.css
.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
bootstrap4.css
.rounded-lg {
  border-radius: 0.3rem !important;
}
bootstrap4.css
.rounded-circle {
  border-radius: 50% !important;
}
bootstrap4.css
.rounded-pill {
  border-radius: 50rem !important;
}
bootstrap4.css
.rounded-0 {
  border-radius: 0 !important;
}
bootstrap4.css
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
bootstrap4.css
.d-none {
  display: none !important;
}
bootstrap4.css
.d-inline {
  display: inline !important;
}
bootstrap4.css
.d-inline-block {
  display: inline-block !important;
}
bootstrap4.css
.d-block {
  display: block !important;
}
bootstrap4.css
.d-table {
  display: table !important;
}
bootstrap4.css
.d-table-row {
  display: table-row !important;
}
bootstrap4.css
.d-table-cell {
  display: table-cell !important;
}
bootstrap4.css
.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}
bootstrap4.css
.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
bootstrap4.css
.embed-responsive::before {
  display: block;
  content: "";
}
bootstrap4.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;
}
bootstrap4.css
.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}
bootstrap4.css
.embed-responsive-16by9::before {
  padding-top: 56.25%;
}
bootstrap4.css
.embed-responsive-4by3::before {
  padding-top: 75%;
}
bootstrap4.css
.embed-responsive-1by1::before {
  padding-top: 100%;
}
bootstrap4.css
.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
bootstrap4.css
.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
bootstrap4.css
.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}
bootstrap4.css
.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}
bootstrap4.css
.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
bootstrap4.css
.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
bootstrap4.css
.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}
bootstrap4.css
.flex-fill {
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}
bootstrap4.css
.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}
bootstrap4.css
.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}
bootstrap4.css
.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}
bootstrap4.css
.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}
bootstrap4.css
.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
bootstrap4.css
.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
bootstrap4.css
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
bootstrap4.css
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
bootstrap4.css
.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}
bootstrap4.css
.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
bootstrap4.css
.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}
bootstrap4.css
.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
bootstrap4.css
.align-items-baseline {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}
bootstrap4.css
.align-items-stretch {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}
bootstrap4.css
.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}
bootstrap4.css
.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}
bootstrap4.css
.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}
bootstrap4.css
.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}
bootstrap4.css
.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}
bootstrap4.css
.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}
bootstrap4.css
.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}
bootstrap4.css
.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}
bootstrap4.css
.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}
bootstrap4.css
.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}
bootstrap4.css
.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}
bootstrap4.css
.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}
bootstrap4.css
@media (min-width: 576px) {
  .flex-sm-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-sm-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-sm-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-sm-fill {
bootstrap4.css
@media (min-width: 768px) {
  .flex-md-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-md-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-md-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-md-fill {
bootstrap4.css
@media (min-width: 992px) {
  .flex-lg-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-lg-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-lg-fill {
bootstrap4.css
@media (min-width: 1200px) {
  .flex-xl-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  .flex-xl-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
  }
  .flex-xl-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .flex-xl-fill {
bootstrap4.css
.float-left {
  float: left !important;
}
bootstrap4.css
.float-right {
  float: right !important;
}
bootstrap4.css
.float-none {
  float: none !important;
}
bootstrap4.css
@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}
bootstrap4.css
@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}
bootstrap4.css
@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}
bootstrap4.css
@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}
bootstrap4.css
.overflow-auto {
  overflow: auto !important;
}
bootstrap4.css
.overflow-hidden {
  overflow: hidden !important;
}
bootstrap4.css
.position-static {
  position: static !important;
}
bootstrap4.css
.position-relative {
  position: relative !important;
}
bootstrap4.css
.position-absolute {
  position: absolute !important;
}
bootstrap4.css
.position-fixed {
  position: fixed !important;
}
bootstrap4.css
.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
bootstrap4.css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
bootstrap4.css
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
bootstrap4.css
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
bootstrap4.css
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
bootstrap4.css
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
bootstrap4.css
.shadow-none {
  box-shadow: none !important;
}
bootstrap4.css
.w-25 {
  width: 25% !important;
}
bootstrap4.css
.w-50 {
  width: 50% !important;
}
bootstrap4.css
.w-75 {
  width: 75% !important;
}
bootstrap4.css
.w-100 {
  width: 100% !important;
}
bootstrap4.css
.w-auto {
  width: auto !important;
}
bootstrap4.css
.h-25 {
  height: 25% !important;
}
bootstrap4.css
.h-50 {
  height: 50% !important;
}
bootstrap4.css
.h-75 {
  height: 75% !important;
}
bootstrap4.css
.h-100 {
  height: 100% !important;
}
bootstrap4.css
.h-auto {
  height: auto !important;
}
bootstrap4.css
.mw-100 {
  max-width: 100% !important;
}
bootstrap4.css
.mh-100 {
  max-height: 100% !important;
}
bootstrap4.css
.min-vw-100 {
  min-width: 100vw !important;
}
bootstrap4.css
.min-vh-100 {
  min-height: 100vh !important;
}
bootstrap4.css
.vw-100 {
  width: 100vw !important;
}
bootstrap4.css
.vh-100 {
  height: 100vh !important;
}
bootstrap4.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);
}
bootstrap4.css
.m-0 {
  margin: 0 !important;
}
bootstrap4.css
.mt-0,
.my-0 {
  margin-top: 0 !important;
}
bootstrap4.css
.mr-0,
.mx-0 {
  margin-right: 0 !important;
}
bootstrap4.css
.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}
bootstrap4.css
.ml-0,
.mx-0 {
  margin-left: 0 !important;
}
bootstrap4.css
.m-1 {
  margin: 0.25rem !important;
}
bootstrap4.css
.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}
bootstrap4.css
.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}
bootstrap4.css
.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}
bootstrap4.css
.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}
bootstrap4.css
.m-2 {
  margin: 0.5rem !important;
}
bootstrap4.css
.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}
bootstrap4.css
.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}
bootstrap4.css
.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}
bootstrap4.css
.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}
bootstrap4.css
.m-3 {
  margin: 1rem !important;
}
bootstrap4.css
.mt-3,
.my-3 {
  margin-top: 1rem !important;
}
bootstrap4.css
.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}
bootstrap4.css
.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}
bootstrap4.css
.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}
bootstrap4.css
.m-4 {
  margin: 1.5rem !important;
}
bootstrap4.css
.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}
bootstrap4.css
.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}
bootstrap4.css
.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}
bootstrap4.css
.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}
bootstrap4.css
.m-5 {
  margin: 3rem !important;
}
bootstrap4.css
.mt-5,
.my-5 {
  margin-top: 3rem !important;
}
bootstrap4.css
.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}
bootstrap4.css
.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}
bootstrap4.css
.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}
bootstrap4.css
.p-0 {
  padding: 0 !important;
}
bootstrap4.css
.pt-0,
.py-0 {
  padding-top: 0 !important;
}
bootstrap4.css
.pr-0,
.px-0 {
  padding-right: 0 !important;
}
bootstrap4.css
.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}
bootstrap4.css
.pl-0,
.px-0 {
  padding-left: 0 !important;
}
bootstrap4.css
.p-1 {
  padding: 0.25rem !important;
}
bootstrap4.css
.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}
bootstrap4.css
.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}
bootstrap4.css
.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}
bootstrap4.css
.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}
bootstrap4.css
.p-2 {
  padding: 0.5rem !important;
}
bootstrap4.css
.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}
bootstrap4.css
.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}
bootstrap4.css
.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}
bootstrap4.css
.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}
bootstrap4.css
.p-3 {
  padding: 1rem !important;
}
bootstrap4.css
.pt-3,
.py-3 {
  padding-top: 1rem !important;
}
bootstrap4.css
.pr-3,
.px-3 {
  padding-right: 1rem !important;
}
bootstrap4.css
.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}
bootstrap4.css
.pl-3,
.px-3 {
  padding-left: 1rem !important;
}
bootstrap4.css
.p-4 {
  padding: 1.5rem !important;
}
bootstrap4.css
.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}
bootstrap4.css
.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}
bootstrap4.css
.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}
bootstrap4.css
.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}
bootstrap4.css
.p-5 {
  padding: 3rem !important;
}
bootstrap4.css
.pt-5,
.py-5 {
  padding-top: 3rem !important;
}
bootstrap4.css
.pr-5,
.px-5 {
  padding-right: 3rem !important;
}
bootstrap4.css
.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}
bootstrap4.css
.pl-5,
.px-5 {
  padding-left: 3rem !important;
}
bootstrap4.css
.m-n1 {
  margin: -0.25rem !important;
}
bootstrap4.css
.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}
bootstrap4.css
.mr-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}
bootstrap4.css
.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}
bootstrap4.css
.ml-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}
bootstrap4.css
.m-n2 {
  margin: -0.5rem !important;
}
bootstrap4.css
.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}
bootstrap4.css
.mr-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}
bootstrap4.css
.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}
bootstrap4.css
.ml-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}
bootstrap4.css
.m-n3 {
  margin: -1rem !important;
}
bootstrap4.css
.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}
bootstrap4.css
.mr-n3,
.mx-n3 {
  margin-right: -1rem !important;
}
bootstrap4.css
.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}
bootstrap4.css
.ml-n3,
.mx-n3 {
  margin-left: -1rem !important;
}
bootstrap4.css
.m-n4 {
  margin: -1.5rem !important;
}
bootstrap4.css
.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}
bootstrap4.css
.mr-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}
bootstrap4.css
.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}
bootstrap4.css
.ml-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}
bootstrap4.css
.m-n5 {
  margin: -3rem !important;
}
bootstrap4.css
.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}
bootstrap4.css
.mr-n5,
.mx-n5 {
  margin-right: -3rem !important;
}
bootstrap4.css
.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}
bootstrap4.css
.ml-n5,
.mx-n5 {
  margin-left: -3rem !important;
}
bootstrap4.css
.m-auto {
  margin: auto !important;
}
bootstrap4.css
.mt-auto,
.my-auto {
  margin-top: auto !important;
}
bootstrap4.css
.mr-auto,
.mx-auto {
  margin-right: auto !important;
}
bootstrap4.css
.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}
bootstrap4.css
.ml-auto,
.mx-auto {
  margin-left: auto !important;
}
bootstrap4.css
@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }
  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }
  .mr-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }
  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }
  .ml-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mr-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }
  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mr-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
 
bootstrap4.css
@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }
  .mr-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }
  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }
  .ml-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }
  .mr-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }
  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }
  .mr-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
 
bootstrap4.css
@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }
  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }
  .mr-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }
  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }
  .ml-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mr-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }
  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mr-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
 
bootstrap4.css
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }
  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }
  .mr-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }
  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }
  .ml-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mr-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }
  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .ml-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mr-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
bootstrap4.css
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
bootstrap4.css
.text-justify {
  text-align: justify !important;
}
bootstrap4.css
.text-wrap {
  white-space: normal !important;
}
bootstrap4.css
.text-nowrap {
  white-space: nowrap !important;
}
bootstrap4.css
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
bootstrap4.css
.text-left {
  text-align: left !important;
}
bootstrap4.css
.text-right {
  text-align: right !important;
}
bootstrap4.css
.text-center {
  text-align: center !important;
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.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;
  }
}
bootstrap4.css
.text-lowercase {
  text-transform: lowercase !important;
}
bootstrap4.css
.text-uppercase {
  text-transform: uppercase !important;
}
bootstrap4.css
.text-capitalize {
  text-transform: capitalize !important;
}
bootstrap4.css
.font-weight-light {
  font-weight: 300 !important;
}
bootstrap4.css
.font-weight-lighter {
  font-weight: lighter !important;
}
bootstrap4.css
.font-weight-normal {
  font-weight: 400 !important;
}
bootstrap4.css
.font-weight-bold {
  font-weight: 700 !important;
}
bootstrap4.css
.font-weight-bolder {
  font-weight: bolder !important;
}
bootstrap4.css
.font-italic {
  font-style: italic !important;
}
bootstrap4.css
.text-white {
  color: #fff !important;
}
bootstrap4.css
.text-primary {
  color: #007bff !important;
}
bootstrap4.css
a.text-primary:hover, a.text-primary:focus {
  color: #0056b3 !important;
}
bootstrap4.css
.text-secondary {
  color: #6c757d !important;
}
bootstrap4.css
a.text-secondary:hover, a.text-secondary:focus {
  color: #494f54 !important;
}
bootstrap4.css
.text-success {
  color: #28a745 !important;
}
bootstrap4.css
a.text-success:hover, a.text-success:focus {
  color: #19692c !important;
}
bootstrap4.css
.text-info {
  color: #17a2b8 !important;
}
bootstrap4.css
a.text-info:hover, a.text-info:focus {
  color: #0f6674 !important;
}
bootstrap4.css
.text-warning {
  color: #ffc107 !important;
}
bootstrap4.css
a.text-warning:hover, a.text-warning:focus {
  color: #ba8b00 !important;
}
bootstrap4.css
.text-danger {
  color: #dc3545 !important;
}
bootstrap4.css
a.text-danger:hover, a.text-danger:focus {
  color: #a71d2a !important;
}
bootstrap4.css
.text-light {
  color: #f8f9fa !important;
}
bootstrap4.css
a.text-light:hover, a.text-light:focus {
  color: #cbd3da !important;
}
bootstrap4.css
.text-dark {
  color: #343a40 !important;
}
bootstrap4.css
a.text-dark:hover, a.text-dark:focus {
  color: #121416 !important;
}
bootstrap4.css
.text-body {
  color: #212529 !important;
}
bootstrap4.css
.text-muted {
  color: #6c757d !important;
}
bootstrap4.css
.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
bootstrap4.css
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}
bootstrap4.css
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
bootstrap4.css
.text-decoration-none {
  text-decoration: none !important;
}
bootstrap4.css
.text-break {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
bootstrap4.css
.text-reset {
  color: inherit !important;
}
bootstrap4.css
.visible {
  visibility: visible !important;
}
bootstrap4.css
.invisible {
  visibility: hidden !important;
}
bootstrap4.css
@media print {
  *,
  *::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: co
■レイアウト:rowとcol:なにもしなければ等幅カラムになる、レスポンシブなし、そのまま縮小される

1列目
2列目
1列目
2列目
3列目
<section>
<div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
  </div>
  <div class="row">
    <div class="col">1列目</div>
    <div class="col">2列目</div>
    <div class="col">3列目</div>
  </div>
</section>
■レイアウト:rowとcol:合計12にして、カラムの幅を指定する 2列カラム + 4列カラム + 6列カラム = 12列分

col-2
col-4
col-6
  <div class="row"> 
    <div class="col-2">col-2</div>
    <div class="col-4">col-4</div>
    <div class="col-6">col-6</div>
  </div>
■レイアウト:rowとcol:1カラムのみ幅を設定 残りは等価

col
col-6
col
  <div class="row">
    <div class="col">col</div>
    <div class="col-6">col-6</div><!-- 指定幅:6列カラム -->
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:可変幅カラム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>
    <div class="col-md-auto">col-md-auto:Medium以上でコンテンツによって幅が可変</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:12を超える場合 勝手に折り返りが起こる、行単位で12で計算され、折り返しが決まる

col-9
col-4
col-6
  <div class="row">
    <div class="col-9">col-9</div>
    <div class="col-4">col-4</div>
    <div class="col-6">col-6</div>
  </div>
■レイアウト:rowとcol:等幅カラムを複数行に分割する これも勝手に折り返しが起こる

col
col
col
col
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:グリッドレイアウトのネスト 入れ子

構造が再帰的に繰り返されて記述されること 自分が自分に戻ってくること

第一階層: col-sm-9
第二階層: col-8とcol-sm-6
第二階層: ¥col-4とcol-sm-6
第一階層: col-sm-3
<p>構造が再帰的に繰り返されて記述されること 自分が自分に戻ってくること</p>
  <div class="row">
    <div class="col-sm-9">第一階層: col-sm-9 
      <div class="row">
        <div class="col-8 col-sm-6">第二階層: col-8とcol-sm-6</div>
        <div class="col-4 col-sm-6">第二階層: ¥col-4とcol-sm-6</div>
      </div>
     </div>
     <div class="col-sm-3">第一階層: col-sm-3</div>
  </div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 左寄せ:justify-content:flex-start

col-4
col-4
  <div class="row justify-content-start">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 中央寄せ:justify-content:flex-center

col-4
col-4
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
</div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 右寄せ:justify-content:flex-end

col-4
col-4
  <div class="row justify-content-end">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
  </div>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 等間隔に配置: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>
■レイアウト:rowとcol:水平方向整列 残りは勝手に余白になる 両端から均等に配置: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>
■レイアウト:rowとcol:カラム単位での垂直方向整列

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>
■レイアウト:rowとcol:複数クラスの組み合わせ:全幅カラム+半幅カラム、Medium以上:8列+4列カラム

col-12とcol-md-8
col-6とcol-md-4
  <div class="row"> 
    <div class="col-12 col-md-8">col-12とcol-md-8</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
  </div>
■レイアウト:rowとcol:複数クラスの組み合わせ:半幅カラム×3、Medium以上:4列カラム×3

col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4
  <div class="row"> 
    <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>
■レイアウト:rowとcol:行の分割をブレイクポイントで切り替える

col
col
col
col
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100 d-none d-md-block"></div>
    <!-- Medium以上では{dsplay:block}、未満では{display:none} -->
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:ガターを削除したカラム no-guttersありの場合

col
col
  <div class="row no-gutters">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:ガターを削除したカラム no-guttersなしの場合(はみ出るね)

col
col
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:ガターを削除したカラム コンテナなし(画面いっぱいに広がる)、no-guttersありの場合

col
col
<div class="row no-gutters">
  <div class="col">col</div>
  <div class="col">col</div>
</div>
■レイアウト:rowとcol:オフセットのリセット

col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
  <div class="row">
    <div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
    <!-- Medium以上でオフセットをクリア -->
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
  </div>
■レイアウト:rowとcol:Spacingユーティリティのマージン設定を指定したオフセット

col-md-3とml-md-auto
col-md-3とml-md-auto
  <div class="row">
    <!-- Medium以上でml(margin-left)を自動設定 -->
    <div class="col-md-3 ml-md-auto">col-md-3とml-md-auto </div>
    <!-- Medium以上でml(margin-left)を自動設定 -->
    <div class="col-md-3 ml-md-auto">col-md-3とml-md-auto </div>
  </div>
■レイアウト:rowとcol:オフセット用クラスによるカラムのオフセット

col-md-4
col-md-4とoffset-md-4
  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4 offset-md-4">col-md-4とoffset-md-4</div><!-- Medium以上で4列分左に移動 -->
  </div>
■レイアウト:rowとcol:コンテンツの並べ替え:order-1~order-12

第1のカラム(順序指定なし)
第2のカラム(順序指定は12)
第3のカラム(順序指定は1)
  <div class="row">
    <div class="col">第1のカラム(順序指定なし)</div>
    <div class="col order-12">第2のカラム(順序指定は12)</div>
    <div class="col order-1">第3のカラム(順序指定は1)</div>
  </div>
■レイアウト:rowとcol:コンテンツの並べ替え:orderfirst

第1のカラム(順序指定なし)
第2のカラム(順序指定なし)
第3のカラム(順序指定は1)
  <div class="row">
    <div class="col">第1のカラム(順序指定なし)</div>
    <div class="col">第2のカラム(順序指定なし)</div>
    <div class="col order-first">第3のカラム(順序指定は1)</div>
  </div>
■レイアウト:rowとcol:ブレイクポイントによる切り替え

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
   <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
■レイアウト:rowとcol:垂直整列上寄せ:align-items-start

col
col
col
  <div class="row align-items-start">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:垂直整列中央寄せ:align-items-center

col
col
col
  <div class="row align-items-center">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
■レイアウト:rowとcol:垂直整列下寄せ:align-items-end

col
col
col
  <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の折り返し 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">
  <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 d-flex:ユーティリティ: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
<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 d-flex:ユーティリティ: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">
  <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 d-flex:ユーティリティ: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">
  <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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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">
  <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 d-flex:ユーティリティ:flexの自動整列 align-content-between 高さ固定

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-between 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 d-flex:ユーティリティ:flexの自動整列 align-content-around 高さ固定

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-around 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 d-flex:ユーティリティ: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">
  <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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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">
    <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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ:flexコンテナ全幅等幅整列 flex-fill 横幅で等幅

flex文字01
flex文字02
flex文字03
  <div class="d-flex">
    <div class="flex-fill">flex文字01</div>
    <div class="flex-fill">flex文字02</div>
    <div class="flex-fill">flex文字03</div>
  </div>
  
  
■レイアウト:Flex d-flex:ユーティリティ: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 d-flex:ユーティリティ:flexコンテナの主軸方向右から左(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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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>
  
■レイアウト:Flex d-flex:ユーティリティ:flex文字の伸縮 デフォルト

flex文字01
flex文字02
flex文字03
  <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 d-flex:ユーティリティ:flex文字の伸縮 flex-grow 余白を埋める機能

flex文字01(flex-grow-1)
flex文字02
flex文字03
  <div class="d-flex" style="height: 100px">
    <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 d-flex:ユーティリティ:flex文字の伸縮 flex-shrink 余白で縮小される(他を優先)

flex文字01(flex-shrink-1)
flex文字02
flex文字03
  <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 d-flex:ユーティリティ:特定のflex文字の表示順序を入れ替えるクラス

flex文字01
flex文字02
flex文字03
  <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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ: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 d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-between

flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-between">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ: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 d-flex:ユーティリティ:flex自動マージン デフォルト(自動マージンなし)

flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div>flex文字3</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン 右側に分離(mr-auto)ナビ的な場合に、左と右側でそれぞれ真ん中空ける形式

flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <div class="mr-auto">flex文字1</div>
    <div>flex文字2</div>
    <div>flex文字3</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン 左側に分離(ml-auto)

flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="ml-auto p-2">flex文字3</div>
  </div>
■カード:card:コンポーネント:基本的な使用例 divでcard、card-body、imgでcard-img-top、pでcard-title、card-text

...

カードのタイトル

カードの内容

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

背景色、文字色指定なし

カードのタイトル

カードの内容

背景色: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>
  
  
■カード:card:コンポーネント:カードの背景色を除去する

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

カードのタイトル

カードの内容

ヘッダー背景色の除去: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>
    <!-- 背景色の除去:bg-transparent -->
    <div class="card-footer bg-transparent">フッター背景色の除去:bg-transparent</div>
  </div>
  
  
■カード:card:コンポーネント:カードのボーダー色を変更する

カードのヘッダー

カードのタイトル

カードの内容

カードのヘッダー

カードのタイトル

カードの内容

  <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:コンポーネント:カードデッキによるレイアウトcard-deck

...

カード01

カードの内容

...

カード02

カードの内容

...

カード03

カードの内容

カードの内容

  <div class="card-deck">
    <!-- カード01 -->
    <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>
    <!-- カード02 -->
    <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>
    <!-- カード03 -->
    <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:コンポーネント:カードグループによるレイアウト card-group

...

カード01

カードの内容

...

カード02

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

...

カード03

カードの内容

カードの内容

  <div class="card-group">
    <!-- カード01 -->
    <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>
    <!-- カード02 -->
    <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>
    <!-- カード03 -->
    <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:コンポーネント:カードカラムによるレイアウト card-columns

...

カード01

ここに文章が入ります

カード02

ここに文章が入ります

ここに文章が入ります
...

カード03

ここに文章が入ります

ここに文章が入ります

カード04

ここに文章が入ります

ここに文章が入ります

カード05

ここに文章が入ります

この文章はダミーです。

...

カード07

ここに文章が入ります

この文章はダミーです。

カード08

ここに文章が入ります

ここに文章が入ります

  <div class="card-columns">
    <!-- カード01 -->
    <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">
    <!-- カラム01 -->
    <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>
    <!-- カラム02 -->
    <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:コンポーネント:カードのヘッダーとフッター card-title

カードのヘッダー

カードのタイトル

カードの内容

  <div class="card" 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>
■カード:card:コンポーネント:カードに画像を配置する card-img-top card-img-bottom

...

カードの内容

カードの内容

...
    <!-- カード上部に画像を配置: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 -->
    <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>
</div>
■カード:card:コンポーネント:カードの画像とテキストを重ね合わせる 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>
■カード:card:コンポーネント:カード内にコンテンツを複合する

Card image cap

カードのタイトル

カードの内容

  • リスト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="Card image cap">
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <!-- カード内のリストグループ:list-group-flush -->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト01</li>
      <li class="list-group-item">リスト02</li>
      <li class="list-group-item">リスト03</li>
    </ul>
    <!-- カードの本文:card-body -->
    <div class="card-body">
      <a href="#" class="card-link">カード内リンク</a>
      <a href="#" class="card-link">カード内リンク</a>
    </div>
  </div>
■カード:card:コンポーネント:カードにナビゲーションを組み込む ピル型のナビゲーション

カードのタイトル

カードの内容

ボタン
  <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>
■カード:card:コンポーネント:カードにナビゲーションを組み込む タブ型のナビゲーション

カードのタイトル

カードの内容

ボタン
  <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>
■カード:card:コンポーネント:カードのサイズを変更する Sizingユーティリティクラスw-75

カードの幅指定:w-75

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

ボタン
  <!-- Sizingユーティリティクラス:w-{%値}による幅指定 -->
  <div class="card w-75">
    <div class="card-body">
      <h4 class="card-title">カードの幅指定:w-75</h4>
      <p class="card-text">カードの幅が親要素の幅の75%になります。</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
■カード:card:コンポーネント:カード内のテキストを左寄せ、中央、右寄せ

標準(左寄せ)

カードの内容

ボタン

中央寄せ:text-center

カードの内容

ボタン

右寄せ:text-right

カードの内容

ボタン
  <!-- 標準(左寄せ) -->
  <div class="card" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">標準(左寄せ)</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- 中央寄せ:text-center -->
  <div class="card text-center" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">中央寄せ:text-center</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
  <!-- 右寄せ:text-right -->
  <div class="card text-right" style="max-width: 25rem;">
    <div class="card-body">
      <h4 class="card-title">右寄せ:text-right</h4>
      <p class="card-text">カードの内容</p>
      <a href="#" class="btn btn-primary">ボタン</a>
    </div>
  </div>
■外枠:Border:ユーティリティ:ボーダー色を設定するクラス

border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white
<span class="border border-primary">border-primary</span>
<span class="border border-secondary">border-secondary</span>
<span class="border border-success">border-success</span>
<span class="border border-danger">border-danger</span>
<span class="border border-warning">border-warning</span>
<span class="border border-info">border-info</span>
<span class="border border-light">border-light</span>
<span class="border border-dark">border-dark</span>
<span class="border border-white">border-white</span>
■外枠:Border:ユーティリティ:ボーダーを追加するクラス !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-0 border-top-0 border-right-0 border-bottom-0 border-left-0
<span class="border border-0">border-0</span><!-- 全ボーダー削除 -->
<span class="border border-top-0">border-top-0</span><!-- 上ボーダー削除 -->
<span class="border border-right-0">border-right-0</span><!-- 右ボーダー削除 -->
<span class="border border-bottom-0">border-bottom-0</span><!-- 下ボーダー削除 -->
<span class="border border-left-0">border-left-0</span><!-- 左ボーダー削除 -->
 
■色Color:bg-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>
■色Color: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>
■幅、高さ:Sizing:ユーティリティ:幅を指定するクラスw-25

w-25
w-50
w-75
w-100
  <div class="w-25 border">w-25</div>
  <div class="w-50 border">w-50</div>
  <div class="w-75 border">w-75</div>
  <div class="w-100 border">w-100</div>
■幅、高さ:Sizing:ユーティリティ:高さを指定するクラスh-25

親要素に高さを指定済(height: 200px;)

h-25
h-50
h-75
h-100
  <p class="text-center">親要素に高さを指定済(height: 200px;)</p>
    <div class="h-25 d-inline-block border">h-25</div>
    <div class="h-50 d-inline-block border">h-50</div>
    <div class="h-75 d-inline-block border">h-75</div>
    <div class="h-100 d-inline-block border">h-100</div>
  
■幅、高さ:Sizing:ユーティリティ:最大高を指定するクラス mh-100

  <img class="mh-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
■幅、高さ:Sizing:ユーティリティ:最大幅を指定するクラス mw-100

  <img class="mw-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
 
■幅、高さ:Sizing:ユーティリティ:スクリーンリーダー sr-only 非表示だけど非視覚者のみに読み上げる

  <a class="sr-only sr-only-focusable" href="#">メインコンテンツへスキップ</a>
  
■テキスト:Text:ユーティリティ:字の左寄せ/中央寄せ/右寄せを設定するクラス

text-left

text-center

text-right

  <p class="text-left">text-left</p>
  <p class="text-center">text-center</p>
  <p class="text-right">text-right</p>
■テキスト:Text:ユーティリティ:大文字と小文字を変換するクラスクラス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>
■テキスト:Text:ユーティリティ:文字の太さとイタリック体を設定するクラス

太字(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:ユーティリティ:文字を均等割付するクラス

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

  <p class="text-justify">Bootstrapで、文字を均等割付する。</p>
■テキスト:Text:ユーティリティ:等幅フォント

This is in monospace
日本語の場合

  <p class="text-monospace">This is in monospace<br>日本語の場合</p>
■テキスト:Text:ユーティリティ:通常のフォント(参考)

This is in monospace
日本語の場合

  <p>This is in monospace<br>日本語の場合</p>
■テキスト:Text:ユーティリティ:文字を大文字や小文字に変換するクラス

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:ユーティリティ:長いテキストを省略記号で表すクラス

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

  <p class="text-truncate w-25">25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。25文字以上は省略されます。</p>
■テキスト:Text:ユーティリティ: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>
■テキスト:Text:ユーティリティ:displayで文字の大きさを変える

h3(標準)

h3.display-1

h3.display-2

h3.display-3

h3.display-4

  <h3>h3(標準)</h3>
  <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>
■テキスト:Text:ユーティリティ:インラインテキスト要素 mark要素

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

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

  <p>mark要素を使って、テキストを<mark>ハイライト表示</mark>させることができます。</p>
  <p>定義済みクラス「.mark」を使用して<span class="mark">mark要素とスタイルを一致</span>させることもできます。</p>
■テキスト:Text:ユーティリティ:インラインテキスト要素 small要素とsmallクラス

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

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

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

em要素のデフォルトスタイルを使って、テキストを強調したいテキスト(Emphasis text)としてイタリック体または斜体で表示させることができます。(ブラウザによっては123やabcなど英数字のみ適用)

  <p>em要素のデフォルトスタイルを使って、テキストを<em>強調したいテキスト(Emphasis text)</em>としてイタリック体または斜体で表示させることができます。(ブラウザによっては123やabcなど英数字のみ適用)</p>
■テキスト:Text:ユーティリティ:目立たせたい段落 leadクラス

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

標準的な段落(p)

  <p class="lead">目立たせたい段落(p.lead)</p>
  <p>標準的な段落(p)</p>
■テキスト:Text:ユーティリティ:text-mutedクラス

主タイトル キャプチャー 副タイトル(small.text-muted)

  <h4>主タイトル <small class="text-muted">キャプチャー 副タイトル(small.text-muted)</small></h4>
■テキスト:Text:ユーティリティ:サンプル出力 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>
■テキスト:Text:ユーティリティ:変数の表記 var

y = mx + b
  <div>
    <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
  </div>
■テキスト:Text:ユーティリティ:引用blockquote

引用文の例を見てみましょう。

基本の引用文です。

  <p>引用文の例を見てみましょう。</p>
  <blockquote class="blockquote">
    <p class="mb-0">基本の引用文です。</p>
  </blockquote>
■テキスト:Text:ユーティリティ:引用の位置合わせ:中央寄せblockquote text-center

引用文の例を見てみましょう。

基本の引用文です。

文章の引用元が明示できます。
  <p>引用文の例を見てみましょう。</p>
  <blockquote class="blockquote text-center">
   <p class="mb-0">基本の引用文です。</p>
   <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>
■テキスト:Text:ユーティリティ:引用元の表示blockquote-footer

引用文の例を見てみましょう。

基本の引用文です。

文章の引用元が明示できます。
  <p>引用文の例を見てみましょう。</p>
  <blockquote class="blockquote">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>
■テキスト:Text:ユーティリティ:引用blockquoteの位置合わせ:右寄せ

引用文の例を見てみましょう。

基本の引用文です。

文章の引用元が明示できます。
  <p>引用文の例を見てみましょう。</p>
  <blockquote class="blockquote text-right">
    <p class="mb-0">基本の引用文です。</p>
    <footer class="blockquote-footer">文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
  </blockquote>
■テキスト:Text:ユーティリティ:略語 abbr要素

HTML

HTML

  <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:コンポーネント:アラートを閉じるボタンで、アラート表示を消す

  <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)</h4>
    <p>アラートの文字</p>
    <hr>
    <p>アラート内のリンクを見やすくする</p>
    <p class="mb-0"><a href="#" class="alert-link">リンク alert-primary</a></p>
    <p class="mb-0"><a href="#">リンク alert-primary</a></p>
  </div>
■バッジ:badge:コンポーネント:バッジ基本的な使用例 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:コンポーネント:ピル型のバッジを作成する 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>
■バッジ:badge:コンポーネント:aタグ(リンク)のバッジを作成する

  <a href="#" class="badge badge-success">badge-primary</a>
■バッジ:badge:コンポーネント:バッジによるカウンター表示 button

  <button type="button" class="btn btn-primary">
    button <span class="badge badge-light">4</span>
  </button>
■バッジ:badge:コンポーネント:スクリーンリーダー 視覚支援 非表示テキスト sr-only

  <button type="button" class="btn btn-primary">
    メッセージ <span class="badge badge-light">9</span>
    <span class="sr-only">未読メッセージ</span>
  </button>
■ディスプレー:Display:ユーティリティ:devで背景色とテキストの文字

ブロック表示のdiv
ブロック表示のdiv
  <div class="bg-primary text-white">ブロック表示のdiv</div>
  <div class="bg-dark text-white">ブロック表示のdiv</div>
■ディスプレー:Display:ユーティリティ:divをd-inlineで利用

インライン表示のdiv
インライン表示のdiv
  <div class="d-inline bg-primary text-white">インライン表示のdiv</div>
  <div class="d-inline bg-dark text-white">インライン表示のdiv</div>
■ディスプレー:Display:ユーティリティ:spanで利用

インライン表示のspan インライン表示のspan
  <span class="bg-primary text-white">インライン表示のspan</span>
  <span class="bg-dark text-white">インライン表示のspan</span>
■ディスプレー:Display:ユーティリティ:spanをd-blockで利用

ブロック表示のspan ブロック表示のspan
  <span class="d-block bg-primary text-white">ブロック表示のspan</span>
  <span class="d-block bg-dark text-white">ブロック表示のspan</span>
■ディスプレー:Display:ユーティリティ:要素の表示/非表示を設定するレスポンシブなクラス

lgより大きい画面幅で非表示
lgより大きい画面幅で表示
  <div class="d-lg-none bg-primary text-white">lgより大きい画面幅で非表示</div>
  <div class="d-none d-lg-block bg-secondary text-white">lgより大きい画面幅で表示</div>
■ディスプレー:Display:ユーティリティ:印刷時の表示/非表示を設定するクラス

スクリーンのみ表示(印刷時のみ非表示)
印刷時のみ表示(スクリーンでは非表示)
  <div class="d-print-none">スクリーンのみ表示(印刷時のみ非表示)</div>
  <div class="d-none d-print-block">印刷時のみ表示(スクリーンでは非表示)</div>
■ディスプレー:Display:ユーティリティ:Embedユーティリティ 埋め込みクラス アスペクト比 16:9

  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  </div>
  
■フロート:Float:ユーティリティ:フロートを設定するクラス

float-left
float-right
float-none
  <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(small)以上で左寄せ MD (medium)以上で左寄せ LG (large)以上で左寄せ XL (extra-large)以上で左寄せ
  <span class="float-sm-right">SM(small)以上で左寄せ</span>
  <span class="float-md-right">MD (medium)以上で左寄せ</span>
  <span class="float-lg-right">LG (large)以上で左寄せ</span>
  <span class="float-xl-right">XL (extra-large)以上で左寄せ</span>
■親要素でフロートを解除する:Clearfix:ユーティリティ:親要素で設定して、フロートを解除するためのクラス(重なっていない浮いているから背景色出る)

右フロート
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-right bg-success">右フロート</div>
  </div>
■親要素でフロートを解除する:Clearfix:ユーティリティ:フロートを解除しない(重なっているので背景色がでない)

右フロート
  <div class="w-50 mx-auto bg-danger">
    <div class="float-right bg-success">右フロート</div>
  </div>
■親要素でフロートを解除する:Clearfix:ユーティリティ:Floatクラス float-left float-right clearfixはあってもなくても同じみたい

左寄せ画像 右寄せ画像
  <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:コンポーネント:基本的な使用例 list-group

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
  <ul class="list-group">
    <li class="list-group-item">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:インラインリスト list-inline

  • インラインリスト項目
  • インラインリスト項目
  • インラインリスト項目
  <ul class="list-inline">
    <li class="list-inline-item">インラインリスト項目</li>
    <li class="list-inline-item">インラインリスト項目</li>
    <li class="list-inline-item">インラインリスト項目</li>
  </ul>
■リストグループ:list-group:コンポーネント:リストマーカーのないリスト list-unstyled

  • リストマーカーの無いリスト項目
  • リストマーカーの無いリスト項目
    • ネストされたリスト項目
    • ネストされたリスト項目
    • ネストされたリスト項目
  • リストマーカーの無いリスト項目
  • リストマーカーの無いリスト項目
  <ul class="list-unstyled">
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目
      <ul>
        <li>ネストされたリスト項目</li>
        <li>ネストされたリスト項目</li>
        <li>ネストされたリスト項目</li>
      </ul>
    </li>
    <li>リストマーカーの無いリスト項目</li>
    <li>リストマーカーの無いリスト項目</li>
  </ul>
■リストグループ:list-group:コンポーネント:バッジ付きリストグループ

  • リスト項目1 14
  • リスト項目2 2
  • リスト項目3 1
  <section class="w-50 m-auto my-5">
      <ul class="list-group">
    <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>
</section>
■リストグループ:list-group:コンポーネント:リスト項目をアクティブ状態にする

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
      <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>
</section>
■リストグループ:list-group:コンポーネント:リストグループの背景色

  • これは「primary」のリスト項目です。
  • これは「secondary」のリスト項目です。
  • これは「success」のリスト項目です。
  • これは「danger」のリスト項目です。
  • これは「warning」のリスト項目です。
  • これは「info」のリスト項目です。
  • これは「light」のリスト項目です。
  • これは「dark」のリスト項目です。
  • これは「デフォルト」のリスト項目です。
  <section class="w-50 m-auto my-5">
      <ul class="list-group">
    <li class="list-group-item list-group-item-primary">これは「primary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-secondary">これは「secondary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-success">これは「success」のリスト項目です。</li>
    <li class="list-group-item list-group-item-danger">これは「danger」のリスト項目です。</li>
    <li class="list-group-item list-group-item-warning">これは「warning」のリスト項目です。</li>
    <li class="list-group-item list-group-item-info">これは「info」のリスト項目です。</li>
    <li class="list-group-item list-group-item-light">これは「light」のリスト項目です。</li>
    <li class="list-group-item list-group-item-dark">これは「dark」のリスト項目です。</li>
    <li class="list-group-item">これは「デフォルト」のリスト項目です。</li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:定義リスト dl dt dd

用語1
用語1の説明。
用語2の長いテキストは切り捨てて省略
用語2の説明。
用語3
ネストされた用語4
ネストされた用語4の説明
  <dl class="row">
    <dt class="col-sm-3">用語1</dt>
    <dd class="col-sm-9">用語1の説明。</dd>
    <dt class="col-sm-3 text-truncate">用語2の長いテキストは切り捨てて省略</dt>
    <dd class="col-sm-9">用語2の説明。</dd>
    <dt class="col-sm-3">用語3</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">ネストされた用語4</dt>
        <dd class="col-sm-8">ネストされた用語4の説明</dd>
      </dl>
    </dd>
  </dl>
■リストグループ:list-group:コンポーネント:リスト項目を無効状態にする

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
      <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>
</section>
■リストグループ:list-group:コンポーネント:aタグ リストグループ

  <section class="w-50 m-auto">
      <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:アクティブ状態のアクション可能な背景色クラスのリストグループ

  <section class="w-50 m-auto my-5">
    <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>
</section>
■リストグループ:list-group:コンポーネント:アクション可能な背景色クラスのリストグループ

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">これは「primary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">これは「secondary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">これは「success」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">これは「danger」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">これは「warning」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">これは「info」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">これは「light」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">これは「dark」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action">これは「デフォルト」のリスト項目です。</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:リストグループ aタグ

  <section class="w-50 m-auto">
      <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:カスタムコンテンツの リストグループ aタグ

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目1のヘッダ</h5>
        <small>3日前</small>
      </div>
      <p class="mb-1">リスト項目1のコンテンツの見本です。</p>
      <small>リスト項目1のサブコンテンツです</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目2のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目2のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目2のサブコンテンツです。</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">リスト項目3のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目3のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目3のサブコンテンツです。</small>
    </a>
  </div>
  </section>
■リストグループ:list-group:コンポーネント:li 枠なしのリストグループ

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
    <div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">リスト項目1</li>
        <li class="list-group-item">リスト項目2</li>
        <li class="list-group-item">リスト項目3</li>
      </ul>
   </div>
  </section>
■リストグループ:list-group:コンポーネント:ボタンのリストグループ button

  <section class="w-50 m-auto my-5">
    <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>
  </section>
■テーブル:table::テーブルの基本スタイル: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::罫線付きテーブル: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::罫線無しテーブル: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>
■テーブル: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>
■テーブル: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>
■テーブル: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="bg-primary">
        <td>bg-primary</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-success">
        <td>bg-success</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-warning">
        <td>bg-warning</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-danger">
        <td>bg-danger</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr class="bg-info">
        <td>bg-info</td>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル: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="bg-primary">th.bg-primary</th>
    </tr>
    <tr>
      <td class="bg-success">td.bg-success</td>
      <td class="bg-warning">td.bg-warning</td>
    </tr>
    <tr>
      <td class="bg-danger">td.bg-danger </td>
      <td class="bg-info">td.bg-info</td>
    </tr>
  </table>
  
■テーブル: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>
■テーブル: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::テーブルの色の反転 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::テーブル行のマウスオーバー表示 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::縞模様のテーブル

タイトル タイトル タイトル タイトル
タイトル データ データ データ
タイトル データ データ データ
タイトル データ データ データ
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
        <th scope="col">タイトル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
      <tr>
        <th scope="row">タイトル</th>
        <td>データ</td>
        <td>データ</td>
        <td>データ</td>
      </tr>
    </tbody>
  </table>
■テーブル:table::テキストが折り返さないように設定するクラスtable

文字の途中で折り返しをしない設定 折り返しても良い
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">文字の途中で折り返しをしない設定</th>
      <td>折り返しても良い</td>
    </tr>
  </table>
  
■テーブル: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::レスポンシブテーブル:table-responsive

タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ

  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-sm未満

レスポンシブ対応テーブル(画面幅sm未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-sm mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅sm未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-md未満

レスポンシブ対応テーブル(画面幅md未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ

  <div class="table-responsive-md mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅md未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-lg未満

レスポンシブ対応テーブル(画面幅lg未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-lg mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅lg未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
■テーブル:table::レスポンシブテーブル:画面幅table-responsive-xl未満

レスポンシブ対応テーブル(画面幅xl未満)
タイトル タイトル タイトル タイトル タイトル
データ データ データ データ データ
  <div class="table-responsive-xl mb-5">
    <table class="table">
      <caption>レスポンシブ対応テーブル(画面幅xl未満)</caption>
      <thead>
        <tr>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
          <th scope="col">タイトル</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
          <td>データ</td>
        </tr>
      </tbody>
    </table>
  </div>
■ページネーション:pagination:コンポーネント:ページネーション:pagination

  <nav aria-label="ページネーションの例">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>
■ページネーション:pagination:コンポーネント:ページネーションの配置 中央寄せ(justify-content-center)

    <nav aria-label="ページネーションの例">
      <ul class="pagination justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">次</a></li>
      </ul>
    </nav>
■ページネーション:pagination:コンポーネント:ページネーションの配置 右寄せ(justify-content-end)

    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-end">
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a>        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">次</a></li>
      </ul>
    </nav>
■ページネーション:pagination:コンポーネント:ページネーションにアイコンを使用する

  <nav aria-label="ページネーションの例">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">&laquo;</span><span class="sr-only">前へ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">&raquo;</span><span class="sr-only">次へ</span></a></li>
    </ul>
  </nav>
■ページネーション:pagination:コンポーネント:リンクの無効状態やアクティブ状態を指定する

  <nav aria-label="ページネーションの例">
    <ul class="pagination">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</span></a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>
■ページネーション:pagination:コンポーネント:ページネーションのサイズ pagination-lg

  <nav aria-label="ページネーションの例">
    <ul class="pagination pagination-lg">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">次</a></li>
    </ul>
  </nav>
■ページネーション:pagination:コンポーネント:ページネーションのサイズ pagination-sm

  <nav aria-label="ページネーションの例">
    <ul class="pagination pagination-sm">
      <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">前</a></li>
    </ul>
  </nav>
■ページネーション:pagination:コンポーネント:span要素でリンクの無効状態やアクティブ状態を指定する

<nav aria-label="ページネーションの例">
  <ul class="pagination">
    <li class="page-item disabled"><span class="page-link">前</span></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><span class="page-link">2<span class="sr-only">(現ページ)</span></span></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">次</a></li>
  </ul>
</nav>
<script>
  $(function() {
    $('.disabled > a.page-link').click(function() {
      return false;
    });
  });
</script>
■ドロップダウン:dropdown-menu:コンポーネント:フォームとボタン 切り替えボタンにbutton要素を使用したドロップダウン

  <!-- ドロップダウン -->
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:メニューの位置をボタンと右寄せにする

  <!-- ボタングループ -->
  <div class="btn-group">
    <!-- 切り替えボタン -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      メニューの位置を右寄せにしたドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu dropdown-menu-right">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:切り替えボタンにaタグ要素を使用したドロップダウン

  <!-- ドロップダウン -->
  <div class="dropdown">
    <!-- 切り替えボタン -->
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </a>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:ボタングループに設定するドロップダウン

  <!-- ボタングループ -->
  <div class="btn-group">
    <!-- 切り替えボタン -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:メニュー項目に無効やアクティブの状態を設定する

  <!-- ボタングループ -->
  <div class="btn-group">
    <!-- 切り替えボタン -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" href="#">メニュー02(無効)</a>
      <a class="dropdown-item active" href="#">メニュー03(アクティブ)</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウン方向を変更する

<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>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンメニューのオーバーフローを制約する境界を設定する

  <div class="bg-info text-center" style="width:250px;height:250px;overflow:scroll;">
    <br><br><br>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-boundary="scrollParent">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
        <a href="#" class="dropdown-item">スクロールウィンドウ幅で制約されるドロップダウンメニュー</a>
      </div>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンメニューを表示させるスペースがない場合に、反対側に表示させる






  <div class="box" style="overflow: auto">
    <br><br><br><br><br>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-flip="true">ドロップダウンボタン</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
      </div>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンのオフセット値を設定する

  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" data-offset="10,20" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:メニュー項目にbutton要素を使用する

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ドロップダウン
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <button class="dropdown-item" type="button">メニュー01</button>
      <button class="dropdown-item" type="button">メニュー02</button>
      <button class="dropdown-item" type="button">メニュー03</button>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンメニューに様々な要素を追加する

  <div class="btn-group">
    <!-- 切り替えボタン -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com"> </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password"> </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">初めての方</a>
      <a class="dropdown-item" href="#">パスワードをお忘れの方</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンにリンクなしのメニュー項目を追加する

  <div class="dropdown">
    <!-- 切り替えボタン -->
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      ドロップダウン
      </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <span class="dropdown-item-text">非リンクテキスト</span>
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:js:ドロップダウンメニューのイベント

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sale!</button>
    <div class="dropdown-menu" aria-labelledby="dropdownExample">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
<script>
  $(function() {
    $(".dropdown").on("show.bs.dropdown", function(event) {
      var x = $(event.relatedTarget).text(); // ボタンのテキストを取得
      alert(x + '無くなり次第終了!');
    });
  });
</script>
■ドロップダウン:dropdown-menu:js:用意されている メソッド:dropdpown('toggle') →最初から選択肢を出しておく

  <!-- ドロップダウン -->
  <div class="dropdown">
  <!-- 切り替えボタン -->
   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウン
   </button>
   <!-- メニュー -->
   <div class="dropdown-menu" aria-labelledby="dropdownExample">
    <a class="dropdown-item" href="#">メニュー01</a>
    <a class="dropdown-item" href="#">メニュー02</a>
    <a class="dropdown-item" href="#">メニュー03</a>
   </div>
  </div>
<script>
$(function(){
  $('#dropdownExample').dropdown('toggle');
});
</script>
■ドロップダウン:dropdown-menu:js:ドロップダウンのオフセット値を設定する

  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウンボタン</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">メニュー1</a>
      <a class="dropdown-item" href="#">メニュー2</a>
      <a class="dropdown-item" href="#">メニュー3</a>
    </div>
  </div>
<script>
  $(function() {
    $('#dropdownMenuButton').dropdown({
      offset: '10, 20'
    })
  });
</script>
■ドロップダウン:dropdown-menu:js:メニュー項目に自由形式のテキストを配置する

  <div class="dropdown">
    <!-- 切り替えボタン -->
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu p-3 text-muted" style="max-width: 300px;">
      <p>ドロップダウンメニュー内のテキストその1。</p>
      <p class="mb-0">ドロップダウンメニュー内のテキストその2。</p>
    </div>
  </div>
■ドロップダウン:dropdown-menu:js:スプリットボタン(分割ボタン)のドロップダウン

  <div class="btn-group">
    <!-- ボタン本体 -->
    <button type="button" class="btn btn-secondary">
      スプリットボタン
    </button>
    <!-- 切り替え用アイコン -->
     <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">ドロップダウン切り替え</span>
    </button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
■ドロップダウン:dropdown-menu:js:自動サイズ調整のカラムを作成する col-auto

@
  <form>
    <div class="form-row align-items-center">
      <div class="col-auto">
        <label class="sr-only" for="inputName">氏名</label>
        <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
      </div>
      <div class="col-auto">
        <label class="sr-only" for="inputUsername">ユーザーネーム</label>
        <div class="input-group mb-2">
          <div class="input-group-prepend">
            <div class="input-group-text">@</div>
          </div>
          <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
        </div>
      </div>
      <div class="col-auto">
        <div class="form-check mb-2">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> チェックする </label>
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-2">送信</button>
      </div>
    </div>
  </form>
■図表キャプション:figure:図表の基本的なスタイリング

図表コンテンツ内の画像
図表キャプション
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
    <figcaption class="figure-caption">図表キャプション</figcaption>
  </figure>
■図表キャプション:figure:図表キャプション:左寄せ(デフォルト)

図表コンテンツ内の画像
図表キャプション左寄せ(デフォルト)(text-left:デフォルト)
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
    <figcaption class="figure-caption text-left">図表キャプション左寄せ(デフォルト)(text-left:デフォルト)</figcaption>
  </figure>
■図表キャプション:figure:図表キャプション:中央寄せ

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

図表コンテンツ内の画像
図表キャプション右寄せ(text-right)
  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
    <figcaption class="figure-caption text-right">図表キャプション右寄せ(text-right)</figcaption>
  </figure>
■レスポンシブ画像:img::レスポンシブ画像(img-fluid)

レスポンシブ画像
  <img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="img-fluid" alt="レスポンシブ画像">
■レスポンシブ画像:img::Spacingユーティリティークラスを使用した配置例 mx-auto d-block

中央寄せ画像
  <img src="https://via.placeholder.com/200x200" class="mx-auto d-block" alt="中央寄せ画像">
■レスポンシブ画像:img::Textユーティリティークラスを使用した配置例 text-center

中央寄せ画像
  <div class="text-center">
    <img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
  </div>
■レスポンシブ画像:img::サムネイル画像 img-thumbnail

サムネイル画像
  <img src="https://via.placeholder.com/200x200" alt="サムネイル画像" class="img-thumbnail">
■影shadow 角丸rounded:ユーティリティ:影Shadowsユーティリティ

影なし(shadow-none)
小さめの影(shadow-sm)
標準の影(shadow)
大きめの影(shadow-lg)
  <div class="shadow-none p-3 mb-5 bg-light rounded">影なし(shadow-none)</div>
  <div class="shadow-sm p-3 mb-5 bg-light rounded">小さめの影(shadow-sm)</div>
  <div class="shadow p-3 mb-5 bg-light rounded">標準の影(shadow)</div>
  <div class="shadow-lg p-3 mb-5 bg-light rounded">大きめの影(shadow-lg)</div>
■影shadow 角丸rounded:ユーティリティ:角丸を設定するクラス rounded

rounded rounded-top rounded-right rounded-bottom rounded-left rounded-circle 正円 rounded-0
<span class="rounded">rounded</span>
<span class="rounded-top">rounded-top</span>
<span class="rounded-right">rounded-right</span>
<span class="rounded-bottom">rounded-bottom</span>
<span class="rounded-left">rounded-left</span>
<span class="rounded-circle">rounded-circle</span>
<span class="rounded-circle" id="circle">正円</span><!-- 幅と高さを同じ(100px)に設定 -->
<span class="rounded-0">rounded-0</span>
 
■フォーム:form-group:コンポーネント:フォームの基本要素

キャリアメールは届かない場合があります。
  <form>
    <div class="form-group">
      <label for="email1">メールアドレス</label>
      <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
      <small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
    </div>
    <div class="form-group">
      <label for="password1">パスワード</label>
      <input type="password" class="form-control" id="password1" placeholder="パスワードを入力"> </div>
    <div class="form-group">
      <label for="select1">プルダウンメニューから選んでください</label>
      <select class="form-control" id="select1">
        <option>メニュー1</option>
        <option>メニュー2</option>
        <option>メニュー3</option>
        <option>メニュー4</option>
        <option>メニュー5</option>
      </select>
    </div>
    <!-- 複数選択のプルダウンメニュー -->
    <div class="form-group">
      <label for="select2">複数選択のプルダウンメニュー</label>
      <select multiple class="form-control" id="select2">
        <option>複数選択可A</option>
        <option>複数選択可B</option>
        <option>複数選択可C</option>
        <option>複数選択可D</option>
        <option>複数選択可E</option>
      </select>
    </div>
    <div class="form-group">
      <label for="textarea1">複数行のテキスト入力欄</label>
      <textarea class="form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="form-group">
      <label for="file1">ファイルを選択</label>
      <input type="file" class="form-control-file" id="file1"> 
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="checkbox01">
      <label class="form-check-label" for="">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>
■フォーム:form-group:コンポーネント:読み取り専用テキストの枠を非表示にする

  <form>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>
■フォーム:form-group:コンポーネント:入力コントロールのサイズを調整する -lg,-sm


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

<div class="container">
  <form>
    <div class="default-file mb-5">
      <input type="file" id="dafaultFile" lang="ja">
      <label for="dafaultFile">ファイル選択...</label>
    </div>
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFile" lang="ja">
      <label class="custom-file-label" for="customFile">ファイル選択...</label>
    </div>
  </form>
■フォーム:form-group:コンポーネント:カスタムフォームのチェックボックスに不確定(indeterminate)を指定する

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox08" checked>
      <label class="custom-control-label" for="checkbox08">選択済み</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox09" unchecked>
      <label class="custom-control-label" for="checkbox09">未選択</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input indeterminate-box" id="checkbox10">
      <label class="custom-control-label" for="checkbox10">不確定</label>
    </div>
  </form>
■フォーム:form-group:コンポーネント:カスタムフォームのチェックボックスとラジオボタンを無効にする

  <form>
    <!-- チェックボックスを無効にする -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="checkbox11" disabled>
      <label class="custom-control-label" for="checkbox11">
        チェック(無効)
      </label>
    </div>
    <!-- ラジオボタンを無効にする -->
    <div class="custom-control custom-radio">
      <input type="radio" name="radioDisabled" id="checkbox12" class="custom-control-input" disabled>
      <label class="custom-control-label" for="checkbox12">
        オプション(無効)
      </label>
    </div>
  </form>
■フォーム:form-group:コンポーネント:ヘルプテキスト(inputの下に説明文)を表示する aria-describedby

パスワードは8〜20文字で、文字と数字を含み、スペース、特殊文字、または絵文字を含むことはできません。
  <form>
    <label for="inputPassword">パスワード</label>
    <input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpBlock">
    <small id="passwordHelpBlock" class="form-text text-muted">パスワードは8〜20文字で、文字と数字を含み、スペース、特殊文字、または絵文字を含むことはできません。</small>
  </form>
■フォーム:form-group:コンポーネント:読み取り専用のテキストを表示する readonly

  <form>
    <!-- 読み取り専用のテキストを表示する -->
    <div class="form-group">
      <label for="input1">読み取り専用のテキストを表示</label>
      <input type="text" class="form-control" id="input1" placeholder="読み取り専用のテキスト" readonly> </div>
  </form>
■フォーム:form-group:コンポーネント:グリッドレイアウトを利用する 2グリット限定?

  <form>
    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="姓">
      </div>
      <div class="col">
        <input type="text" class="form-control" placeholder="名">
      </div>
    </div>
  </form>
■フォーム:form-group:コンポーネント:カスタムフォームのチェックボックスとラジオボタンを作成する

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox13">
      <label class="custom-control-label" for="checkbox13">チェックする</label>
    </div>
    <!-- カスタムフォームのラジオボタン -->
    <div class="custom-control custom-radio">
      <input type="radio" id="option1" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option1">オプション1</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="option2" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option2">オプション2</label>
    </div>
  </form>
■フォーム:form-group:コンポーネント:プルダウンメニュー 複数選択メニュー

  <form>
    <select class="custom-select" multiple>
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>
■フォーム:form-group:コンポーネント:プルダウンメニュー 表示する選択肢の数を指定したメニュー

  <form>
    <select class="custom-select" size="2">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>
■フォーム:form-group:コンポーネント:プルダウンメニュー 大サイズのプルダウンメニュー

  <form>
    <select class="custom-select custom-select-lg">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>
■フォーム:form-group:コンポーネント:プルダウンメニュー 標準サイズのプルダウンメニュー

  <form>
    <select class="custom-select">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>
■フォーム:form-group:コンポーネント:プルダウンメニュー 小サイズのプルダウンメニュー

  <form>
    <select class="custom-select custom-select-sm">
      <option selected>選択してください</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>
■フォーム:form-group:コンポーネント:コンパクトなカラム間隔のフォーム form-row form-group col-md-6

  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail">メールアドレス</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力"> </div>
      <div class="form-group col-md-6">
        <label for="inputPassword">パスワード</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力"> </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="inputState">国</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label for="inputZip">郵便番号</label>
        <input type="text" class="form-control" id="inputZip"> </div>
      <div class="form-group col-md-6">
        <label for="inputCity">都道府県</label>
        <input type="text" class="form-control" id="inputCity"> </div>
    </div>
    <div class="form-group">
      <label for="inputAddress1">住所1</label>
      <input type="text" class="form-control" id="inputAddress1" placeholder="市町村"> </div>
    <div class="form-group">
      <label for="inputAddress2">住所2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名"> </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check">
        <label class="form-check-label" for="check">チェックする</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">サインイン</button>
  </form>
■フォーム:form-group:コンポーネント:テキストエリアの前にアドオンを配置

テキストエリア用
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">テキストエリア用</span>
    </div>
    <textarea class="form-control" aria-label="テキストエリア用"></textarea>
  </div>
■フォーム:form-group:コンポーネント:入力コントロールの前後にアドオンを配置

$
.00
      <div class="input-group">
        <div class="input-group-prepend"> <span class="input-group-text">$</span> </div>
        <input type="text" class="form-control" aria-label="金額">
        <div class="input-group-append"> <span class="input-group-text">.00</span> </div>
      </div>
■フォーム:form-group:コンポーネント:一連の入力グループをまとめて無効にする

  <form>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput">無効な入力欄</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div>
      <div class="form-group">
        <label for="disabledSelect">無効なプルダウンメニュー</label>
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
        <label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
      </div>
      <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
    </fieldset>
  </form>
■フォーム:form-group:コンポーネント:水平配置のフォームを作成する

ラジオボタン
チェックボックス
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
            <label class="form-check-label" for="radios1">
              オプション1
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
            <label class="form-check-label" for="radios2">
              オプション2
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
            <label class="form-check-label" for="radios3">
              オプション3(無効)
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">チェックボックス</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="check1">
          <label class="form-check-label" for="check1">
            チェックする
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">サインイン</button>
      </div>
    </div>
  </form>
■フォーム:form-group:コンポーネント:インラインのフォームを作成する

@
  <form class="form-inline">
    <label class="sr-only" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="sr-only" for="username">ユーザーネーム</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">
        チェックする
      </label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>
■フォーム:form-group:コンポーネント:ラベルサイズを調整する

  <form>
    <div class="form-group row">
      <!-- 小サイズのラベル -->
      <label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ:col-form-label-sm</label>
      <div class="col-sm-9">
        <input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm"> </div>
    </div>
    <div class="form-group row">
      <!-- 標準サイズのラベル -->
      <label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
      <div class="col-sm-9">
        <input type="email" class="form-control" id="labelDefault" placeholder="Default size"> </div>
    </div>
    <div class="form-group row">
      <!-- 大サイズのラベル -->
      <label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ:col-form-label-lg</label>
      <div class="col-sm-9">
        <input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg"> </div>
    </div>
  </form>
■フォーム:form-group:コンポーネント:サーバー側で入力検証を行う場合のフィードバック例

市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer01">姓</label>
        <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value=