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：コンポーネント：カード内にコンテンツを複合する
<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
<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>