bootstrap4.css
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}
bootstrap4.css
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
bootstrap4.css
.form-group {
  margin-bottom: 1rem;
}
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-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-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 .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
.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
.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-header + .list-group .list-group-item:first-child {
  border-top: 0;
}
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
.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
@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
■カード: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 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>
■リストグループ: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>
■ドロップダウン: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:コンポーネント:ボタングループに設定するドロップダウン

  <!-- ボタングループ -->
  <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="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: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>
■フォーム: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:コンポーネント:読み取り専用のテキストを表示する readonly

  <form>
    <!-- 読み取り専用のテキストを表示する -->
    <div class="form-group">
      <label for="input1">読み取り専用のテキストを表示</label>
      <input type="text" class="form-control" id="input1" placeholder="読み取り専用のテキスト" readonly> </div>
  </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:コンポーネント:入力グループ カスタムフォームの組み込み

      <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:コンポーネント:カスタムレンジ入力

  <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:コンポーネント:ラジオボタンをボタンに変更する

<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:コンポーネント:ボタングループ 基本的な使用例 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>
■ナビゲーションバー: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>