Bootstrap5サンプル検索

bootstrap5.css

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

bootstrap5.css

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

bootstrap5.css

.form-group {
  margin-bottom: 1rem;
}

bootstrap5.css

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group,
  .form-inline .custom-select {
    width: auto;
  }
  .form-inline .form-check {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
  .form-inline .custom-control {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

bootstrap5.css

.btn-lg,
.btn-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

bootstrap5.css

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

bootstrap5.css

.btn-group,
.btn-group-vertical {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

bootstrap5.css

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

bootstrap5.css

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
  z-index: 1;
}

bootstrap5.css

.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

bootstrap5.css

.btn-toolbar .input-group {
  width: auto;
}

bootstrap5.css

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}

bootstrap5.css

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

bootstrap5.css

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

bootstrap5.css

.btn-sm + .dropdown-toggle-split,
.btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

bootstrap5.css

.btn-lg + .dropdown-toggle-split,
.btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

bootstrap5.css

.btn-group-vertical {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: center;
  justify-content: center;
}

bootstrap5.css

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

bootstrap5.css

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}

bootstrap5.css

.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

bootstrap5.css

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

bootstrap5.css

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

bootstrap5.css

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

bootstrap5.css

.input-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}

bootstrap5.css

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

bootstrap5.css

.input-group > .form-control + .form-control,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .custom-file,
.input-group > .form-control-plaintext + .form-control,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .custom-select + .form-control,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .custom-file,
.input-group > .custom-file + .form-control,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .custom-file {
  margin-left: -1px;
}

bootstrap5.css

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
  z-index: 3;
}

bootstrap5.css

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

bootstrap5.css

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

bootstrap5.css

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

bootstrap5.css

.input-group > .custom-file {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

bootstrap5.css

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

bootstrap5.css

.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

bootstrap5.css

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

bootstrap5.css

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

bootstrap5.css

.input-group-prepend .btn:focus,
.input-group-append .btn:focus {
  z-index: 3;
}

bootstrap5.css

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

bootstrap5.css

.input-group-prepend {
  margin-right: -1px;
}

bootstrap5.css

.input-group-append {
  margin-left: -1px;
}

bootstrap5.css

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

bootstrap5.css

.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}

bootstrap5.css

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
  height: calc(1.5em + 1rem + 2px);
}

bootstrap5.css

.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

bootstrap5.css

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  height: calc(1.5em + 0.5rem + 2px);
}

bootstrap5.css

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

bootstrap5.css

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-right: 1.75rem;
}

bootstrap5.css

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

bootstrap5.css

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

bootstrap5.css

.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

bootstrap5.css

.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

bootstrap5.css

.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}

bootstrap5.css

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

bootstrap5.css

.card-group > .card {
  margin-bottom: 15px;
}

bootstrap5.css

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

bootstrap5.css

.list-group {
  /* flexでcolumn形式にする */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

bootstrap5.css

.list-group-item-action {
  /* 幅100%にして色を付けて、テキストの位置は継承する */
  /* aやbuttonのインラインをリストにするために使う */
  width: 100%;
  color: #495057;
  text-align: inherit;
}

bootstrap5.css

.list-group-item-action:hover,
.list-group-item-action:focus {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

bootstrap5.css

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

bootstrap5.css

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

bootstrap5.css

.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

bootstrap5.css

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

bootstrap5.css

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

bootstrap5.css

.list-group-item.active {
  z-index: 2;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

bootstrap5.css

.list-group-horizontal {
  -ms-flex-direction: row;
  flex-direction: row;
}

bootstrap5.css

.list-group-horizontal .list-group-item {
  margin-right: -1px;
  margin-bottom: 0;
}

bootstrap5.css

.list-group-horizontal .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
}

bootstrap5.css

.list-group-horizontal .list-group-item:last-child {
  margin-right: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
}

bootstrap5.css

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-sm .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-sm .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

@media (min-width: 768px) {
  .list-group-horizontal-md {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-md .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-md .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-lg .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-lg .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .list-group-horizontal-xl .list-group-item {
    margin-right: -1px;
    margin-bottom: 0;
  }
  .list-group-horizontal-xl .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl .list-group-item:last-child {
    margin-right: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
}

bootstrap5.css

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

bootstrap5.css

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

bootstrap5.css

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

bootstrap5.css

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

bootstrap5.css

.list-group-item-primary {
  color: #004085;
  background-color: #b8daff;
}

bootstrap5.css

.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
  color: #004085;
  background-color: #9fcdff;
}

bootstrap5.css

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #004085;
  border-color: #004085;
}

bootstrap5.css

.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}

bootstrap5.css

.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
  color: #383d41;
  background-color: #c8cbcf;
}

