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
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
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
bootstrap4.css
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
bootstrap4.css
sup {
  top: -.5em;
}
bootstrap4.css
a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}
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
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
label {
  display: inline-block;
  margin-bottom: 0.5rem;
}
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,
input {
  overflow: visible;
}
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
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
.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
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
.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
bootstrap4.css
.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}
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-caption {
  font-size: 90%;
  color: #6c757d;
}
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 > .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
@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 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-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
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-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
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::-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
.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
.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-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 ~ .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 ~ .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 ~ .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 ~ .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.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: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: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: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: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: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: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: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.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.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.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.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.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.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.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: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
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
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 > .custom-file .custom-file-input:focus {
  z-index: 4;
}
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-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-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[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}
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::-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::-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-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-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-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-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}
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.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.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
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-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-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-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
.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 > .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-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}
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-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
@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: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
.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
.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
.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-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 hr {
  border-top-color: #c8cbcf;
}
bootstrap4.css
.alert-success hr {
  border-top-color: #b1dfbb;
}
bootstrap4.css
.alert-info hr {
  border-top-color: #abdde5;
}
bootstrap4.css
.alert-warning hr {
  border-top-color: #ffe8a1;
}
bootstrap4.css
.alert-danger hr {
  border-top-color: #f1b0b7;
}
bootstrap4.css
.alert-light hr {
  border-top-color: #ececf6;
}
bootstrap4.css
.alert-dark hr {
  border-top-color: #b9bbbe;
}
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
.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:first-child .list-group-item:first-child {
  border-top: 0;
}
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: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.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-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}
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-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-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-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-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-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
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}
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
.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}
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
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
bootstrap4.css
.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
bootstrap4.css
@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
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:グリッドレイアウトのネスト 入れ子

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

第一階層: 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:行の分割をブレイクポイントで切り替える

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>
■レイアウト: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" 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自動マージン 左側に分離(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:ユーティリティ:高さを指定するクラス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="">
 
■テキスト: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:ユーティリティ:インラインテキスト要素 strong要素、b要素

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

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

  <p>strong要素を使って、テキストを<strong>重要なテキスト</strong>として太字で表示させることができます。</p>
  <p>b要素を使ってテキストを<b>強調表示するテキスト</b>として太字で表示させることができます。</p>
■テキスト:Text:ユーティリティ:インラインテキスト要素 del要素

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

  <p>del要素のデフォルトスタイルを使って、テキストを<del>削除されたテキスト</del>として取り消し線を表示させることができます。</p>
■テキスト:Text:ユーティリティ:インラインテキスト要素 em要素

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

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

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

  <p>u要素のデフォルトスタイルを使って、テキストを<u>ラベル付けされたテキスト</u>として下線を表示させることができます。</p>
■テキスト:Text:ユーティリティ:目立たせたい段落 leadクラス

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

標準的な段落(p)

  <p class="lead">目立たせたい段落(p.lead)</p>
  <p>標準的な段落(p)</p>
■テキスト:Text:ユーティリティ:インラインテキスト要素 s要素

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

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

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

  <p>ins要素のデフォルトスタイルを使って、テキストを<ins>後から挿入されたテキスト</ins>として下線を表示することができます。</p>
■テキスト:Text:ユーティリティ:コード:code(複数行のコード)の表記


    <p>サンプルテキスト</p>
    <p>2行目のサンプルテキスト</p>
  
  <pre><code>
    <p>サンプルテキスト</p>
    <p>2行目のサンプルテキスト</p>
  </code></pre>
■テキスト: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:ユーティリティ:引用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:ユーティリティ: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:コンポーネント:バッジ付きリストグループ

  • リスト項目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:コンポーネント:リスト項目を無効状態にする

  • リスト項目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">«</span><span class="sr-only">前へ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">»</span><span class="sr-only">次へ</span></a></li>
    </ul>
  </nav>
