dd
bootstrap5.css
bootstrap5.css
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
bootstrap5.css
ol,
ul {
padding-left: 2rem;
}
bootstrap5.css
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
bootstrap5.css
mark,
.mark {
padding: 0.2em;
background-color: #fcf8e3;
}
bootstrap5.css
kbd {
padding: 0.2rem 0.4rem;
font-size: 0.875em;
color: #fff;
background-color: #212529;
border-radius: 0.2rem;
}
bootstrap5.css
kbd kbd {
padding: 0;
font-size: 1em;
font-weight: 700;
}
bootstrap5.css
img,
svg {
vertical-align: middle;
}
bootstrap5.css
caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #6c757d;
text-align: left;
}
bootstrap5.css
::-moz-focus-inner {
padding: 0;
border-style: none;
}
bootstrap5.css
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
bootstrap5.css
legend {
float: left;
width: 100%;
padding: 0;
margin-bottom: 0.5rem;
font-size: calc(1.275rem + 0.3vw);
line-height: inherit;
}
bootstrap5.css
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
padding: 0;
}
bootstrap5.css
::-webkit-color-swatch-wrapper {
padding: 0;
}
bootstrap5.css
[hidden] {
display: none !important;
}
bootstrap5.css
.list-unstyled {
padding-left: 0;
list-style: none;
}
bootstrap5.css
.list-inline {
padding-left: 0;
list-style: none;
}
bootstrap5.css
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
max-width: 100%;
height: auto;
}
bootstrap5.css
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
bootstrap5.css
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) / 2);
padding-left: calc(var(--bs-gutter-x) / 2);
margin-top: var(--bs-gutter-y);
}
bootstrap5.css
.table > :not(caption) > * > * {
padding: 0.5rem 0.5rem;
background-color: var(--bs-table-bg);
background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
border-bottom-width: 1px;
}
bootstrap5.css
.table-sm > :not(caption) > * > * {
padding: 0.25rem 0.25rem;
}
bootstrap5.css
.table-striped > tbody > tr:nth-of-type(odd) {
--bs-table-accent-bg: var(--bs-table-striped-bg);
color: var(--bs-table-striped-color);
}
bootstrap5.css
.table-success {
--bs-table-bg: #d1e7dd;
--bs-table-striped-bg: #c7dbd2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bcd0c7;
--bs-table-active-color: #000;
--bs-table-hover-bg: #c1d6cc;
--bs-table-hover-color: #000;
color: #000;
border-color: #bcd0c7;
}
bootstrap5.css
.col-form-label {
padding-top: calc(0.375rem + 1px);
padding-bottom: calc(0.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;
}
bootstrap5.css
.col-form-label-lg {
padding-top: calc(0.5rem + 1px);
padding-bottom: calc(0.5rem + 1px);
font-size: 1.25rem;
}
bootstrap5.css
.col-form-label-sm {
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
font-size: 0.875rem;
}
bootstrap5.css
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.form-control[type="file"] {
overflow: hidden;
}
bootstrap5.css
.form-control::file-selector-button {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
color: #212529;
background-color: #e9ecef;
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: 1px;
border-radius: 0;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
background-color: #dde0e3;
}
bootstrap5.css
.form-control::-webkit-file-upload-button {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
-webkit-margin-end: 0.75rem;
margin-inline-end: 0.75rem;
color: #212529;
background-color: #e9ecef;
pointer-events: none;
border-color: inherit;
border-style: solid;
border-width: 0;
border-inline-end-width: 1px;
border-radius: 0;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
background-color: #dde0e3;
}
bootstrap5.css
.form-control-plaintext {
display: block;
width: 100%;
padding: 0.375rem 0;
margin-bottom: 0;
line-height: 1.5;
color: #212529;
background-color: transparent;
border: solid transparent;
border-width: 1px 0;
}
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0;
}
bootstrap5.css
.form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
bootstrap5.css
.form-control-sm::file-selector-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-sm::-webkit-file-upload-button {
padding: 0.25rem 0.5rem;
margin: -0.25rem -0.5rem;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
bootstrap5.css
.form-control-lg {
min-height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
bootstrap5.css
.form-control-lg::file-selector-button {
padding: 0.5rem 1rem;
margin: -0.5rem -1rem;
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
bootstrap5.css
.form-control-lg::-webkit-file-upload-button {
padding: 0.5rem 1rem;
margin: -0.5rem -1rem;
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
bootstrap5.css
.form-control-color {
max-width: 3rem;
height: auto;
padding: 0.375rem;
}
bootstrap5.css
.form-select[multiple],
.form-select[size]:not([size="1"]) {
padding-right: 0.75rem;
background-image: none;
}
bootstrap5.css
.form-select-sm {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.875rem;
}
bootstrap5.css
.form-select-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.25rem;
}
bootstrap5.css
.form-check {
display: block;
min-height: 1.5rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
bootstrap5.css
.form-switch {
padding-left: 2.5em;
}
bootstrap5.css
.form-range {
width: 100%;
height: 1.5rem;
padding: 0;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
bootstrap5.css
.form-floating > .form-control,
.form-floating > .form-select {
height: calc(3.5rem + 2px);
padding: 1rem 0.75rem;
}
bootstrap5.css
.form-floating > label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem 0.75rem;
pointer-events: none;
border: 1px solid transparent;
transform-origin: 0 0;
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
bootstrap5.css
.form-floating > .form-control:not(:-moz-placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-control:-webkit-autofill {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
bootstrap5.css
.form-floating > .form-select {
padding-top: 1.625rem;
padding-bottom: 0.625rem;
}
bootstrap5.css
.input-group-text {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
bootstrap5.css
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
bootstrap5.css
.input-group-lg > .form-select,
.input-group-sm > .form-select {
padding-right: 1.75rem;
}
bootstrap5.css
.valid-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
color: #fff;
background-color: rgba(25, 135, 84, 0.9);
border-radius: 0.25rem;
}
bootstrap5.css
.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
bootstrap5.css
.invalid-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
color: #fff;
background-color: rgba(220, 53, 69, 0.9);
border-radius: 0.25rem;
}
bootstrap5.css
.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
bootstrap5.css
.btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.btn-check:checked + .btn-info,
.btn-check:active + .btn-info,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
color: #000;
background-color: #3dd5f3;
border-color: #25cff2;
}
bootstrap5.css
.btn-lg,
.btn-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
bootstrap5.css
.btn-sm,
.btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
bootstrap5.css
.collapsing {
/* はみ出た部分は、非表示にする */
/* あえて一部表示で、それ以外は非表示という使い方もする */
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
bootstrap5.css
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
bootstrap5.css
.dropdown-divider {
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
bootstrap5.css
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
}
bootstrap5.css
.dropdown-header {
display: block;
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 0.875rem;
color: #6c757d;
white-space: nowrap;
}
bootstrap5.css
.dropdown-item-text {
display: block;
padding: 0.25rem 1rem;
color: #212529;
}
bootstrap5.css
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-flex;
vertical-align: middle;
}
bootstrap5.css
.dropdown-toggle-split {
padding-right: 0.5625rem;
padding-left: 0.5625rem;
}
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
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
bootstrap5.css
.nav-link {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
bootstrap5.css
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-brand {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
text-decoration: none;
white-space: nowrap;
}
bootstrap5.css
.navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
bootstrap5.css
.navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
bootstrap5.css
.navbar-text {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
bootstrap5.css
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
transition: box-shadow 0.15s ease-in-out;
}
bootstrap5.css
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
bootstrap5.css
@media (min-width: 576px) {
.navbar-expand-sm {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-sm .navbar-nav {
flex-direction: row;
}
.navbar-expand-sm .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-sm .navbar-collapse {
display: flex !important;
}
.navbar-expand-sm .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (min-width: 768px) {
.navbar-expand-md {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-md .navbar-nav {
flex-direction: row;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-md .navbar-collapse {
display: flex !important;
}
.navbar-expand-md .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (min-width: 992px) {
.navbar-expand-lg {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (min-width: 1200px) {
.navbar-expand-xl {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-xl .navbar-nav {
flex-direction: row;
}
.navbar-expand-xl .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-xl .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-xl .navbar-collapse {
display: flex !important;
}
.navbar-expand-xl .navbar-toggler {
display: none;
}
}
bootstrap5.css
@media (min-width: 1400px) {
.navbar-expand-xxl {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-xxl .navbar-nav {
flex-direction: row;
}
.navbar-expand-xxl .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-xxl .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-xxl .navbar-collapse {
display: flex !important;
}
.navbar-expand-xxl .navbar-toggler {
display: none;
}
}
bootstrap5.css
.navbar-expand .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
bootstrap5.css
.card-body {
flex: 1 1 auto;
padding: 1rem 1rem;
}
bootstrap5.css
.card-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.card-footer {
padding: 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
border-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.accordion-button {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 1rem 1.25rem;
font-size: 1rem;
color: #212529;
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0;
overflow-anchor: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
}
bootstrap5.css
.accordion-body {
padding: 1rem 1.25rem;
}
bootstrap5.css
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: 0 0;
margin-bottom: 1rem;
list-style: none;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem;
}
bootstrap5.css
.breadcrumb-item + .breadcrumb-item::before {
float: left;
padding-right: 0.5rem;
color: #6c757d;
content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
bootstrap5.css
.pagination {
display: flex;
padding-left: 0;
list-style: none;
}
bootstrap5.css
.page-link {
padding: 0.375rem 0.75rem;
}
bootstrap5.css
.pagination-lg .page-link {
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
}
bootstrap5.css
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
bootstrap5.css
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
}
bootstrap5.css
.alert {
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
bootstrap5.css
.alert-dismissible {
padding-right: 3rem;
}
bootstrap5.css
.alert-dismissible .btn-close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 1.25rem 1rem;
}
bootstrap5.css
.alert-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
}
bootstrap5.css
.progress {
display: flex;
height: 1rem;
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
}
bootstrap5.css
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #0d6efd;
transition: width 0.6s ease;
}
bootstrap5.css
.list-group {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
border-radius: 0.25rem;
}
bootstrap5.css
.list-group-item {
position: relative;
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
}
bootstrap5.css
.list-group-item-success {
color: #0f5132;
background-color: #d1e7dd;
}
bootstrap5.css
.toast {
width: 350px;
max-width: 100%;
font-size: 0.875rem;
pointer-events: auto;
background-color: rgba(255, 255, 255, 0.85);
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
bootstrap5.css
.toast-header {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
color: #6c757d;
background-color: rgba(255, 255, 255, 0.85);
background-clip: padding-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
bootstrap5.css
.toast-body {
padding: 0.75rem;
}
bootstrap5.css
.modal-open {
overflow: hidden;
}
bootstrap5.css
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
bootstrap5.css
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
bootstrap5.css
.modal-dialog-scrollable .modal-content {
max-height: 100%;
overflow: hidden;
}
bootstrap5.css
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
bootstrap5.css
.modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
bootstrap5.css
.modal-header .btn-close {
padding: 0.5rem 0.5rem;
margin: -0.5rem -0.5rem -0.5rem auto;
}
bootstrap5.css
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 1rem;
}
bootstrap5.css
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
bootstrap5.css
.bs-tooltip-top,
.bs-tooltip-auto[data-popper-placement^="top"] {
padding: 0.4rem 0;
}
bootstrap5.css
.bs-tooltip-end,
.bs-tooltip-auto[data-popper-placement^="right"] {
padding: 0 0.4rem;
}
bootstrap5.css
.bs-tooltip-bottom,
.bs-tooltip-auto[data-popper-placement^="bottom"] {
padding: 0.4rem 0;
}
bootstrap5.css
.bs-tooltip-start,
.bs-tooltip-auto[data-popper-placement^="left"] {
/* bootstrap4:bs-tooltip-right */
padding: 0 0.4rem;
}
bootstrap5.css
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 0.25rem;
}
bootstrap5.css
.popover {
position: absolute;
top: 0;
left: 0 /* rtl:ignore */;
z-index: 1060;
display: block;
max-width: 276px;
font-family: var(--bs-font-sans-serif);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}
bootstrap5.css
.popover-header {
padding: 0.5rem 1rem;
margin-bottom: 0;
font-size: 1rem;
background-color: #f0f0f0;
border-bottom: 1px solid #d8d8d8;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}
bootstrap5.css
.popover-body {
padding: 1rem 1rem;
color: #212529;
}
bootstrap5.css
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
bootstrap5.css
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.6s ease-in-out;
}
bootstrap5.css
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: center;
padding-left: 0;
margin-right: 15%;
margin-left: 15%;
list-style: none;
}
bootstrap5.css
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 3px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.5;
transition: opacity 0.6s ease;
}
bootstrap5.css
.carousel-caption {
position: absolute;
right: 15%;
bottom: 1.25rem;
left: 15%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: #fff;
text-align: center;
}
bootstrap5.css
.link-info:hover,
.link-info:focus {
color: #3dd5f3;
}
bootstrap5.css
.ratio::before {
display: block;
padding-top: var(--aspect-ratio);
content: "";
}
bootstrap5.css
.visually-hidden,
.visually-hidden-focusable:not(:focus) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
bootstrap5.css
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
bootstrap5.css
.align-middle {
vertical-align: middle !important;
}
bootstrap5.css
.overflow-hidden {
overflow: hidden !important;
}
bootstrap5.css
.translate-middle {
transform: translate(-50%, -50%) !important;
}
bootstrap5.css
.translate-middle-x {
transform: translateX(-50%) !important;
}
bootstrap5.css
.translate-middle-y {
transform: translateY(-50%) !important;
}
bootstrap5.css
.p-0 {
padding: 0 !important;
}
bootstrap5.css
.p-1 {
padding: 0.25rem !important;
}
bootstrap5.css
.p-2 {
padding: 0.5rem !important;
}
bootstrap5.css
.p-3 {
padding: 1rem !important;
}
bootstrap5.css
.p-4 {
padding: 1.5rem !important;
}
bootstrap5.css
.p-5 {
padding: 3rem !important;
}
bootstrap5.css
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
bootstrap5.css
.px-1 {
padding-right: 0.25rem !important;
padding-left: 0.25rem !important;
}
bootstrap5.css
.px-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
}
bootstrap5.css
.px-3 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
bootstrap5.css
.px-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
bootstrap5.css
.px-5 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
bootstrap5.css
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
bootstrap5.css
.py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
bootstrap5.css
.py-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
bootstrap5.css
.py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
bootstrap5.css
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
bootstrap5.css
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
bootstrap5.css
.pt-0 {
padding-top: 0 !important;
}
bootstrap5.css
.pt-1 {
padding-top: 0.25rem !important;
}
bootstrap5.css
.pt-2 {
padding-top: 0.5rem !important;
}
bootstrap5.css
.pt-3 {
padding-top: 1rem !important;
}
bootstrap5.css
.pt-4 {
padding-top: 1.5rem !important;
}
bootstrap5.css
.pt-5 {
padding-top: 3rem !important;
}
bootstrap5.css
.pe-0 {
padding-right: 0 !important;
}
bootstrap5.css
.pe-1 {
padding-right: 0.25rem !important;
}
bootstrap5.css
.pe-2 {
padding-right: 0.5rem !important;
}
bootstrap5.css
.pe-3 {
padding-right: 1rem !important;
}
bootstrap5.css
.pe-4 {
padding-right: 1.5rem !important;
}
bootstrap5.css
.pe-5 {
padding-right: 3rem !important;
}
bootstrap5.css
.pb-0 {
padding-bottom: 0 !important;
}
bootstrap5.css
.pb-1 {
padding-bottom: 0.25rem !important;
}
bootstrap5.css
.pb-2 {
padding-bottom: 0.5rem !important;
}
bootstrap5.css
.pb-3 {
padding-bottom: 1rem !important;
}
bootstrap5.css
.pb-4 {
padding-bottom: 1.5rem !important;
}
bootstrap5.css
.pb-5 {
padding-bottom: 3rem !important;
}
bootstrap5.css
.ps-0 {
padding-left: 0 !important;
}
bootstrap5.css
.ps-1 {
padding-left: 0.25rem !important;
}
bootstrap5.css
.ps-2 {
padding-left: 0.5rem !important;
}
bootstrap5.css
.ps-3 {
padding-left: 1rem !important;
}
bootstrap5.css
.ps-4 {
padding-left: 1.5rem !important;
}
bootstrap5.css
.ps-5 {
padding-left: 3rem !important;
}
bootstrap5.css
.invisible {
visibility: hidden !important;
}
html bootstrap5 Sample
水平方向のカラム間のガター:gx-5
p-3 border bg-light
p-3 border bg-light
<!-- ガターとは、カラム間のパディング、padding によって作られるカラムの隙間のことです。 -->
<!-- 各カラムに padding-right と padding-leftを設定し、各行の最初と最後にネガティブ margin でオフセットしてコンテンツを揃えます。。 -->
<!--不要なオーバーフローを避けるため .container や.container-fluid を親要素に設定することもできます。たとえば、次の例では .px-4 でパディングを増やしています -->
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
</div>
</div>
垂直方向のカラム間のガター、オーバーフロー処理:gy-5
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
p-3 border bg-light
<!--垂直方向のガターはページの最後にある .row の下にオーバーフローを引き起こす可能性があります。-->
<!-- container overflow-hidden で、はみ出しrow部分を無視する -->
<!-- このような場合は、.row を.overflow-hidden でラップするとも言う -->
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">p-3 border bg-light</div>
</div>
</div>
</div>
flexコンテナー内のアイテムの配置/ベースライン:align-items-baseline
flex文字01
(padding: 2rem)
(padding: 2rem)
flex文字02
(padding: 4rem)
(padding: 4rem)
flex文字03
(padding: 1rem)
(padding: 1rem)
<div class="d-flex align-items-baseline" style="height: 200px">
<!-- paddingも含めて、flaxの大きさが決まる 文字の位置の高さが同じ-->
<div style="padding: 2rem">flex文字01 <br>(padding: 2rem)</div>
<div style="padding: 4rem">flex文字02 <br>(padding: 4rem)</div>
<div style="padding: 1rem">flex文字03 <br>(padding: 1rem)</div>
</div>
js ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">ブランドを隠す</a>
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="visually-hidden">(現位置)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="d-flex">
<input class="mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
スクリーンリーダー非表示だけど非視覚者のみに読み上げる:visually-hiddenとvisually-hidden-focusable
メインコンテンツへ
スキップコンテンツ <h3 class="visually-hidden">メインコンテンツへ</h3>
<a class="visually-hidden-focusable" href="#content">スキップコンテンツ</a>
js アラートを閉じるボタンでしか消えないモーダル:data-bs-backdrop
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#staticBackdropLive">×でしか閉じないモーダル</button>
<div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside me. Don't even try to press escape key.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
スクリーンリーダー視覚支援 非表示テキスト:visually-hidden
<!-- visually-hiddenは非表示で、スクリーンリーダのみ読み上げます -->
<button type="button" class="btn btn-primary">
未読メッセージ <span class="badge bg-light text-dark">9</span>
<span class="visually-hidden">未読メッセージ</span>
</button>
定義リスト:dlとdtとdd
- dt1
- 用語1の説明。
- 長いテキストは切り捨てて省略
- 用語2の説明。
- 用語3
-
- ネストされた用語4
- ネストされた用語4の説明
<!-- rowをcolで制御する -->
<dl class="row">
<dt class="col-sm-3">dt1</dt>
<dd class="col-sm-9">用語1の説明。</dd>
<!-- text-truncateがcolの幅で自動設定される -->
<dt class="col-sm-3 text-truncate">長いテキストは切り捨てて省略</dt>
<dd class="col-sm-9">用語2の説明。</dd>
<dt class="col-sm-3">用語3</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">ネストされた用語4</dt>
<dd class="col-sm-8">ネストされた用語4の説明</dd>
</dl>
</dd>
</dl>
テーブルのセル内の配置:align-bottomとalign-top
タイトル 1 | タイトル 2 | タイトル 3 | タイトル 4 |
---|---|---|---|
vertical-align: middle | vertical-align: middle | vertical-align: middle | XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX |
vertical-align: bottom | vertical-align: bottom | vertical-align: bottom | XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX |
vertical-align: middle | vertical-align: middle | align-top | XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX |
<table class="table align-middle">
<thead>
<tr>
<th scope="col" class="w-25">タイトル 1</th>
<th scope="col" class="w-25">タイトル 2</th>
<th scope="col" class="w-25">タイトル 3</th>
<th scope="col" class="w-25">タイトル 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>vertical-align: middle</td>
<td>vertical-align: middle</td>
<td>vertical-align: middle</td>
<td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
</td>
</tr>
<tr class="align-bottom">
<td>vertical-align: bottom</td>
<td>vertical-align: bottom</td>
<td>vertical-align: bottom</td>
<td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
</td>
</tr>
<tr>
<td>vertical-align: middle</td>
<td>vertical-align: middle</td>
<td class="align-top">align-top</td>
<td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
</td>
</tr>
</tbody>
</table>
コンパクトテーブル:table-sm
タイトル | タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|---|
タイトル | データ | データ | データ | データ | データ |
タイトル | データ | データ | データ | データ | データ |
タイトル | データ | データ | データ | データ | データ |
<table class="table table-sm">
<!-- table-sm を追加するとセルの padding を半分にできます コンパクト表示になる-->
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
ページネーションにアイコンを使用する:«
<nav>
<!-- 記号を使用した場合は、aria-labelやvisually-hiddenで視覚者支援をする -->
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="前へ">
<span aria-hidden="true">«</span><span class="visually-hidden">前へ</span></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="次へ">
<span aria-hidden="true">»</span><span class="visually-hidden">次へ</span></a></li>
</ul>
</nav>
リンクの無効状態やアクティブ状態を指定する:activeとdisabled
<nav>
<ul class="pagination">
<!-- リンク無効 -->
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<!-- 現在のページ位置 visually-hiddenで視覚支援説明 -->
<li class="page-item active"><a class="page-link" href="#">2 <span class="visually-hidden">現ページ</span></a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
フォームタイトルのアイコン、水平レイアウト:rowとcolとfa-shopping-basket
formタイトルにfont-awesome
<!-- 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タイトルにfont-awesome
</h3>
<div class="row">
<!-- formのレイアウトにrowとcolを利用して、垂直から水平レイアウトに変更する -->
<!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
<div class="mb-3 col-sm-6">
<label for="text4a">First name</label>
<input type="text" class="form-control" id="text4a" placeholder="First name" />
</div>
<div class="mb-3 col-sm-6">
<label for="text4b">Last name</label>
<input type="text" class="form-control" id="text4b" placeholder="Last name" />
</div>
<div class="mb-3 col-sm-6">
<label for="text4a">First name</label>
<input type="text" class="form-control" id="text4a" placeholder="First name" />
</div>
<div class="mb-3 col-sm-6">
<label for="text4b">Last name</label>
<input type="text" class="form-control" id="text4b" placeholder="Last name" />
</div>
<div class="mb-3 col-sm-6">
<label for="select1a">Select:</label>
<select id="select1a" class="form-select">
<option>Select A</option>
<option>Select B</option>
</select>
</div>
<div class="mb-3 col-sm-6">
<!-- クリックするとファイルダイヤログが表示 -->
<label for="file1">Fileを選択を開く</label>
<input type="file" id="file1" class="form-control-file" />
</div>
<div class="mb-3 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="mb-3 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-switch
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" />
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled />
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled />
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
フォームレイアウトにrow自動サイズ調整カラム:rowとcol-auto
<!-- flexbox ユーティリティを使用してコンテンツを垂直方向にセンタリングし、 -->
<!-- .col を .col-auto に変更して、カラムが必要なだけのスペースを占有する。 -->
<!-- カラムのサイズは内容に基づいてデバイス等により自動的に決定されます -->
<!-- bootstrap5では、form-rowからrowに変更 -->
<div class="row align-items-center">
<div class="col-auto">
<!-- labelはvisually-hidden -->
<label class="visually-hidden" for="inputName">氏名</label>
<input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
</div>
<div class="col-auto">
<div class="input-group mb-2">
<label class="visually-hidden" for="inputUsername">ユーザーネーム</label>
<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>
フォームレイアウトにrow:rowとmb-3とcol-md-6
<!-- colとrowで自由自在にデザインを作っていく -->
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputEmail">メールアドレス</label>
<input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
</div>
<div class="mb-3 col-md-6">
<label for="inputPassword">パスワード</label>
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
<div class="row">
<div class="mb-3 col-md-4">
<label for="inputState">国</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="mb-3 col-md-2">
<label for="inputZip">郵便番号</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="mb-3 col-md-6">
<label for="inputCity">都道府県</label>
<input type="text" class="form-control" id="inputCity">
</div>
</div>
<div class="mb-3">
<label for="inputAddress1">住所1</label>
<input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
</div>
<div class="mb-3">
<label for="inputAddress2">住所2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
</div>
<div class="mb-3">
<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-inline
<!-- formにclassを設定する -->
<form class="form-inline">
<label class="visually-hidden" for="name">氏名</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
<label class="visually-hidden" for="username">ユーザーネーム</label>
<!-- input-groupとinput-group-textを設定して、テキスト文字と混在させる -->
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-text">@</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>
入力コントロールの前にアドオンを配置:input-group-text
@
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon">@</span>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名">
</div>
折り返さない:flex-nowrap
@
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">@
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="addon-wrapping">
</div>
js インジケータ、タイトル、キャプション付きカルーセル:carousel-indicatorsとdata-bs-slide-to
<div id="carouselSample" class="carousel slide" data-bs-ride="carousel">
<!-- インジケーターによるフェード遷移(好きな場所にクリックでいける) -->
<ol class="carousel-indicators">
<li data-bs-target="#carouselSample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselSample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselSample" data-bs-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" slide"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前と次のアイコン付きカルーセル -->
<a class="carousel-control-prev" href="#carouselSample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">前に戻る</span>
</a>
<a class="carousel-control-next" href="#carouselSample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">次に送る</span>
</a>
</div>
js データ属性でインターバルの設定:data-bs-interval
<div class="container">
<!-- intervalの設定 -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="15000">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション</p>
</div>
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">次に送る</span>
</a>
</div>
</div>
js データ属性でフェードトランジションの設定:carousel-fade
<div class="container">
<!-- スライドの代わりにフェードトランジションでスライドをアニメーションさせる -->
<div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<div class="carousel-caption">
<h5>スライドタイトル1</h5>
<p>スライドのキャプション3</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/665566/FF0000/000000?text=Second slide">
<div class="carousel-caption">
<h5>スライドタイトル2</h5>
<p>スライドのキャプション3</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="img"
src="https://via.placeholder.com/1600x900/664466/FFEE00/000000?text=Third slide">
<div class="carousel-caption">
<h5>スライドタイトル3</h5>
<p>スライドのキャプション3</p>
</div>
</div>
</div>
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">次に送る</span>
</a>
</div>
</div>
js インジケーター、キャプションを暗くする:carousel-dark
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>image svg 1</title>
<rect width="100%" height="100%" fill="#f5f5f5" /><text x="50%" y="50%" fill="#aaa" dy=".3em">First
slide</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>First タイトル</h5>
<p>First xxxxxxxxxxxxxx</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>image svg 2</title>
<rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#bbb" dy=".3em">Second
slide</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Second タイトル</h5>
<p>Second xxxxxxxxxxxxxx</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>image svg 3</title>
<rect width="100%" height="100%" fill="#e5e5e5" /><text x="50%" y="50%" fill="#999" dy=".3em">Third
slide</text>
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Third タイトル</h5>
<p>Third xxxxxxxxxxxxxx</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="visually-hidden">Previous
</a>
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="visually-hidden">Next
</a>
</div>
js モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal"-->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<!-- 「data-bs-dismiss=”modal”」が閉じる動作 -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
js モーダルのアニメーション設定:fade
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal2">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal2"-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 垂直方向中央に配置するモーダル:modal-dialog-centered
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal3">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal3"-->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<!-- モーダルの×ボタン -->
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col,
.row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: f8f8ff;
border: 1px solid #aaa;
}
</style>
js グリッドレイアウトを使用したモーダル:rowとcol
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal4">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal4"-->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<!-- container-fluidは画面いっぱい -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
<div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 長いコンテンツのモーダル:modal-body
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModal5">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModal5"-->
<div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 長いコンテンツ、スクロールのモーダル:modal-dialog-scrollable
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#exampleModalsc">スクロールモーダルボタン</button>
<!-- モーダルウィンドウ外枠 id="exampleModalsc"-->
<div class="modal fade" id="exampleModalsc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-dialog-scrollable" role="document">
<!-- モーダルのコンテンツ -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
<p>モーダル本文</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
js 大きなサイズのモーダル サイズのオプション:modal-lg
<div class="container">
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#largeModal6">大きなモーダルボタン</button>
<!-- モーダル id="largeModal6"-->
<div class="modal fade" id="largeModal6" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
aria-hidden="true">
<!-- 大きなモーダルのダイアログ本体modal-lg -->
<!-- modal-sm:300px,Default(None):500px,modal-lg:800px,modal-xl:1140px
-->
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文</div>
<!-- モーダルのフッター -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
js 小さなサイズのモーダル:modal-sm
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
data-bs-target="#smallModal">小さなモーダルボタン(modal-sm)</button>
<!-- モーダル id="smallModal"-->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
aria-hidden="true">
<!-- 小さなモーダルのダイアログ本体modal-sm -->
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>