bootstrap5.css

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}

bootstrap5.css

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

bootstrap5.css

.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
  color: #155724;
  background-color: #b1dfbb;
}

bootstrap5.css

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

bootstrap5.css

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

bootstrap5.css

.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
  color: #0c5460;
  background-color: #abdde5;
}

bootstrap5.css

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

bootstrap5.css

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

bootstrap5.css

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  color: #856404;
  background-color: #ffe8a1;
}

bootstrap5.css

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

bootstrap5.css

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

bootstrap5.css

.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
  color: #721c24;
  background-color: #f1b0b7;
}

bootstrap5.css

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

bootstrap5.css

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

bootstrap5.css

.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
  color: #818182;
  background-color: #ececf6;
}

bootstrap5.css

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

bootstrap5.css

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

bootstrap5.css

.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
  color: #1b1e21;
  background-color: #b9bbbe;
}

bootstrap5.css

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

bootstrap5.css

@media print {
  /* 印刷字に利用するCSS　mediaで大きく括って、それぞれのタグの設定をする */
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .navbar {
    display: none;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

カードグループによるレイアウト：card-group

カード01

カードの内容

カードのフッター

カード02

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

カードのフッター

カード03

カードの内容

カードのフッター

  <div class="card-group">
    <!-- 複数のカードをレイアウトするためにcard-groupを使う、隙間が出来ない -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード01</h4>
        <p class="card-text">カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
    <!-- カード2 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード02</h4>
        <p class="card-text">カードの内容カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
    <!-- カード3 -->
    <div class="card">
      <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">カード03</h4>
        <p class="card-text">カードの内容</p>
        <p class="card-text">カードの内容</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">カードのフッター</small>
      </div>
    </div>
  </div>

カード内のボーダーの無いリストグループ：list-group-flush

カードのタイトル

カードの内容

リスト01
リスト02
リスト03

カード内リンクカード内リンク

  <div class="card" style="max-width: 25rem;">
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <!-- 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

リスト項目1
リスト項目2
リスト項目3

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

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

リスト項目1
リスト項目2
リスト項目3

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

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

これは「primary」のリスト項目です。
これは「secondary」のリスト項目です。
これは「success」のリスト項目です。
これは「danger」のリスト項目です。
これは「warning」のリスト項目です。
これは「info」のリスト項目です。
これは「light」のリスト項目です。
これは「dark」のリスト項目です。
これは「デフォルト」のリスト項目です。

  <ul class="list-group">
    <li class="list-group-item 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>

リスト項目を無効状態にする：disabled

リスト項目1
リスト項目2
リスト項目3

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

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

リスト項目1 14
リスト項目2 2
リスト項目3 1

  <ul class="list-group">
    <!-- justify-content-betweenで左と右端にする -->
    <!-- align-items-centerで縦整列にする -->
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>

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

リスト項目1 リスト項目2 リスト項目3

  <!-- サイドメニューでリンクさせる -->
  <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>

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

これは「primary」のリスト項目です。これは「secondary」のリスト項目です。これは「success」のリスト項目です。これは「danger」のリスト項目です。これは「warning」のリスト項目です。これは「info」のリスト項目です。これは「light」のリスト項目です。これは「dark」のリスト項目です。これは「デフォルト」のリスト項目です。

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

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

これはアクティブ状態の「primary」。これはアクティブ状態の「secondary」これはアクティブ状態の「success」。これはアクティブ状態の「danger」これはアクティブ状態の「warning」これはアクティブ状態の「info」これはアクティブ状態の「light」これはアクティブ状態の「dark」これはアクティブ状態の「デフォルト（何も設定なし）」

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

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

hヘッダ

smallコンテンツ

pコンテンツ

smallコンテンツ

hヘッダ

smallコンテンツ

pコンテンツ

smallコンテンツ

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

li 枠なしのリストグループ：list-group-flush

リスト項目1
リスト項目2
リスト項目3

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

ボタンのリストグループ：list-group-item-action

  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
    <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
  </div>

ボタングループに設定するドロップダウン：btn-group

  <!-- ボタングループにすると、ドロップダウンメニューのデザインが変わる -->
  <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-right

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

メニュー項目にアクティブの状態を設定する：active

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

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

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

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

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

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

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

トグルボタンでdivコンテンツに様々な要素を追加する：dropdown-toggleと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で作成するコンテンツありのメニュー -->
    <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="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split

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

フォームの基本要素：form-groupとform-control

  <form>
    <div class="form-group">
      <!-- 入力要素ごとにform-group、入力エリアはform-control -->
      <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>

フォームタイトル：block-title-infoとfa-shopping-basket

formタイトル

First name

Last name

First name

Last name

Select:

File:

check:

Check A

Check B

radio:

Check A

Check B

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトル
  </h3>
  <div class="form-row">
    <!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-control">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="form-group col-sm-6">
      <label for="file1">File:</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

読み取りテキストを、枠を非表示にする：form-control-plaintext

  <form>
    <div class="form-group row">
      <label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <!-- inputの枠を表示しない -->
        <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">
        <!-- passwordを使うと、入力内容が*として表示される -->
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>

入力コントロールのサイズを調整する：-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-check-inline

  <form>
    <!-- form-groupではなく、form-checkを使う -->
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox02" value="option1">
      <label class="form-check-label" for="checkbox02">1</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox03" value="option2">
      <label class="form-check-label" for="checkbox03">2</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox04" value="option3" disabled>
      <label class="form-check-label" for="checkbox04">3</label>
    </div>
  </form>

読み取り専用のテキストを表示する：readonly

  <form>
    <!-- 読み取り専用のテキストを表示する -->
    <div class="form-group">
      <label for="input1">読み取り専用のテキストを表示</label>
      <input type="text" class="form-control" id="input1" placeholder="読み取り専用のテキスト" readonly>
    </div>
  </form>

自動サイズ調整のカラムを作成する：form-rowと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">
          <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-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>

一連の入力グループをまとめて無効にする：disabled

  <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とrowとcol

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

  <!-- formにclassを設定する -->
  <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>

ラベルサイズを調整する：col-form-label-smとform-control-sm

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

カスタムセレクト：custom-select

オプション

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

入力コントロールの前にアドオンを配置：input-group-prepend

@

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

入力コントロールの後にアドオンを配置：input-group-append

合計

円

  <!-- 固定の文字列を書いておいて、その中身を入力してもらう -->
  <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">円</span> </div>
  </div>

ラベル付きの入力グループ：input-group-append

サイトのURL

https://example.com/users/

  <!-- 固定の文字列を書いておいて、その続きを入力してもらう -->
  <label for="basic-url">サイトのURL</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon5">https://example.com/users/</span>
    </div>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon5">
  </div>

入力グループアドオンをチェックボックスやラジオボタンにする：input-group-append

  <!-- input=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>

入力グループボタン付きアドオン：input-group-append

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

入力グループドロップダウン付きアドオン：input-group-append

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

入力グループ複数の入力コントロール：input-group-append

姓名

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

入力グループ複数のアドオンを組み合わせる：input-group-append

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

入力グループスプリットボタン付きアドオン：input-group-append

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

入力グループのサイズ調整/中デフォルト：input-group

Default

  <!-- 標準サイズの入力グループ -->
  <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>

入力グループのサイズ調整/小： input-group-sm

Small

  <!-- 小サイズの入力グループ -->
  <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>

入力グループのサイズ調整/大：input-group-lg

Large

  <!-- 大サイズの入力グループ -->
  <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-control-range

  <!-- レンジ上の●をマウスで動かして入力させる -->
  <form>
    <div class="form-group">
      <label for="formControlRange">レンジ入力の例</label>
      <input type="range" class="form-control-range" id="formControlRange">
    </div>
  </form>

カスタムレンジ入力：custom-range

  <!-- レンジ上の●をマウスで動かして入力させる -->
  <form>
    <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">0－５まで（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">0－５まで、0.5刻み（step="0.5"）</label>
      <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
    </div>
  </form>

ラジオボタンをボタンに変更する：labelとbtnとdata-toggle=buttons

ラジオ1 ラジオ2 ラジオ3

  <div class="btn-group" data-toggle="buttons">
    <!-- labelでinputを囲む -->
    <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>

チェックボックスをボタン変更する：labelとbtnとdata-toggle=buttons

チェック1 チェック2 チェック3

  <!-- data-toggle="button" を指定すると、トグルボタンを作成することができます -->
  <!-- トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持される -->
  <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>

ボタングループ：btn-group

  <!-- btn-groupを付けて、roleとaria-labelで視覚支援する  -->
  <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>

ボタンツールバー：btn-toolbar

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

ボタングループ：ボタンのサイズ変更：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>
  <!-- btn-group-sm -->
  <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>

ドロップダウンメニュー：data-toggleとdropdown

  <!-- .dropdown, .dropdown-toggle, data-toggle="dropdown", .dropdown-menu, .dropdown-item を組み合わせてドロップダウンメニューを作成する -->
  <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>

垂直方向ボタングループ：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>

ナビバーの中に入力グループ

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

group

bootstrap5.css

html bootstrap5 Sample

カードグループによるレイアウト：card-group

カード01

カード02

カード03

カード内のボーダーの無いリストグループ：list-group-flush

カードのタイトル

リストグループ：list-group

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

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

リスト項目を無効状態にする：disabled

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

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

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

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

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

hヘッダ

hヘッダ

li 枠なしのリストグループ：list-group-flush

ボタンのリストグループ：list-group-item-action

ボタングループに設定するドロップダウン：btn-group

メニューの位置をボタンと右寄せにする：dropdown-menu-right

メニュー項目にアクティブの状態を設定する：active

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

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

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

トグルボタンでdivコンテンツに様々な要素を追加する：dropdown-toggleとdropdown-menu

ドロップダウンメニューのタイトル

スプリットボタン（分割ボタン）のドロップダウン：dropdown-toggle-split

フォームの基本要素：form-groupとform-control

フォームタイトル：block-title-infoとfa-shopping-basket

formタイトル

読み取りテキストを、枠を非表示にする：form-control-plaintext

入力コントロールのサイズを調整する：-lgと-sm

チェックボックスを横並びに変更する：form-check-inline

読み取り専用のテキストを表示する：readonly

自動サイズ調整のカラムを作成する：form-rowとcol-auto

コンパクトなカラム間隔のフォーム：form-rowとform-groupとcol-md-6

一連の入力グループをまとめて無効にする：disabled

水平配置のフォームを作成する：form-groupとrowとcol

インラインのフォーム：form-inline

ラベルサイズを調整する：col-form-label-smとform-control-sm

カスタムセレクト：custom-select

入力コントロールの前にアドオンを配置：input-group-prepend

入力コントロールの後にアドオンを配置：input-group-append

ラベル付きの入力グループ：input-group-append

入力グループ アドオンをチェックボックスやラジオボタンにする：input-group-append

入力グループ ボタン付きアドオン：input-group-append

入力グループ ドロップダウン付きアドオン：input-group-append

入力グループ 複数の入力コントロール：input-group-append

入力グループ 複数のアドオンを組み合わせる：input-group-append

入力グループ スプリットボタン付きアドオン：input-group-append

入力グループのサイズ調整/中デフォルト：input-group

入力グループのサイズ調整/小： input-group-sm

入力グループのサイズ調整/大：input-group-lg

レンジ入力：form-control-range

カスタムレンジ入力：custom-range

ラジオボタンをボタンに変更する：labelとbtnとdata-toggle=buttons

チェックボックスをボタン変更する：labelとbtnとdata-toggle=buttons

ボタングループ：btn-group

ボタンツールバー：btn-toolbar

ボタングループ：ボタンのサイズ変更：btn-group-lg

ドロップダウンメニュー：data-toggleとdropdown

垂直方向ボタングループ：btn-group-vertical

ナビバーの中に入力グループ

入力グループアドオンをチェックボックスやラジオボタンにする：input-group-append

入力グループボタン付きアドオン：input-group-append

入力グループドロップダウン付きアドオン：input-group-append

入力グループ複数の入力コントロール：input-group-append

入力グループ複数のアドオンを組み合わせる：input-group-append

入力グループスプリットボタン付きアドオン：input-group-append