■ページネーション: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="山田" required> </div>
      <div class="col-md-6 mb-3">
        <label for="validationServer02">名</label>
        <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="太郎" required> </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validationServer03">市町村</label>
        <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">市町村名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer04">都道府県</label>
        <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">都道府県名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer05">郵便番号</label>
        <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">郵便番号を入力してください</div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
■フォーム:form-group:コンポーネント:入力グループ カスタムフォームの組み込み

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">オプション</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
          <option selected>選択してください</option>
          <option value="1">オプション1</option>
          <option value="2">オプション2</option>
          <option value="3">オプション3</option>
        </select>
      </div>
■フォーム:form-group:コンポーネント:入力グループ アドオンをチェックボックスやラジオボタンにする

      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="checkbox" aria-label="次のテキスト入力用のチェックボックス">
          </div>
        </div>
        <input type="text" class="form-control" aria-label="チェックボックス付テキスト入力欄">
      </div>
      <!-- ラジオボタン付きテキスト入力欄 -->
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
          </div>
        </div>
        <input type="text" class="form-control" aria-label="ラジオボタン付テキスト入力欄">
      </div>
■フォーム:form-group:コンポーネント:入力グループ ボタン付きアドオン

      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
        <div class="input-group-append">
          <button class="btn btn-secondary" type="button">検索</button>
        </div>
      </div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button class="btn btn-secondary" type="button">好き</button>
        </div>
        <input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <button class="btn btn-secondary" type="button">嫌い</button>
        </div>
      </div>
■フォーム:form-group:コンポーネント:入力グループ ドロップダウン付きアドオン

      <div class="input-group">
        <input type="text" class="form-control" aria-label="ドロップダウン付テキスト入力欄">
        <div class="input-group-append">
          <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">アクション</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">リンク1</a>
            <a class="dropdown-item" href="#">リンク2</a>
            <a class="dropdown-item" href="#">リンク3</a>
          </div>
        </div>
      </div>
■フォーム:form-group:コンポーネント:入力グループ 複数の入力コントロール

姓名
      <div class="input-group">
        <div class="input-group-prepend"> <span class="input-group-text" id="...">姓名</span> </div>
        <input type="text" class="form-control" placeholder="姓">
        <input type="text" class="form-control" placeholder="名"> 
      </div>
■フォーム:form-group:コンポーネント:入力グループ 複数のアドオンを組み合わせる

$ 0.00
$ 0.00
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <input type="radio" aria-label="次のテキスト入力用のラジオボタン"> </div> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span> </div>
        <input type="text" class="form-control" aria-label="金額"> </div>
      <div class="input-group">
        <input type="text" class="form-control" aria-label="金額">
        <div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
          <div class="input-group-text">
            <input type="checkbox" aria-label="前のテキスト入力用のチェックボックス"> 
          </div>
        </div>
      </div>
■フォーム:form-group:コンポーネント:入力グループ スプリットボタン付きアドオン

      <div class="input-group">
        <input type="text" class="form-control" aria-label="スプリットボタン付テキスト入力欄">
        <div class="input-group-append">
          <button type="button" class="btn btn-secondary">アクション</button>
          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">ドロップダウン切替</span>
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">リンク1</a>
            <a class="dropdown-item" href="#">リンク2</a>
            <a class="dropdown-item" href="#">リンク3</a>
          </div>
        </div>
      </div>
 
■フォーム:form-group:コンポーネント:入力グループのサイズ調整 大、(中/標準)、小 input-group

Small
Default
Large
      <div class="input-group input-group-sm mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
        </div>
        <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm"> 
      </div>
      
        <!-- 標準サイズの入力グループ -->
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> 
      </div>
      <!-- 大サイズの入力グループ -->
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
        </div>
        <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm"> 
      </div>
 
■フォーム:form-group:コンポーネント:Bootstrap フォームバリデーション(入力検証機能) needs-validation

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

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

  <form>
    <div class="form-group mb-5">
      <label for="formControlRange">レンジ入力の例</label>
      <input type="range" class="form-control-range" id="defaultRange"> </div>
    <div class="form-group mb-5">
      <label for="customRange1">カスタムレンジ入力の例</label>
      <input type="range" class="custom-range" id="customRange1"> </div>
    <div class="form-group mb-5">
      <label for="customRange2">カスタムレンジ入力の例(min="0",max="5")</label>
      <input type="range" class="custom-range" min="0" max="5" id="customRange2"> </div>
    <div class="form-group mb-5">
      <label for="customRange3">カスタムレンジ入力の例(step="0.5")</label>
      <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"> </div>
  </form>
■フォーム:form-group:コンポーネント:レンジ入力

  <form>
    <div class="form-group">
      <label for="formControlRange">レンジ入力の例</label>
      <input type="range" class="form-control-range" id="formControlRange">
    </div>
  </form>
■ボタン:button:コンポーネント:通常ボタンとのボタンコンポーネントとの比較

  <button>通常のボタン</button>
  <button class="btn btn-primary">ボタンコンポーネント</button>
■ボタン:button:コンポーネント:ボタンの色

  <button type="button" class="btn btn-primary">btn-primary</button>
  <button type="button" class="btn btn-secondary">btn-secondary</button>
  <button type="button" class="btn btn-success">btn-success</button>
  <button type="button" class="btn btn-danger">btn-danger</button>
  <button type="button" class="btn btn-warning">btn-warning</button>
  <button type="button" class="btn btn-info">btn-info</button>
  <button type="button" class="btn btn-light">btn-light</button>
  <button type="button" class="btn btn-dark">btn-dark</button>
  <button type="button" class="btn btn-link">btn-link</button>
■ボタン:button:コンポーネント:アウトラインボタンを作成する

  <button class="btn btn-outline-primary">outline-primary</button>
  <button class="btn btn-outline-secondary">outline-secondary</button>
  <button class="btn btn-outline-success">outline-success</button>
  <button class="btn btn-outline-danger">outline-danger</button>
  <button class="btn btn-outline-warning">outline-warning</button>
  <button class="btn btn-outline-info">outline-info</button>
  <button class="btn btn-outline-light">outline-light</button>
  <button class="btn btn-outline-dark">outline-dark</button>
■ボタン:button:コンポーネント:ボタンサイズを変更する btn-lg btn-sm

  <button class="btn btn-primary btn-lg">大サイズ</button>
  <button class="btn btn-primary">通常サイズ</button>
  <button class="btn btn-primary btn-sm">小サイズ</button>
■ボタン:button:コンポーネント:アクティブ状態のボタンを作成する active

  <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">アクティブボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>
■ボタン:button:コンポーネント:ブロックのボタンを作成する btn-block

  <button class="btn btn-primary btn-lg btn-block">ブロックレベルボタン</button>
■ボタン:button:コンポーネント:a要素やinput要素でボタンを作成する

  <a class="btn btn-primary" href="#" role="button">a要素ボタン</a>
  <input class="btn btn-primary" type="button" value="inputボタン">
  <input class="btn btn-primary" type="submit" value="submitボタン">
  <input class="btn btn-primary" type="reset" value="resetボタン">
  
■ボタン:button:コンポーネント:ラジオボタンをボタンに変更する

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" checked autocomplete="off">ラジオ1
  </label>
  <label class="btn btn-secondary">
    <input type="radio" autocomplete="off">ラジオ2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" autocomplete="off">ラジオ3
  </label>
</div>
■ボタン:button:コンポーネント:チェックボックスをボタン変更する data-toggle=buttons

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked autocomplete="off">チェック1
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック2
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック3
    </label>
  </div>
■ボタン:button:コンポーネント:無効状態のボタンを作成する a要素で role=button

  <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">無効ボタン</a>
  <a href="#" class="btn btn-primary btn-lg" role="button">通常ボタン</a>
■ボタン:button:コンポーネント:無効状態のボタンを作成する disabled

  <button class="btn btn-lg btn-primary" disabled>無効ボタン</button>
  <button class="btn btn-lg btn-primary">通常ボタン</button>
■ボタン:button:コンポーネント:ボタングループ 基本的な使用例 btn-group

  <div class="btn-group" role="group" aria-label="基本的な使用例">
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>
■ボタン:button:コンポーネント:ボタンツールバー:ボタングループ

  <div class="btn-toolbar" role="toolbar" aria-label="ボタンツールバー">
    <div class="btn-group mr-2" role="group" aria-label="ボタングループ1">
      <button type="button" class="btn btn-secondary">1</button>
      <button type="button" class="btn btn-secondary">2</button>
      <button type="button" class="btn btn-secondary">3</button>
      <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="btn-group mr-2" role="group" aria-label="ボタングループ2">
      <button type="button" class="btn btn-secondary">A</button>
      <button type="button" class="btn btn-secondary">B</button>
      <button type="button" class="btn btn-secondary">C</button>
    </div>
    <div class="btn-group" role="group" aria-label="ボタングループ3">
      <button type="button" class="btn btn-secondary">D</button>
    </div>
  </div>
■ボタン:button:コンポーネント:ボタングループ:ボタンのサイズ変更 btn-group-lg



  <div class="btn-group btn-group-lg" role="group" aria-label="グループ1">
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>
  <hr>
  <div class="btn-group" role="group" aria-label="グループ2">
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>
  <hr>
  <div class="btn-group btn-group-sm" role="group" aria-label="グループ3">
    <button type="button" class="btn btn-secondary">左ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <button type="button" class="btn btn-secondary">右ボタン</button>
  </div>
■ボタン:button:コンポーネント:ドロップダウンメニュー data-toggle=dropdown

  <div class="btn-group" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">1</button>
    <div class="btn-group" role="group">
      <button id="dropmenu1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="dropmenu1">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
  </div>
■ボタン:button:コンポーネント:垂直方向ボタングループ btn-group-vertical

  <div class="btn-group-vertical" role="group" aria-label="ドロップダウンを含むボタングループ">
    <button type="button" class="btn btn-secondary">上ボタン</button>
    <button type="button" class="btn btn-secondary">中ボタン</button>
    <div class="btn-group" role="group">
       <button id="drop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        ドロップダウン
      </button>
      <div class="dropdown-menu" aria-labelledby="drop2">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
      </div>
    </div>
    <button type="button" class="btn btn-secondary">下ボタン</button>
  </div>
■ボタン:button:コンポーネント:切り替えボタンを作成する

  <button type="button" class="btn btn-primary active" data-toggle="button" aria-pressed="true" autocomplete="off">プッシュ状態</button>
  <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">未プッシュ状態</button>
■ボタン:button:コンポーネント:JavaScriptでボタンの動作 id指定 toggle-btn:js

  <button type="button" class="btn btn-primary" aria-pressed="true" autocomplete="off" id="toggle-btn">押してね</button>
<script>
  $("#toggle-btn").on('click', function() {
    $(this).button('toggle').text('押したね');
  });
</script>
■メディアオブジェクト:media:メディアオブジェクトmedia-bodyは画像と説明を配置すること

タイトル
ここに文章が入ります
  <div class="media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入ります
    </div>
  </div>
  
■メディアオブジェクト:media:メディアオブジェクトの上部に画像を配置

タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
  <div class="media">
    <img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
    </div>
  </div>
■メディアオブジェクト:media:メディアオブジェクト:並べ替え order

タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
  <div class="media">
    <img class="order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body order-1">
      <h5>タイトル</h5>
      HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
    </div>
  </div>
■メディアオブジェクト:media:ulリストにメディアオブジェクト

  • タイトル
    ここに文章が入ります
  • タイトル
    ここに文章が入ります
  • タイトル
    ここに文章が入ります
    <ul class="list-unstyled">
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章が入ります
      </div>
    </li>
  </ul>
■メディアオブジェクト:media:メディアオブジェクトの入れ子media-bodyの中にさらにmedia

タイトル
ここに文章が入りますここに文章が入ります
子のタイトル
ここに文章が入りますここに文章が入ります
  <div class="media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入ります
      <div class="media mt-3">
        <a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
        <div class="media-body">
          <h5>子のタイトル</h5>
          ここに文章が入りますここに文章が入ります
        </div>
      </div>
    </div>
  </div>
■ナビゲーション:nav:JavaScript:タブとコンテンツ(データ属性API)

ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
  <!-- タブ部分 -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <div class="tab-content mt-3" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
  </div>
■ナビゲーション:nav:JavaScript:タブ型ナビゲーション(JavaScript経由)

ホームのコンテンツが入ります。
プロフィールのコンテンツが入ります。
コンタクトのコンテンツが入ります。
  <ul class="nav nav-tabs" id="myTab_js" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" href="#home_js" role="tab" aria-controls="home" aria-selected="true">ホーム</a></li>
    <li class="nav-item"><a class="nav-link" id="profile-tab" href="#profile_js" role="tab" aria-controls="profile" aria-selected="false">プロフィール</a></li>
    <li class="nav-item"><a class="nav-link" id="contact-tab" href="#contact_js" role="tab" aria-controls="contact" aria-selected="false">コンタクト</a></li>
  </ul>
  <!-- パネル部分 -->
  <div class="tab-content mt-3" id="myTabContent">
    <div class="tab-pane fade show active" id="home_js" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツが入ります。</div>
    <div class="tab-pane fade" id="profile_js" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツが入ります。</div>
    <div class="tab-pane fade" id="contact_js" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツが入ります。</div>
  </div>
<script>
  $('#myTab_js a').on('click', function(e) {
    e.preventDefault()
    $(this).tab('show')
  })
</script>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバー 初期設定

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav1">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
      </ul>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバーを水平中央に配置

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">ブランド</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
      </ul>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:サブコンポーネントを水平中央に配置

コンテンツ

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">ブランド</a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22" aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav22">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
          <li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container bg-light">
  <h4>コンテンツ</h4>
  <p>コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。</p>
</div>
■ナビゲーションバー:navbar:コンポーネント:レスポンシブ対応の設定

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

  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">折り畳みコンテンツ</h4>
      <span class="text-muted">ナビゲーションバーブランド経由で切り替え可</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="ナビゲーション切替">
     <span class="navbar-toggler-icon"></span>
  </button>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビバーの中にフォーム検索

  <nav class="navbar navbar-dark bg-dark">
   <a class="navbar-brand" href="#">ブランド</a>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="検索キーワード" aria-label="検索キーワード">
      <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
    </form>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビバーの中に入力グループ

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
      </div>
    </form>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーション:div要素を使用したナビゲーション

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">リンク1<span class="sr-only">(現位置)</span></a>
        <a class="nav-item nav-link" href="#">リンク2</a>
        <a class="nav-item nav-link" href="#">リンク3</a>
        <a class="nav-item nav-link disabled" href="#">無効</a>
      </div>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーション:ドロップダウン

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           ドロップダウン切替
         </a>
         <div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
           <a class="dropdown-item" href="#">ドロップダウンリンク1</a>
           <a class="dropdown-item" href="#">ドロップダウンリンク2</a>
           <a class="dropdown-item" href="#">ドロップダウンリンク3</a>
         </div>
        </li>
        <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item active"><a class="nav-link" href="#">リンク2<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーション:ul要素を使用したナビゲーション

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
        <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
      </ul>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:テキスト

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">ブランド</a>
     <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
      </ul>
      <span class="navbar-text ml-auto">ナビゲーションバー内テキスト</span>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav要素を使用したナビゲーション

    <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">アクティブ</a>
    <a class="nav-item nav-link" href="#">リンク</a>
    <a class="nav-item nav-link disabled" href="#">無効</a>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav-fillクラスが無い時

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav-fillクラスを追加した時

    <ul class="nav nav-pills nav-fill">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>
■ナビゲーションバー:navbar:コンポーネント:flexユーティリティを利用したレスポンシブなナビゲーション

  <nav class="nav nav-pills flex-column flex-sm-row">
    <a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
    <a class="flex-sm-fill text-sm-center nav-link" href="#">リンク</a>
    <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">無効</a>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ピル型ナビゲーション

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>
■ナビゲーションバー:navbar:コンポーネント:ドロップダウンを組み込んだピル型ナビゲーション

  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>
■ナビゲーションバー:navbar:コンポーネント:ドロップダウンを組み込んだタブ型ナビゲーション

  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">リンク1</a>
        <a class="dropdown-item" href="#">リンク2</a>
        <a class="dropdown-item" href="#">リンク3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
  </ul>
  
■ナビゲーションバー:navbar:コンポーネント:ナビバーの基本例 navbar

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#target_div" aria-controls="target_div" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="target_div">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item active"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item active"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバー レスポンシブにブランドを左寄せ、切替ボタンを右寄せに表示

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav01" aria-controls="navbarNav01" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav01">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバー レスポンシブにブランドを右寄せ、切替ボタンを左寄せに表示

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02" aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">ブランド</a>
    <div class="collapse navbar-collapse" id="navbarNav02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ブランドの表示・非表示 初期設定のナビゲーションバー

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

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

  <nav class="navbar navbar-dark bg-dark">
    <span class="navbar-brand">ブランド</span>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:a要素内に画像を使用したブランド

  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
      <img src="img/bootstrap-solid.svg" width="30" height="30" alt="">
    </a>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:a要素内に画像とテキストを使用したブランド

  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
      <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
    </a>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:ボタン:navbar

  <nav class="navbar navbar-dark bg-dark">
    <form class="form-inline">
      <button class="btn btn-light mr-3" type="button">通常のボタン</button>
      <button class="btn btn-sm btn-light" type="button">小サイズのボタン</button>
    </form>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:navbar-darkで文字色を明るくし、bg-darkで暗い背景色を設定

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:navbar-darkで文字色を明るくし、bg-primaryで青い背景色を設定

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <a class="navbar-brand" href="#">ブランド</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent2">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
■ナビゲーションバー:navbar:コンポーネント:navbar-lightで文字色を暗くし、背景色をCSSで設定

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
     <a class="navbar-brand" href="#">ブランド</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3" aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent3">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
      </form>
    </div>
  </nav>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーション:nav-justifiedクラスを追加した時

    <nav class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーション:nav-fillクラスを追加した時

    <nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">リンク1</a>
    <a class="nav-item nav-link" href="#">リンク2</a>
    <a class="nav-item nav-link active" href="#">長いテキストリンク</a>
    <a class="nav-item nav-link" href="#">リンク3</a>
  </nav>
■ナビゲーション水平方向、均等:nav:コンポーネント:コンポーネント:パンくずリスト TODO独自CSS直す必要あり

  <nav aria-label="breadcrumb" role="navigation">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">ホーム</a></li>
      <li class="breadcrumb-item"><a href="#">ライブラリー</a></li>
      <li class="breadcrumb-item active" aria-current="page">データ</li>
    </ol>
  </nav>
■プログレスバー:progress::基本的な使用例

 <div class="progress mb-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 20%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 80%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーの背景 bg-success

  <div class="progress mb-3">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーの背景 bg-info

  <div class="progress mb-3">
    <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーの背景 bg-warning

  <div class="progress mb-3">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーの背景 bg-danger

  <div class="progress mb-3">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーのストライプをアニメーションさせる

  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>
  
■プログレスバー:progress::プログレスバーの太さ(高さ) 1pxの太さのプログレスバー

  <div class="progress mb-5" style="height: 1px;">
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーの太さ(高さ)20pxの太さのプログレスバー

  <div class="progress" style="height: 20px;">
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
■プログレスバー:progress::プログレスバーにテキストラベルを追加する

25%
  <div class="progress">
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>
■プログレスバー:progress::複数のプログレスバーを積み重ねる

  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  
■プログレスバー:progress::プログレスバーをストライプにする

  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  
  
■アコーディオン:accordion:JavaScript:アコーディオンを作成する

カード01のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
カード02のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
カード03のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
    <div class="accordion" id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          カード01の切替ボタン
        </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            カード01のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          カード02の切替ボタン
        </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            カード02のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          カード03の切替ボタン
        </button>
          </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
          <div class="card-body">
            カード03のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
          </div>
        </div>
      </div>
    </div>
  
■アコーディオン:accordion:JavaScript:折り畳みのJavaScript使用

表示する

表示と非表示が切り替わるコンテンツ
    <p><a class="btn btn-primary toggle-btn" data-toggle="collapse" href="#sample2" role="button">表示する</a></p>
    <div class="collapse" id="sample2">
      表示と非表示が切り替わるコンテンツ
    </div>
  
  <script>
  $(function(){
    $('#sample2').on('hide.bs.collapse', function(){
      $('.toggle-btn').html('表示する');
    });
    $('#sample2').on('show.bs.collapse', function(){
      $('.toggle-btn').html('非表示にする');
    });
  });
  </script>
■アコーディオン:accordion:JavaScript:data-parentを指定

コンテンツ1

コンテンツ2

コンテンツ3
  <div id="sample3">
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button" aria-expanded="false" aria-controls="collapseContent01">ボタン1</a>
      </p>
      <div class="collapse" id="collapseContent01" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ1
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent02" role="button" aria-expanded="false" aria-controls="collapseContent02">ボタン2</a>
      </p>
      <div class="collapse" id="collapseContent02" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ2
        </div>
      </div>
    </div>
    <div class="container">
      <p>
        <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent03" role="button" aria-expanded="false" aria-controls="collapseContent03">ボタン3</a>
      </p>
      <div class="collapse" id="collapseContent03" data-parent="#sample3">
        <div class="card card-body">
          コンテンツ3
        </div>
      </div>
    </div>
  </div>
   
■アコーディオン:accordion:JavaScript:表示と非表示が切り替わるコンテンツ toggle-btn

a要素によるボタン

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

a要素によるボタン

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

ID「content-01」、クラス「contents」
ID「content-02」、クラス「contents」
    <p>
      <!-- ID「content-01」の切替ボタン -->
      <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-01" aria-expanded="false" aria-controls="content-01">ID「content-01」を表示切り替え</button>
      <!-- ID「content-02」の切替ボタン -->
      <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#content-02" aria-expanded="false" aria-controls="content-02">ID「content-02」を表示切り替え</button>
      <!-- クラス「contents」の切替ボタン -->
      <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target=".contents" aria-expanded="false" aria-controls="contents-01 contents-02">クラス「contents」を同時に表示切り替え</button>
    </p>
    <div class="row">
      <div class="col">
        <!-- ID「content-01」、クラス「contents」 -->
        <div class="collapse contents" id="content-01">
          <div class="card card-body">
            ID「content-01」、クラス「contents」
          </div>
        </div>
      </div>
      <div class="col">
        <!-- ID「content-02」、クラス「contents」 -->
        <div class="collapse contents" id="content-02">
          <div class="card card-body">
            ID「content-02」、クラス「contents」
          </div>
        </div>
      </div>
    </div>
 
  
■折り畳み:collapse:JavaScript:アコーディオン折り畳みcollapse

a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ

button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
    <div class="row">
      <div class="col-sm-6 mb-4">
        <!-- a要素とhref属性による切替ボタン -->
        <p>
          <a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button" aria-expanded="false" aria-controls="collapseContent01">a要素とhref属性によるボタン</a>
          <a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
            a要素とhref属性<br>
            によるボタン<br>
            罫線なし、色なしでやれば、それっぽく見えるはず
          </a>
        </p>
        <!-- 切り替えるターゲットとなるコンテンツ -->
        <div class="collapse" id="collapseContent01">
          <div class="card card-body">
            a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
          </div>
        </div>
      </div>
      <div class="col-sm-6 mb-4">
        <!-- button要素とdata-target属性による切替ボタン -->
        <p>
          <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapseContent02" aria-expanded="false" aria-controls="collapseContent02"> button要素とdata-target属性によるボタン</button>
        </p>
        <!-- 切り替える対象となるコンテンツ -->
        <div class="collapse" id="collapseContent02">
          <div class="card card-body">
            button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
          </div>
        </div>
      </div>
    </div>
   
    
■カルーセル回転木馬:carousel:JavaScript:カルーセル基本的な使用例

<div class="container">
  <div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <!-- First slide -->
      <div class="carousel-item active">
        <img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
      </div>
      <!-- Second slide -->
      <div class="carousel-item">
        <img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
      </div>
      <!-- Third slide -->
      <div class="carousel-item">
        <img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
      </div>
    </div>
  </div>
</div>
■カルーセル回転木馬:carousel:JavaScript:タイトル、キャプション付きカルーセル

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

   <section>
    <div class="container">
    <div id="carouselControls" class="carousel slide" data-ride="carousel">
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active">
          <img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
        </div>
        <!-- Second slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
        </div>
        <!-- Third slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
        </div>
      </div>
      <!-- コントローラー部分 -->
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
       </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
       </a>
    </div>
  </div>
</section>
■カルーセル回転木馬:carousel:JavaScript:インジケーターによるフェード遷移(好きな場所にクリックでいける)

  <div class="container">
    <div id="carouselSample2" class="carousel slide carousel-fade" data-ride="carousel">
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselSample2" data-slide-to="0" class="active"></li>
        <li data-target="#carouselSample2" data-slide-to="1"></li>
        <li data-target="#carouselSample2" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active">
          <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <!-- キャプション -->
          <div class="carousel-caption d-none d-md-block">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション文</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <!-- キャプション -->
          <div class="carousel-caption d-none d-md-block">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション文</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <!-- キャプション -->
          <div class="carousel-caption d-none d-md-block">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション文</p>
          </div>
        </div>
      </div>
      <!-- コントローラー部分 -->
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselSample2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselSample2" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">次に送る</span>
      </a>
    </div>
  </div>
    
■カルーセル回転木馬:carousel:JavaScript:イベント:slid.bs.carousel

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

  <div class="container">
    <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
      <!-- インジケーター部分 -->
      <ol class="carousel-indicators">
        <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselIndicators" data-slide-to="1"></li>
        <li data-target="#carouselIndicators" data-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active">
          <img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        </div>
        <!-- Second slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        </div>
        <!-- Third slide -->
        <div class="carousel-item">
          <img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        </div>
      </div>
      <!-- コントローラー部分 -->
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">前に戻る</span>
       </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">次に送る</span>
       </a>
    </div>
  </div>
   
■カルーセル回転木馬:carousel:JavaScript:カルーセルをJavaScript経由で呼び出す

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

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

<div class="container">
  <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1000"> 
    <!-- インジケーター部分 -->
    <ol class="carousel-indicators">
      <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExample" data-slide-to="1"></li>
      <li data-target="#carouselExample" data-slide-to="2"></li>
    </ol>
    <!-- カルーセル部分 -->
    <div class="carousel-inner"> 
      <!-- First slide -->
      <div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide"> 
        <!-- キャプション -->
        <div class="carousel-caption">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション文</p>
        </div>
      </div>
      <!-- Second slide -->
      <div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide"> 
        <!-- キャプション -->
        <div class="carousel-caption">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション文</p>
        </div>
      </div>
      <!-- Third slide -->
      <div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide"> 
        <!-- キャプション -->
        <div class="carousel-caption">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション文</p>
        </div>
      </div>
    </div>
    <!-- コントローラー部分 --> 
    <!-- 前に戻るアイコン --> 
    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">前に戻る</span>
    </a> 
    <!-- 次に送るアイコン --> 
    <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">次に送る</span>
    </a>
  </div>
</div>
 
 
■モーダル:modal:モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        モーダルの本文が入ります。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>
■モーダル:modal:モーダルのアニメーション設定 fade

  <div class="container">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">