"files": [
{
"path": "./dist/css/bootstrap-grid.css",
- "maxSize": "7.5 kB"
+ "maxSize": "8.25 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
- "maxSize": "6.75 kB"
+ "maxSize": "7.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
- "maxSize": "2.75 kB"
+ "maxSize": "3.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
- "maxSize": "2.5 kB"
+ "maxSize": "3.25 kB"
},
{
"path": "./dist/css/bootstrap-utilities.css",
- "maxSize": "9.75 kB"
+ "maxSize": "10.5 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
- "maxSize": "9.0 kB"
+ "maxSize": "9.75 kB"
},
{
"path": "./dist/css/bootstrap.css",
- "maxSize": "30.25 kB"
+ "maxSize": "31.25 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "28 kB"
+ "maxSize": "29.25 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
}
}
}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .accordion-button::after {
+ --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+ --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+ }
+ }
+}
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
+ --#{$prefix}alert-link-color: inherit;
// scss-docs-end alert-css-vars
position: relative;
// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
+ color: var(--#{$prefix}alert-link-color);
}
// scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert.
-
-@each $state, $value in $theme-colors {
- $alert-background: shift-color($value, $alert-bg-scale);
- $alert-border: shift-color($value, $alert-border-scale);
- $alert-color: shift-color($value, $alert-color-scale);
-
- @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
- $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
- }
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
.alert-#{$state} {
- @include alert-variant($alert-background, $alert-border, $alert-color);
+ --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+ --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+ --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+ --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
}
}
// scss-docs-end alert-modifiers
// Dark mode carousel
-.carousel-dark {
+%carousel-dark {
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter;
color: $carousel-dark-caption-color;
}
}
+
+.carousel-dark {
+ @extend %carousel-dark;
+}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .carousel {
+ @extend %carousel-dark;
+ }
+ }
+}
}
}
-.btn-close-white {
+%btn-close-white {
filter: var(--#{$prefix}btn-close-white-filter);
}
+
+.btn-close-white {
+ @extend %btn-close-white;
+}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .btn-close {
+ @extend %btn-close-white;
+ }
+ }
+}
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
+ @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
&:hover,
&:focus {
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
-@each $state, $value in $theme-colors {
- $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
- $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
- @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
- $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
- }
+@each $state in map-keys($theme-colors) {
+ .list-group-item-#{$state} {
+ --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
+ --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+ --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+
+ &.list-group-item-action {
+ &:hover,
+ &:focus {
+ --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+ --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+ }
- @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
+ &:active {
+ --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
+ --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
+ --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
+ }
+ }
+ }
}
// scss-docs-end list-group-modifiers
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb
+$theme-colors-text: (
+ "primary": $primary-text,
+ "secondary": $secondary-text,
+ "success": $success-text,
+ "info": $info-text,
+ "warning": $warning-text,
+ "danger": $danger-text,
+ "light": $light-text,
+ "dark": $dark-text,
+) !default;
+
+$theme-colors-bg-subtle: (
+ "primary": $primary-bg-subtle,
+ "secondary": $secondary-bg-subtle,
+ "success": $success-bg-subtle,
+ "info": $info-bg-subtle,
+ "warning": $warning-bg-subtle,
+ "danger": $danger-bg-subtle,
+ "light": $light-bg-subtle,
+ "dark": $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+ "primary": $primary-border-subtle,
+ "secondary": $secondary-border-subtle,
+ "success": $success-border-subtle,
+ "info": $info-border-subtle,
+ "warning": $warning-border-subtle,
+ "danger": $danger-border-subtle,
+ "light": $light-border-subtle,
+ "dark": $dark-border-subtle,
+) !default;
+
// Utilities maps
//
// Extends the default `$theme-colors` maps to help create our utilities.
)
) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+ "primary-emphasis": var(--#{$prefix}primary-text),
+ "secondary-emphasis": var(--#{$prefix}secondary-text),
+ "success-emphasis": var(--#{$prefix}success-text),
+ "info-emphasis": var(--#{$prefix}info-text),
+ "warning-emphasis": var(--#{$prefix}warning-text),
+ "danger-emphasis": var(--#{$prefix}danger-text),
+ "light-emphasis": var(--#{$prefix}light-text),
+ "dark-emphasis": var(--#{$prefix}dark-text)
+) !default;
// scss-docs-end utilities-text-colors
// scss-docs-start utilities-bg-colors
)
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+ "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+ "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+ "success-subtle": var(--#{$prefix}success-bg-subtle),
+ "info-subtle": var(--#{$prefix}info-bg-subtle),
+ "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+ "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+ "light-subtle": var(--#{$prefix}light-bg-subtle),
+ "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
// scss-docs-end utilities-bg-colors
// scss-docs-start utilities-border-colors
)
) !default;
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+ "primary-subtle": var(--#{$prefix}primary-border-subtle),
+ "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+ "success-subtle": var(--#{$prefix}success-border-subtle),
+ "info-subtle": var(--#{$prefix}info-border-subtle),
+ "warning-subtle": var(--#{$prefix}warning-border-subtle),
+ "danger-subtle": var(--#{$prefix}danger-border-subtle),
+ "light-subtle": var(--#{$prefix}light-border-subtle),
+ "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
// scss-docs-end utilities-border-colors
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
// Helpers
@import "mixins/breakpoints";
+@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/utilities";
// Components
-@import "mixins/alert";
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
-@import "mixins/list-group";
@import "mixins/forms";
@import "mixins/table-variants";
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .navbar {
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ }
+ }
+}
margin-left: $pagination-margin-start;
}
- @if $pagination-margin-start == ($pagination-border-width * -1) {
+ @if $pagination-margin-start == calc($pagination-border-width * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
- color: $headings-color;
+ color: var(--#{$prefix}heading-color, inherit);
}
h1 {
// Links
a {
- color: var(--#{$prefix}link-color);
+ color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
text-decoration: $link-decoration;
&:hover {
- color: var(--#{$prefix}link-hover-color);
+ --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
text-decoration: $link-hover-decoration;
}
}
-:root {
+:root,
+[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
--#{$prefix}#{$color}-rgb: #{$value};
}
+ @each $color, $value in $theme-colors-text {
+ --#{$prefix}#{$color}-text: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-bg-subtle {
+ --#{$prefix}#{$color}-bg-subtle: #{$value};
+ }
+
+ @each $color, $value in $theme-colors-border-subtle {
+ --#{$prefix}#{$color}-border-subtle: #{$value};
+ }
+
--#{$prefix}white-rgb: #{to-rgb($white)};
--#{$prefix}black-rgb: #{to-rgb($black)};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
+
+ --#{$prefix}emphasis-color: #{$body-emphasis-color};
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+ --#{$prefix}secondary-color: #{$body-secondary-color};
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+ --#{$prefix}secondary-bg: #{$body-secondary-bg};
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+ --#{$prefix}tertiary-color: #{$body-tertiary-color};
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-bg: #{$body-bg};
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// scss-docs-end root-body-variables
+ @if $headings-color != null {
+ --#{$prefix}heading-color: #{$headings-color};
+ }
+
+ --#{$prefix}link-color: #{$link-color};
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+ --#{$prefix}link-decoration: #{$link-decoration};
+
+ --#{$prefix}link-hover-color: #{$link-hover-color};
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+ @if $link-hover-decoration != null {
+ --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+ }
+
+ --#{$prefix}code-color: #{$code-color};
+ --#{$prefix}highlight-bg: #{$mark-bg};
+
// scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
- --#{$prefix}link-color: #{$link-color};
- --#{$prefix}link-hover-color: #{$link-hover-color};
+ --#{$prefix}box-shadow: #{$box-shadow};
+ --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+ --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+ --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
- --#{$prefix}code-color: #{$code-color};
+ --#{$prefix}emphasis-color: #{$emphasis-color};
+
+ // scss-docs-start form-control-vars
+ --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
+ --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
+ // scss-docs-end form-control-vars
--#{$prefix}highlight-bg: #{$mark-bg};
--#{$prefix}breakpoint-#{$name}: #{$value};
}
}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ // scss-docs-start root-dark-mode-vars
+ --#{$prefix}body-color: #{$body-color-dark};
+ --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+ --#{$prefix}body-bg: #{$body-bg-dark};
+ --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+ --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+ --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+ --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+ --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+ --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+ --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+ --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+ --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+ --#{$prefix}emphasis-color: #{$emphasis-color-dark};
+
+ --#{$prefix}primary-text: #{$primary-text-dark};
+ --#{$prefix}secondary-text: #{$secondary-text-dark};
+ --#{$prefix}success-text: #{$success-text-dark};
+ --#{$prefix}info-text: #{$info-text-dark};
+ --#{$prefix}warning-text: #{$warning-text-dark};
+ --#{$prefix}danger-text: #{$danger-text-dark};
+ --#{$prefix}light-text: #{$light-text-dark};
+ --#{$prefix}dark-text: #{$dark-text-dark};
+
+ --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
+ --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
+ --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
+ --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
+ --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
+ --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
+ --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
+ --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
+
+ --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
+ --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
+ --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
+ --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
+ --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
+ --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
+ --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
+ --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
+
+ --#{$prefix}heading-color: #{$headings-color-dark};
+
+ --#{$prefix}link-color: #{$link-color-dark};
+ --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+ --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+ --#{$prefix}code-color: #{$code-color-dark};
+
+ --#{$prefix}border-color: #{$border-color-dark};
+ --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+ // scss-docs-end root-dark-mode-vars
+ }
+}
),
values: $utilities-border-colors
),
+ "subtle-border-color": (
+ property: border-color,
+ class: border,
+ values: $utilities-border-subtle
+ ),
"border-width": (
css-var: true,
css-variable-name: border-width,
values: map-merge(
$utilities-text-colors,
(
- "muted": $text-muted,
+ "muted": $text-muted, // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
+ "body-secondary": var(--#{$prefix}secondary-color),
+ "body-tertiary": var(--#{$prefix}tertiary-color),
+ "body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
100: 1
)
),
+ "text-color": (
+ property: color,
+ class: text,
+ values: $utilities-text-emphasis-colors
+ ),
// scss-docs-end utils-color
// scss-docs-start utils-bg-color
"background-color": (
values: map-merge(
$utilities-bg-colors,
(
- "transparent": transparent
+ "transparent": transparent,
+ "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+ "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+ "body-emphasis": rgba(var(--#{$prefix}emphasis-bg-rgb), var(--#{$prefix}bg-opacity)),
)
)
),
100: 1
)
),
+ "subtle-background-color": (
+ property: background-color,
+ class: bg,
+ values: $utilities-bg-subtle
+ ),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
--- /dev/null
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+$primary-text-dark: $blue-300 !default;
+$secondary-text-dark: $gray-300 !default;
+$success-text-dark: $green-300 !default;
+$info-text-dark: $cyan-300 !default;
+$warning-text-dark: $yellow-300 !default;
+$danger-text-dark: $red-300 !default;
+$light-text-dark: $gray-100 !default;
+$dark-text-dark: $gray-300 !default;
+
+$primary-bg-subtle-dark: $blue-900 !default;
+$secondary-bg-subtle-dark: $gray-900 !default;
+$success-bg-subtle-dark: $green-900 !default;
+$info-bg-subtle-dark: $cyan-900 !default;
+$warning-bg-subtle-dark: $yellow-900 !default;
+$danger-bg-subtle-dark: $red-900 !default;
+$light-bg-subtle-dark: $gray-800 !default;
+$dark-bg-subtle-dark: mix($gray-800, $black) !default;
+
+$primary-border-subtle-dark: $blue-700 !default;
+$secondary-border-subtle-dark: $gray-700 !default;
+$success-border-subtle-dark: $green-700 !default;
+$info-border-subtle-dark: $cyan-800 !default;
+$warning-border-subtle-dark: $yellow-800 !default;
+$danger-border-subtle-dark: $red-700 !default;
+$light-border-subtle-dark: $gray-700 !default;
+$dark-border-subtle-dark: $gray-800 !default;
+
+$body-color-dark: $gray-500 !default;
+$body-bg-dark: $gray-900 !default;
+$body-emphasis-color-dark: $gray-100 !default;
+$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark: $gray-800 !default;
+$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
+$emphasis-color-dark: $white !default;
+$border-color-dark: $gray-700 !default;
+$border-color-translucent-dark: rgba($white, .15) !default;
+$headings-color-dark: #fff !default;
+$link-color-dark: $blue-300 !default;
+$link-hover-color-dark: $blue-200 !default;
+$code-color-dark: $pink-300 !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark: $body-color-dark !default;
+$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark: rgba($white, .25) !default;
+$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end sass-dark-mode-vars
) !default;
// scss-docs-end theme-colors-map
+$primary-text: $blue-600 !default;
+$secondary-text: $gray-600 !default;
+$success-text: $green-600 !default;
+$info-text: $cyan-700 !default;
+$warning-text: $yellow-700 !default;
+$danger-text: $red-600 !default;
+$light-text: $gray-600 !default;
+$dark-text: $gray-700 !default;
+
+$primary-bg-subtle: $blue-100 !default;
+$secondary-bg-subtle: $gray-100 !default;
+$success-bg-subtle: $green-100 !default;
+$info-bg-subtle: $cyan-100 !default;
+$warning-bg-subtle: $yellow-100 !default;
+$danger-bg-subtle: $red-100 !default;
+$light-bg-subtle: mix($gray-100, $white) !default;
+$dark-bg-subtle: $gray-400 !default;
+
+$primary-border-subtle: $blue-200 !default;
+$secondary-border-subtle: $gray-200 !default;
+$success-border-subtle: $green-200 !default;
+$info-border-subtle: $cyan-200 !default;
+$warning-border-subtle: $yellow-200 !default;
+$danger-border-subtle: $red-200 !default;
+$light-border-subtle: $gray-200 !default;
+$dark-border-subtle: $gray-500 !default;
+
// Characters which are escaped by the escape-svg function
$escaped-characters: (
("<", "%3c"),
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
+$enable-dark-mode: true !default;
+$color-mode-type: data !default;
+
// Prefix for :root CSS variables
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
//
// Settings for the `<body>` element.
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
$body-text-align: null !default;
+$body-color: $gray-900 !default;
+$body-bg: $white !default;
+
+$body-emphasis-color: $black !default;
+
+$body-secondary-color: rgba($body-color, .75) !default;
+$body-secondary-bg: $gray-200 !default;
+
+$body-tertiary-color: rgba($body-color, .5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$emphasis-color: $black !default;
// Links
//
4: 4px,
5: 5px
) !default;
-
$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-radius-variables
// scss-docs-start box-shadow-variables
-$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow: 0 .5rem 1rem rgba(var(--#{$prefix}body-color-rgb), .15) !default;
+$box-shadow-sm: 0 .125rem .25rem rgba(var(--#{$prefix}body-color-rgb), .075) !default;
+$box-shadow-lg: 0 1rem 3rem rgba(var(--#{$prefix}body-color-rgb), .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba(var(--#{$prefix}body-color-rgb), .075) !default;
// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
$sub-sup-font-size: .75em !default;
-$text-muted: $gray-600 !default;
+$text-muted: var(--#{$prefix}secondary-color) !default;
$initialism-font-size: $small-font-size !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
-$input-bg: $body-bg !default;
+$input-bg: var(--#{$prefix}form-control-bg) !default;
$input-disabled-color: null !default;
-$input-disabled-bg: $gray-200 !default;
+$input-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
$input-disabled-border-color: null !default;
-$input-color: $body-color !default;
-$input-border-color: $gray-400 !default;
+$input-color: var(--#{$prefix}body-color) !default;
+$input-border-color: var(--#{$prefix}border-color) !default; //$gray-400
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$input-placeholder-color: $gray-600 !default;
-$input-plaintext-color: $body-color !default;
+$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
+$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
-$form-check-input-border: 1px solid rgba($black, .25) !default;
+$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
-$form-select-disabled-bg: $gray-200 !default;
+$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
-$form-range-track-bg: $gray-300 !default;
+$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default;
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg: $gray-500 !default;
+$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
-$form-file-button-bg: $input-group-addon-bg !default;
-$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
+$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
// scss-docs-start form-validation-states
$form-validation-states: (
"valid": (
- "color": $form-feedback-valid-color,
- "icon": $form-feedback-icon-valid
+ "color": var(--#{$prefix}success-text),
+ "icon": $form-feedback-icon-valid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": var(--#{$prefix}success),
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+ "border-color": var(--#{$prefix}success),
),
"invalid": (
- "color": $form-feedback-invalid-color,
- "icon": $form-feedback-icon-invalid
+ "color": var(--#{$prefix}danger-text),
+ "icon": $form-feedback-icon-invalid,
+ "tooltip-color": #fff,
+ "tooltip-bg-color": var(--#{$prefix}danger),
+ "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+ "border-color": var(--#{$prefix}danger),
)
) !default;
// scss-docs-end form-validation-states
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color: $gray-600 !default;
+$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
-$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
-$nav-tabs-border-radius: $border-radius !default;
-$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: $gray-700 !default;
-$nav-tabs-link-active-bg: $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
-$navbar-light-color: rgba($black, .55) !default;
-$navbar-light-hover-color: rgba($black, .7) !default;
-$navbar-light-active-color: rgba($black, .9) !default;
-$navbar-light-disabled-color: rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
+$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
+$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
+$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
+$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{rgba($body-color, .75)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
-$dropdown-color: $body-color !default;
-$dropdown-bg: $white !default;
+$dropdown-color: var(--#{$prefix}body-color) !default;
+$dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
-$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
-$dropdown-link-hover-bg: $gray-200 !default;
+$dropdown-link-color: var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
+$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
-$pagination-bg: $white !default;
-$pagination-border-radius: $border-radius !default;
-$pagination-border-width: $border-width !default;
-$pagination-margin-start: ($pagination-border-width * -1) !default;
-$pagination-border-color: $gray-300 !default;
+$pagination-bg: var(--#{$prefix}body-bg) !default;
+$pagination-border-radius: var(--#{$prefix}border-radius) !default;
+$pagination-border-width: var(--#{$prefix}border-width) !default;
+$pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg: $gray-200 !default;
+$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg: $gray-200 !default;
-$pagination-hover-border-color: $gray-300 !default;
+$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $pagination-active-bg !default;
+$pagination-active-border-color: $component-active-bg !default;
-$pagination-disabled-color: $gray-600 !default;
-$pagination-disabled-bg: $white !default;
-$pagination-disabled-border-color: $gray-300 !default;
+$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$card-subtitle-color: null !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius: $border-radius !default;
+$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
-$card-cap-bg: rgba($black, .03) !default;
+$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
-$card-bg: $white !default;
+$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
-$accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
-$accordion-bg: $body-bg !default;
+$accordion-color: var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
+$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
-$accordion-border-radius: $border-radius !default;
+$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
-$accordion-button-color: $accordion-color !default;
+$accordion-button-color: var(--#{$prefix}body-color) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
-$accordion-button-active-color: shade-color($primary, 10%) !default;
+$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color: var(--#{$prefix}primary-text) !default;
$accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $accordion-button-color !default;
-$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-color: $body-color !default;
+$accordion-icon-active-color: $primary-text !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
-$tooltip-color: $white !default;
-$tooltip-bg: $black !default;
-$tooltip-border-radius: $border-radius !default;
+$tooltip-color: var(--#{$prefix}body-bg) !default;
+$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
-$popover-bg: $white !default;
+$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius: $border-radius-lg !default;
-$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
+$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
-$popover-header-bg: shade-color($popover-bg, 6%) !default;
+$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
-$popover-body-color: $body-color !default;
+$popover-body-color: var(--#{$prefix}body-color) !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
-$toast-background-color: rgba($white, .85) !default;
+$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius: $border-radius !default;
-$toast-box-shadow: $box-shadow !default;
+$toast-border-radius: var(--#{$prefix}border-radius) !default;
+$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
-$toast-header-color: $gray-600 !default;
-$toast-header-background-color: rgba($white, .85) !default;
-$toast-header-border-color: rgba($black, .05) !default;
+$toast-header-color: var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
-$modal-content-bg: $white !default;
+$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
-$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
+// fusv-disable
+$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
// Progress bars
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
-$progress-bg: $gray-200 !default;
-$progress-border-radius: $border-radius !default;
-$progress-box-shadow: $box-shadow-inset !default;
+$progress-bg: var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius: var(--#{$prefix}border-radius) !default;
+$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
// List group
// scss-docs-start list-group-variables
-$list-group-color: $gray-900 !default;
-$list-group-bg: $white !default;
-$list-group-border-color: rgba($black, .125) !default;
-$list-group-border-width: var(--#{$prefix}border-width) !default;
-$list-group-border-radius: $border-radius !default;
+$list-group-color: var(--#{$prefix}body-color) !default;
+$list-group-bg: var(--#{$prefix}body-bg) !default;
+$list-group-border-color: var(--#{$prefix}border-color) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: var(--#{$prefix}border-radius) !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
-$list-group-item-bg-scale: -80% !default;
-$list-group-item-color-scale: 40% !default;
+// fusv-disable
+$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
+// fusv-enable
-$list-group-hover-bg: $gray-100 !default;
+$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
-$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
-$list-group-action-color: $gray-700 !default;
-$list-group-action-hover-color: $list-group-action-color !default;
+$list-group-action-color: var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default;
-$list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: $gray-200 !default;
+$list-group-action-active-color: var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end list-group-variables
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
-$thumbnail-bg: $body-bg !default;
+$thumbnail-bg: var(--#{$prefix}body-bg) !default;
$thumbnail-border-width: var(--#{$prefix}border-width) !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: $box-shadow-sm !default;
+$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
// scss-docs-end thumbnail-variables
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
-$figure-caption-color: $gray-600 !default;
+$figure-caption-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end figure-variables
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
-$offcanvas-bg-color: $modal-content-bg !default;
-$offcanvas-color: $modal-content-color !default;
+$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
+$offcanvas-color: var(--#{$prefix}body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins/lists";
@import "mixins/breakpoints";
+@import "mixins/color-mode";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "root";
// Configuration
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Configuration
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
}
.form-check-input {
+ --#{$prefix}form-check-bg: #{escape-svg($form-check-input-bg)};
+
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
- background-color: $form-check-input-bg;
+ background-color: var(--#{$prefix}form-check-bg);
+ background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
&[type="checkbox"] {
@if $enable-gradients {
- background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
- background-image: escape-svg($form-check-input-checked-bg-image);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
}
}
&[type="radio"] {
@if $enable-gradients {
- background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
- background-image: escape-svg($form-check-radio-checked-bg-image);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
}
}
}
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
- background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
} @else {
- background-image: escape-svg($form-check-input-indeterminate-bg-image);
+ --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
}
}
padding-left: $form-switch-padding-start;
.form-check-input {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
width: $form-switch-width;
margin-left: $form-switch-padding-start * -1;
- background-image: escape-svg($form-switch-bg-image);
+ background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
@include border-radius($form-switch-border-radius);
@include transition($form-switch-transition);
&:focus {
- background-image: escape-svg($form-switch-focus-bg-image);
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
}
&:checked {
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
- background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
- background-image: escape-svg($form-switch-checked-bg-image);
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
}
}
}
}
}
}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-switch .form-check-input:not(:checked):not(:focus) {
+ --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+ }
+ }
+}
// https://primer.github.io/.
.form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
line-height: $form-select-line-height;
color: $form-select-color;
background-color: $form-select-bg;
- background-image: escape-svg($form-select-indicator);
+ background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
+
+@if $enable-dark-mode {
+ @include color-mode(dark) {
+ .form-select {
+ --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+ }
+ }
+}
+@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
+
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$prefix}alert-color: #{$color};
--- /dev/null
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $type: $color-mode-type) {
+ @if $type == "media-query" {
+ @media (prefers-color-scheme: $mode) {
+ @content;
+ }
+ } @else {
+ [data-bs-theme="#{$mode}"] {
+ @content;
+ }
+ }
+}
+// scss-docs-end color-mode-mixin
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
- $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+ $border-color: $color
) {
.#{$state}-feedback {
display: none;
.form-control {
@include form-validation-state-selector($state) {
- border-color: $color;
+ border-color: $border-color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
}
&:focus {
- border-color: $color;
+ border-color: $border-color;
box-shadow: $focus-box-shadow;
}
}
.form-select {
@include form-validation-state-selector($state) {
- border-color: $color;
+ border-color: $border-color;
@if $enable-validation-icons {
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
+ --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
padding-right: $form-select-feedback-icon-padding-end;
- background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}
&:focus {
- border-color: $color;
+ border-color: $border-color;
box-shadow: $focus-box-shadow;
}
}
.form-check-input {
@include form-validation-state-selector($state) {
- border-color: $color;
+ border-color: $border-color;
&:checked {
background-color: $color;
+@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
+
+
// List Groups
// scss-docs-start list-group-mixin
--- /dev/null
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+ 'use strict'
+
+ const storedTheme = localStorage.getItem('theme')
+
+ const getPreferredTheme = () => {
+ if (storedTheme) {
+ return storedTheme
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+
+ const setTheme = function (theme) {
+ if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.setAttribute('data-bs-theme', 'dark')
+ } else {
+ document.documentElement.setAttribute('data-bs-theme', theme)
+ }
+ }
+
+ setTheme(getPreferredTheme())
+
+ const showActiveTheme = theme => {
+ const activeThemeIcon = document.querySelector('.theme-icon-active use')
+ const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+ const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+ document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+ element.classList.remove('active')
+ })
+
+ btnToActive.classList.add('active')
+ activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+ }
+
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ if (storedTheme !== 'light' || storedTheme !== 'dark') {
+ setTheme(getPreferredTheme())
+ }
+ })
+
+ window.addEventListener('load', () => {
+ showActiveTheme(getPreferredTheme())
+
+ document.querySelectorAll('[data-bs-theme-value]')
+ .forEach(toggle => {
+ toggle.addEventListener('click', () => {
+ const theme = toggle.getAttribute('data-bs-theme-value')
+ localStorage.setItem('theme', theme)
+ setTheme(theme)
+ showActiveTheme(theme)
+ })
+ })
+ })
+})()
@include font-size(.8125rem);
line-height: 1.4;
text-align: left;
- background-color: $gray-100;
+ background-color: var(--bs-tertiary-bg);
a {
- color: $gray-800;
+ color: var(--bs-body-color);
text-decoration: none;
}
.carbon-poweredby {
display: block;
margin-top: .75rem;
- color: $gray-700 !important;
+ color: var(--bs-body-color) !important;
}
// Individual items
.bd-brand-item {
+ .bd-brand-item {
- border-top: 1px solid $white;
+ border-top: 1px solid var(--#{$prefix}border-color);
}
@include media-breakpoint-up(md) {
+ .bd-brand-item {
border-top: 0;
- border-left: 1px solid $white;
+ border-left: 1px solid var(--#{$prefix}border-color);
}
}
}
}
.btn-bd-light {
+ --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
--bs-btn-color: var(--bs-gray-600);
- --bs-btn-border-color: var(--bs-gray-400);
- --bs-btn-hover-color: var(--bd-violet);
- --bs-btn-hover-border-color: var(--bd-violet);
- --bs-btn-active-color: var(--bd-violet);
+ --bs-btn-border-color: var(--bs-border-color);
+ --bs-btn-hover-color: var(--btn-custom-color);
+ --bs-btn-hover-border-color: var(--btn-custom-color);
+ --bs-btn-active-color: var(--btn-custom-color);
--bs-btn-active-bg: var(--bs-white);
- --bs-btn-active-border-color: var(--bd-violet);
- --bs-btn-focus-border-color: var(--bd-violet);
+ --bs-btn-active-border-color: var(--btn-custom-color);
+ --bs-btn-focus-border-color: var(--btn-custom-color);
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
+ color: var(--bd-callout-color, inherit);
background-color: var(--bd-callout-bg, var(--bs-gray-100));
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
// Variations
@each $variant in $bd-callout-variants {
.bd-callout-#{$variant} {
- --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
- --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
+ --bd-callout-color: var(--bs-#{$variant}-text);
+ --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+ --bd-callout-border: var(--bs-#{$variant}-border-subtle);
}
}
display: block;
padding: .5em;
line-height: 1;
- color: $gray-900;
- background-color: $gray-100;
+ color: var(--bs-body-color);
+ background-color: var(--bs-tertiary-bg);
border: 0;
@include border-radius(.25rem);
&:hover {
- color: $primary;
+ color: var(--bs-link-color);
}
&:focus {
//
.bd-example-snippet {
- border: solid $border-color;
+ border: solid var(--bs-border-color);
border-width: 1px 0;
@include media-breakpoint-up(md) {
position: relative;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5);
- border: solid $border-color;
+ border: solid var(--bs-border-color);
border-width: 1px 0;
@include clearfix();
+ .bd-code-snippet {
@include border-top-radius(0);
- border: solid $border-color;
+ border: solid var(--bs-border-color);
border-width: 0 1px 1px;
}
display: block;
}
- > :last-child {
+ > :last-child,
+ > nav:last-child .breadcrumb {
margin-bottom: 0;
}
//
.bd-example-row [class^="col"],
-.bd-example-cssgrid .grid > * {
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
padding-top: .75rem;
padding-bottom: .75rem;
- background-color: rgba(var(--bd-violet-rgb), .1);
- border: 1px solid rgba(var(--bd-violet-rgb), .25);
+ background-color: rgba(var(--bd-violet-rgb), .15);
+ border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
.bd-example-row .row + .row,
.bd-example-row-flex-cols .row {
min-height: 10rem;
- background-color: rgba(255, 0, 0, .1);
+ background-color: rgba(var(--bd-violet-rgb), .15);
}
.bd-example-flex div {
- background-color: rgba($bd-purple, .15);
- border: 1px solid rgba($bd-purple, .15);
+ background-color: rgba(var(--bd-violet-rgb), .15);
+ border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
// Grid mixins
.ratio {
display: inline-block;
width: 10rem;
- color: $gray-600;
- background-color: $gray-100;
+ color: var(--bs-secondary-color);
+ background-color: var(--bs-tertiary-bg);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
> div {
width: 5rem;
height: 5rem;
margin: .25rem;
- background-color: #f5f5f5;
+ background-color: var(--bs-tertiary-bg);
}
}
.position-relative {
height: 200px;
- background-color: #f5f5f5;
+ background-color: var(--bs-tertiary-bg);
}
.position-absolute {
width: 2rem;
height: 2rem;
- background-color: $dark;
+ background-color: var(--bs-body-color);
@include border-radius();
}
}
position: relative;
padding: .75rem ($bd-gutter-x * .5);
margin-bottom: 1rem;
- background-color: var(--bs-gray-100);
+ background-color: var(--bs-tertiary-bg);
@include media-breakpoint-up(md) {
padding: .75rem 1.25rem;
pre code {
@include font-size(inherit);
- color: $gray-900; // Effectively the base text color
+ color: var(--bs-body-color); // Effectively the base text color
word-wrap: normal;
}
}
}
.highlight-toolbar {
- border: solid $border-color;
+ background-color: var(--bs-tertiary-bg);
+ border: solid var(--bs-border-color);
border-width: 1px 0;
+
+ .btn-clipboard {
+ margin-top: 0;
+ margin-right: 0;
+ }
}
// Override Bootstrap defaults
> .table,
> .table-responsive .table {
+ --bs-table-border-color: var(--bs-border-color);
+
+ max-width: 100%;
margin-bottom: 1.5rem;
@include font-size(.875rem);
}
}
+ th {
+ color: var(--bs-emphasis-color);
+ }
+
+ strong {
+ color: var(--bs-emphasis-color);
+ }
+
// Prevent breaking of code
// stylelint-disable-next-line selector-max-compound-selectors
th,
min-width: 280px;
}
+.table-swatches {
+ th {
+ color: var(--bs-emphasis-color);
+ }
+
+ td code {
+ white-space: nowrap;
+ }
+}
+
.bd-title {
@include font-size(3rem);
}
font-weight: 300;
}
-.bd-bg-violet {
- background-color: $bd-violet;
-}
-
.bi {
width: 1em;
height: 1em;
+ vertical-align: -.125em;
fill: currentcolor;
}
.border-lg-start {
@include media-breakpoint-up(lg) {
- border-left: $border-width solid $border-color;
+ border-left: var(--bs-border-width) solid var(--bs-border-color);
+ }
+}
+
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+ color: var(--bs-link-color);
+
+ &:hover,
+ details[open] > & {
+ color: var(--bs-link-hover-color);
+ }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+ --bs-body-color: var(--bs-white);
+ --bs-body-color-rgb: #{to-rgb($white)};
+ --bs-body-bg: var(--bs-blue);
+ --bs-body-bg-rgb: #{to-rgb($blue)};
+ --bs-tertiary-bg: #{$blue-600};
+
+ .dropdown-menu {
+ --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+ --bs-dropdown-link-active-bg: #{$blue-700};
+ }
+
+ .btn-secondary {
+ --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+ --bs-btn-border-color: #{rgba($white, .25)};
+ --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+ --bs-btn-hover-border-color: #{rgba($white, .25)};
+ --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+ --bs-btn-active-border-color: #{rgba($white, .5)};
+ --bs-btn-focus-border-color: #{rgba($white, .5)};
+ --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
}
}
+// scss-docs-end custom-color-mode
.bd-footer {
a {
- color: $gray-700;
+ color: var(--bs-body-color);
text-decoration: none;
&:hover,
&:focus {
- color: $link-color;
+ color: var(--bs-link-hover-color);
text-decoration: underline;
}
}
h1 {
@include font-size(4rem);
- line-height: 1;
}
.lead {
@include font-size(1rem);
font-weight: 400;
- color: $gray-700;
+ color: var(--bs-secondary-color);
}
.bd-code-snippet {
}
#carbonads { // stylelint-disable-line selector-max-id
- margin-right: auto;
- margin-left: auto;
+ margin-inline: auto;
}
@include media-breakpoint-up(md) {
mix-blend-mode: darken;
svg {
- filter: drop-shadow(0 1px 1px #fff);
+ filter: drop-shadow(0 1px 1px var(--bs-body-bg));
}
}
transform: scale(1.1);
}
}
+
+@if $enable-dark-mode {
+ [data-bs-theme="dark"] {
+ .masthead-followup-icon {
+ mix-blend-mode: lighten;
+ }
+ }
+}
.bd-navbar {
padding: .75rem 0;
background-color: transparent;
- background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
- box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+ &::after {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ display: block;
+ content: "";
+ background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+ }
.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
}
.navbar-brand {
+ color: $white;
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
&:hover {
}
.offcanvas-lg {
- background-color: var(--bd-violet);
+ background-color: var(--bd-violet-bg);
border-left: 0;
@include media-breakpoint-down(lg) {
}
.dropdown-menu {
- --#{$prefix}dropdown-min-width: 12rem;
- --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
- @include rfs(.875rem, --#{$prefix}dropdown-font-size);
+ --bs-dropdown-min-width: 12rem;
+ --bs-dropdown-padding-x: .25rem;
+ --bs-dropdown-padding-y: .25rem;
+ --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+ --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+ @include rfs(.875rem, --bs-dropdown-font-size);
+ @include font-size(.875rem);
+ @include border-radius(.5rem);
box-shadow: $dropdown-box-shadow;
+
+ li + li {
+ margin-top: .125rem;
+ }
+
+ .dropdown-item {
+ @include border-radius(.25rem);
+
+ &:active {
+ .bi {
+ color: inherit !important; // stylelint-disable-line declaration-no-important
+ }
+ }
+ }
+
+ .active {
+ font-weight: 600;
+
+ .bi {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+ }
}
+}
- .dropdown-item.current {
- font-weight: 600;
- background-image: escape-svg($dropdown-active-icon);
- background-repeat: no-repeat;
- background-position: right $dropdown-item-padding-x top .6rem;
- background-size: .75rem .75rem;
+@include color-mode(dark) {
+ .bd-navbar {
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
}
}
margin-left: -.25rem;
overflow-y: auto;
}
+
+ @include media-breakpoint-down(lg) {
+ .offcanvas-lg {
+ border-right-color: var(--bs-border-color);
+ box-shadow: $box-shadow-lg;
+ }
+ }
+}
+
+.bd-links-heading {
+ color: var(--bs-emphasis-color);
}
.bd-links-nav {
.bd-links-link {
padding: .1875rem .5rem;
margin-top: .125rem;
- margin-left: 1rem;
- color: rgba($black, .65);
+ margin-left: 1.125rem;
+ color: var(--bs-body-color);
text-decoration: if($link-decoration == none, null, none);
&:hover,
&:focus,
&.active {
- color: rgba($black, .85);
+ color: var(--bs-emphasis-color);
text-decoration: if($link-hover-decoration == underline, none, null);
- background-color: rgba(var(--bd-violet-rgb), .1);
+ background-color: var(--bd-sidebar-link-bg);
}
&.active {
-:root {
+:root,
+[data-bs-theme="light"] {
--base00: #fff;
--base01: #f5f5f5;
--base02: #c8c8fa;
--base0F: #333;
}
+[data-bs-theme="dark"] {
+ --base00: #282c34;
+ --base01: #353b45;
+ --base02: #3e4451;
+ --base03: #868e96;
+ --base04: #565c64;
+ --base05: #abb2bf;
+ --base06: #b6bdca;
+ --base07: #d19a66;
+ --base08: #e06c75;
+ --base09: #d19a66;
+ --base0A: #e5c07b;
+ --base0B: #98c379;
+ --base0C: #56b6c2;
+ --base0D: #61afef;
+ --base0E: #c678dd;
+ --base0F: #be5046;
+}
+
.hl { background-color: var(--base02); }
.c { color: var(--base03); }
.err { color: var(--base08); }
.language-bash,
.language-sh {
.line::before {
- color: #777;
+ color: var(--base03);
content: "$ ";
user-select: none;
}
}
.language-powershell::before {
- color: #009;
+ color: var(--base0C);
content: "PM> ";
user-select: none;
}
}
@include media-breakpoint-down(md) {
- border: 1px solid $border-color;
- @include border-radius(.4rem);
+ color: var(--bs-body-color);
+ border: 1px solid var(--bs-border-color);
+ @include border-radius(var(--bs-border-radius));
&:hover,
&:focus,
&:active,
&[aria-expanded="true"] {
color: var(--bd-violet);
- background-color: $white;
+ background-color: var(--bs-body-bg);
border-color: var(--bd-violet);
}
@include media-breakpoint-down(md) {
nav {
padding: 1.25rem;
- background-color: var(--bs-gray-100);
- border: 1px solid $border-color;
- @include border-radius(.25rem);
+ background-color: var(--bs-tertiary-bg);
+ border: 1px solid var(--bs-border-color);
+ @include border-radius(var(--bs-border-radius));
}
}
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-accent: #ffe484;
-$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
$bd-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default;
-:root {
+:root,
+[data-bs-theme="light"] {
--bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent};
--bd-teal-rgb: #{to-rgb($teal-500)};
--docsearch-primary-color: var(--bd-violet);
--docsearch-logo-color: var(--bd-violet);
+
+ --bd-violet-bg: var(--bd-violet);
+ --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+}
+
+[data-bs-theme="dark"] {
+ --bd-violet: #{mix($bd-violet, $white, 75%)};
+ --bd-violet-bg: #{$bd-violet};
+ --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
}
When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
-<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
+<div class="bd-brand-item px-2 py-5 mb-3 border rounded-3">
<img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204">
</div>
Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-3 overflow-hidden w-100 mb-3">
<div class="bd-brand-item w-100 px-2 py-5">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
</div>
Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
-<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
+<div class="bd-brand-logos d-sm-flex text-center border rounded-3 overflow-hidden w-100 mb-3">
<div class="bd-brand-item w-100 p-3">
<div class="h3">Bootstrap</div>
<strong class="text-success">Correct</strong>
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
-{{< example class="bg-light" >}}
+{{< example class="bg-body-secondary" >}}
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
+{{< callout info >}}
+**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
+{{< /callout >}}
+
{{< example >}}
{{< alerts.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
### Sass mixin
+{{< deprecated-in "5.3.0" >}}
+
Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
## Dark variant
+{{< deprecated-in "5.3.0" >}}
+
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
+{{< callout-deprecated-dark-variants "carousel" >}}
+
{{< example >}}
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" class="btn-close" disabled aria-label="Close"></button>
{{< /example >}}
-## White variant
+## Dark variant
-Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
+{{< callout info >}}
+**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
+{{< /callout >}}
+
+Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
{{< example class="bg-dark" >}}
-<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
-<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
+<div data-bs-theme="dark">
+ <button type="button" class="btn-close" aria-label="Close"></button>
+ <button type="button" class="btn-close" disabled aria-label="Close"></button>
+</div>
{{< /example >}}
## Sass
## Dark dropdowns
+{{< deprecated-in "5.3.0" >}}
+
Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
+{{< callout-deprecated-dark-variants "dropdown-menu" >}}
+
{{< example >}}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
+{{< callout info >}}
+Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
+
+- `--bs-dropdown-item-border-radius`
+{{< /callout >}}
+
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
{{< /list-group.inline >}}
{{< /example >}}
-## Contextual classes
+## Variants
+
+{{< callout info >}}
+**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
+{{< /callout >}}
Use contextual classes to style list items with a stateful background and color.
</ul>
{{< /example >}}
-Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
+### For links and buttons
+
+Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
{{< example >}}
<div class="list-group">
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
-### Mixins
+### Sass mixins
-Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
+Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
-### Loop
+### Sass loop
-Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
+Loop that generates the modifier classes with an overriding of CSS variables.
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
-<div class="bd-example bg-light">
+<div class="bd-example bg-body-tertiary">
<div class="modal position-static d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
</nav>
{{< /example >}}
-This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
+This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
### Brand
{{< example >}}
<!-- As a link -->
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
You can replace the text within the `.navbar-brand` with an `<img>`.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
Place various form controls and components within a navbar:
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
Mix and match with other components and utilities as needed.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
## Color schemes
{{< callout warning >}}
-**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
+**New dark navbars in v5.3.0 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}})
+
+---
+
+**New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
{{< /callout >}}
Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example">
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+ <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
</div>
</nav>
- <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+ <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
</div>
</nav>
- <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
+ <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
</div>
```html
-<nav class="navbar navbar-dark bg-dark">
+<nav class="navbar bg-dark" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
-<nav class="navbar navbar-dark bg-primary">
+<nav class="navbar bg-primary" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
{{< example >}}
<div class="container">
- <nav class="navbar navbar-expand-lg bg-light">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
Use any of the responsive containers to change how wide the content in your navbar is presented.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
{{< example >}}
-<nav class="navbar bg-light">
+<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
{{< /example >}}
{{< example >}}
-<nav class="navbar fixed-top bg-light">
+<nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
{{< /example >}}
{{< example >}}
-<nav class="navbar fixed-bottom bg-light">
+<nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
{{< /example >}}
{{< example >}}
-<nav class="navbar sticky-top bg-light">
+<nav class="navbar sticky-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
{{< /example >}}
{{< example >}}
-<nav class="navbar sticky-bottom bg-light">
+<nav class="navbar sticky-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
With no `.navbar-brand` shown at the smallest breakpoint:
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
With a brand name shown on the left and toggler on the right:
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
With a toggler on the left and brand name on the right:
{{< example >}}
-<nav class="navbar navbar-expand-lg bg-light">
+<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
{{< example >}}
-<nav class="navbar bg-light fixed-top">
+<nav class="navbar bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
```html
-<nav class="navbar navbar-expand-lg bg-light fixed-top">
+<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
-{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
+{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
-{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
+{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
<div class="bd-example">
- <nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
+ <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3 rounded-2">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
</li>
</ul>
</nav>
- <div class="scrollspy-example bg-light p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
+ <div class="scrollspy-example bg-body-tertiary p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
<h4 id="scrollspyHeading2">Second heading</h4>
</div>
```html
-<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
+<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
</li>
</ul>
</nav>
-<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
+<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>
<h4 id="scrollspyHeading2">Second heading</h4>
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
-{{< example class="bg-light" >}}
+{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
-{{< example class="bg-light" >}}
+{{< example >}}
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
-{{< example class="bg-light" >}}
+{{< example >}}
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Alternatively, you can also add additional controls and components to toasts.
-{{< example class="bg-light" >}}
+{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
-{{< example class="bg-light" >}}
+{{< example >}}
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
</select>
</div>
</form>
-<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
+<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
<div class="toast-container p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
-{{< example class="bg-dark bd-example-toasts p-0" >}}
+{{< example class="bd-example-toasts p-0" >}}
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
-{{< example class="bg-dark bd-example-toasts d-flex" >}}
+{{< example class="bd-example-toasts d-flex" >}}
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
-{{< example class="bg-light" >}}
+{{< example >}}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
-## Headings and paragraphs
+## Headings
-All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
+All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: .5rem` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
{{< bs-table "table" >}}
| Heading | Example |
| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
{{< /bs-table >}}
+## Paragraphs
+
+All `<p>` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing.
+
+{{< example >}}
+<p>This is an example paragraph.</p>
+{{< /example >}}
+
+## Links
+
+Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
+
+{{< example >}}
+<a href="#">This is an example link</a>
+{{< /example >}}
+
+As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
+
+{{< example >}}
+<a href="#" style="--bs-link-opacity: .5">This is an example link</a>
+{{< /example >}}
+
+
+Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
+
+{{< example >}}
+<a>This is a placeholder link</a>
+{{< /example >}}
+
## Horizontal rules
The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
Use contextual classes to color tables, table rows or individual cells.
+{{< callout info >}}
+**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won't see color mode adaptive styling until v6.
+{{< /callout >}}
+
<div class="bd-example">
<table class="table">
<thead>
--- /dev/null
+---
+layout: docs
+title: Color modes
+description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
+group: customize
+toc: true
+added: "5.3"
+---
+
+## Dark mode
+
+**Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
+
+Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#sass-usage). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
+
+## Example
+
+For example, to change the color mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
+
+{{< example class="d-flex justify-content-between" >}}
+<div class="dropdown" data-bs-theme="light">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
+ Default dropdown
+ </button>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
+ <li><a class="dropdown-item active" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+</div>
+
+<div class="dropdown" data-bs-theme="dark">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
+ Dark dropdown
+ </button>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
+ <li><a class="dropdown-item active" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+</div>
+{{< /example >}}
+
+## How it works
+
+- As shown above, color mode styles are controlled by the `data-bs-theme` attribute. This attribute can be applied to the `<html>` element, or to any other element or Bootstrap component. If applied to the `<html>` element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.
+
+- For each color mode you wish to support, you'll need to add new overrides for the shared global CSS variables. We do this already in our `_root.scss` stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
+
+ ```scss
+ // Color mode variables in _root.scss
+ @include color-mode(dark) {
+ // CSS variable overrides here...
+ }
+ ```
+
+- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
+
+## Nesting color modes
+
+Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode.
+
+For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`.
+
+{{< example class="p-0" >}}
+<div data-bs-theme="dark" class="p-3 text-body bg-body">
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item"><a href="#">Color modes</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Dark</li>
+ </ol>
+ </nav>
+
+ <p>This should be shown in a <strong>dark</strong> theme at all times.</p>
+
+ <div class="progress mb-4">
+ <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <div class="dropdown mb-4">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
+ Dark dropdown
+ </button>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
+ <li><a class="dropdown-item active" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+
+ <div data-bs-theme="light" class="p-3 text-body bg-body rounded">
+ <nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item"><a href="#">Color modes</a></li>
+ <li class="breadcrumb-item"><a href="#">Dark</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Light</li>
+ </ol>
+ </nav>
+
+ <p>This should be shown in a <strong>light</strong> theme at all times.</p>
+
+ <div class="progress mb-4">
+ <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+
+ <div class="dropdown">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
+ Light dropdown
+ </button>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
+ <li><a class="dropdown-item active" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+{{< /example >}}
+
+## Usage
+
+### Enable dark mode
+
+Enable the built in dark color mode across your entire project by adding the `data-bs-theme="dark"` attribute to the `<html>` element. This will apply the dark color mode to all components and elements, other than those with a specific `data-bs-theme` attribute applied. Building on the [quick start template]({{< docsref "/getting-started/introduction#quick-start" >}}):
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Bootstrap demo</title>
+ <link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
+ </head>
+ <body data-bs-theme="dark">
+ <h1>Hello, world!</h1>
+ <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
+ </body>
+</html>
+```
+
+Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. [Learn more in the JavaScript section.](#javascript)
+
+### Building with Sass
+
+Our new dark mode option is available to use for all users of Bootstrap, but it's controlled via data attributes instead of media queries and does not automatically toggle your project's color mode. You can disable our dark mode entirely via Sass by changing `@enable-dark-mode` to `false`.
+
+We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
+
+In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output.
+
+```scss
+@color-mode-type: data !default;
+
+@include color-mode(dark) {
+ .element {
+ color: var(--bs-primary-text);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+}
+```
+
+Outputs to:
+
+```css
+[data-bs-theme=dark] .element {
+ color: var(--bs-primary-text);
+ background-color: var(--bs-primary-bg-subtle);
+}
+```
+
+And when setting to `media-query`:
+
+```scss
+@color-mode-type: media-query;
+
+@include color-mode(dark) {
+ .element {
+ color: var(--bs-primary-text);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+}
+```
+
+Outputs to:
+
+```css
+@media (prefers-color-scheme: dark) {
+ .element {
+ color: var(--bs-primary-text);
+ background-color: var(--bs-primary-bg-subtle);
+ }
+}
+```
+
+## Custom color modes
+
+While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
+
+For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
+
+{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
+
+<div class="bd-example text-body bg-body" data-bs-theme="blue">
+ <div class="h4">Example blue theme</div>
+ <p>Some paragraph text to show how the blue theme might look with written copy.</p>
+
+ <hr class="my-4">
+
+ <div class="dropdown">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
+ Dropdown button
+ </button>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
+ <li><a class="dropdown-item active" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Action</a></li>
+ <li><a class="dropdown-item" href="#">Another action</a></li>
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="#">Separated link</a></li>
+ </ul>
+ </div>
+</div>
+
+```html
+<div data-bs-theme="blue">
+ ...
+</div>
+```
+
+## JavaScript
+
+To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode.
+
+Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
+
+{{< example lang="js" show_preview="false" >}}
+{{< js.inline >}}
+{{- readFile (path.Join "site/assets/js/color-modes/index.js") -}}
+{{< /js.inline >}}
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#sass-usage) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes.
+
+{{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}}
+
+### Sass variables
+
+CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in `_variables-dark.scss`. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
+
+{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
+
+### Sass mixin
+
+Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#sass-usage) for more details.
+
+{{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}}
toc: true
---
-## Theme colors
+## Colors
+
+{{< added-in "5.3.0" >}}
+
+Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+
+Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+
+{{< callout warning>}}
+**Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
+{{< /callout >}}
+
+<table class="table table-swatches">
+ <thead>
+ <tr>
+ <th style="width: 340px;">Description</th>
+ <th style="width: 200px;" class="ps-0">Swatch</th>
+ <th>Variables</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td rowspan="2">
+ {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="2">
+ {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="2">
+ {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-primary">Primary</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-primary-bg-subtle); --bs-border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-primary-text`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-success">Success</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-success-bg-subtle); --bs-border-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-success-text`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-danger">Danger</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-danger-bg-subtle); --bs-border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-danger-text`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-warning">Warning</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-warning-bg-subtle); --bs-border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-warning-text`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-info">Info</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-info-bg-subtle); --bs-border-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-info-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-info-text`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-light border">Light</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-light-bg-subtle); --bs-border-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-light-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-light-text`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td rowspan="4">
+ {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
+ </td>
+ <td class="ps-0">
+ <div class="p-3 rounded-2 text-bg-dark border">Dark</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-dark-bg-subtle); --bs-border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Background subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Border subtle</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-dark-text); color: var(--bs-body-bg);">Text</div>
+ </td>
+ <td>
+ {{< markdown >}}`--bs-dark-text`{{< /markdown >}}
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+### Using the new colors
+
+These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color's associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
+
+{{< example >}}
+<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
+ Example element with utilities
+</div>
+{{< /example >}}
+
+### Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
- <div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
+ <div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
-## All colors
+### All colors
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
+### Default
+
+These CSS variables are available everywhere, regardless of color mode.
+
```css
{{< root.inline >}}
{{- $css := readFile "dist/css/bootstrap.css" -}}
| Variable | Values | Description |
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
+| `$enable-dark-mode` | `true` (default) or `false` | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
// 2. Include any default variable overrides here
-// 3. Include remainder of required Bootstrap stylesheets
+// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Include any default map overrides here
// Required
@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
### Color schemes
-A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
+A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
## Example
+Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.
+
{{< example >}}
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
</datalist>
{{< /example >}}
-## Sass
+## CSS
### Variables
+Form controls make use of a small amount of CSS variables to support custom styling across color modes.
+
+{{< scss-docs name="form-control-vars" file="scss/_root.scss" >}}
+
+### Sass variables
+
`$input-*` are shared across most of our form controls (and not buttons).
{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
<details>
-<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
+<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary>
{{< markdown >}}
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
{{< example >}}
<div class="vstack gap-3">
- <div class="bg-light border">First item</div>
- <div class="bg-light border">Second item</div>
- <div class="bg-light border">Third item</div>
+ <div class="bg-body-tertiary border">First item</div>
+ <div class="bg-body-tertiary border">Second item</div>
+ <div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
{{< example >}}
<div class="hstack gap-3">
- <div class="bg-light border">First item</div>
- <div class="bg-light border">Second item</div>
- <div class="bg-light border">Third item</div>
+ <div class="bg-body-tertiary border">First item</div>
+ <div class="bg-body-tertiary border">Second item</div>
+ <div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
{{< example >}}
<div class="hstack gap-3">
- <div class="bg-light border">First item</div>
- <div class="bg-light border ms-auto">Second item</div>
- <div class="bg-light border">Third item</div>
+ <div class="bg-body-tertiary border">First item</div>
+ <div class="bg-body-tertiary border ms-auto">Second item</div>
+ <div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
{{< example >}}
<div class="hstack gap-3">
- <div class="bg-light border">First item</div>
- <div class="bg-light border ms-auto">Second item</div>
+ <div class="bg-body-tertiary border">First item</div>
+ <div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="vr"></div>
- <div class="bg-light border">Third item</div>
+ <div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
{{< /example >}}
{{< example >}}
-<div class="row g-0 bg-light position-relative">
+<div class="row g-0 bg-body-secondary position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
</div>
{{< example >}}
<div class="hstack gap-3">
- <div class="bg-light border">First item</div>
- <div class="bg-light border ms-auto">Second item</div>
+ <div class="bg-body-tertiary border">First item</div>
+ <div class="bg-body-tertiary border ms-auto">Second item</div>
<div class="vr"></div>
- <div class="bg-light border">Third item</div>
+ <div class="bg-body-tertiary border">Third item</div>
</div>
{{< /example >}}
### Vertical alignment
+Change the vertical alignment with any of the responsive `align-items-*` classes.
+
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container text-center">
<div class="row align-items-start">
One of three columns
</div>
</div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
<div class="row align-items-center">
<div class="col">
One of three columns
One of three columns
</div>
</div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
+<div class="container text-center">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
{{< /example >}}
+Or, change the alignment of each column individually with any of the responsive `.align-self-*` classes.
+
{{< example class="bd-example-row bd-example-row-flex-cols" >}}
<div class="container text-center">
<div class="row">
### Order classes
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
{{< example class="bd-example-row" >}}
<div class="container text-center">
The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
-{{< example >}}
-<div class="col-3 bg-light p-3 border">
+{{< example class="bd-example-row" >}}
+<div class="col-3 p-3 mb-2">
.col-3: width of 25%
</div>
-<div class="col-sm-9 bg-light p-3 border">
+
+<div class="col-sm-9 p-3">
.col-sm-9: width of 75% above sm breakpoint
</div>
{{< /example >}}
`.gx-*` classes can be used to control the horizontal gutter widths. The `.container` or `.container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
-{{< example >}}
+{{< example class="bd-example-cols" >}}
<div class="container px-4 text-center">
<div class="row gx-5">
<div class="col">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
</div>
</div>
An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
-{{< example >}}
+{{< example class="bd-example-cols" >}}
<div class="container overflow-hidden text-center">
<div class="row gx-5">
<div class="col">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
</div>
</div>
`.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
-{{< example >}}
+{{< example class="bd-example-cols" >}}
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
</div>
</div>
`.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
-{{< example >}}
+{{< example class="bd-example-cols" >}}
<div class="container text-center">
<div class="row g-2">
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
- <div class="p-3 border bg-light">Custom column padding</div>
+ <div class="p-3">Custom column padding</div>
</div>
</div>
</div>
Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
-{{< example >}}
+{{< example class="bd-example-cols" >}}
<div class="container text-center">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
<div class="col">
- <div class="p-3 border bg-light">Row column</div>
+ <div class="p-3">Row column</div>
</div>
</div>
</div>
toc: true
---
+## v5.3.0
+
+<hr class="mb-4">
+
+### Color modes!
+
+Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}).
+
+- **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference.
+
+ <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated.
+
+- **New extended color system.** We've added new theme colors (but not in `$theme-colors)`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities.
+
+- We've also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities.
+
+- Adds new `_variables-dark.scss` stylesheet to house dark-mode specific overrides. This stylesheet should be imported immediately after the existing `_variables.scss` file in your import stack.
+
+ ```diff
+ diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
+ index 8f8296def..449d70487 100644
+ --- a/scss/bootstrap.scss
+ +++ b/scss/bootstrap.scss
+ @@ -6,6 +6,7 @@
+ // Configuration
+ @import "functions";
+ @import "variables";
+ +@import "variables-dark";
+ @import "maps";
+ @import "mixins";
+ @import "utilities";
+ ```
+
+### CSS variables
+
+- Restores CSS variables for breakpoints, though we don't use them in our media queries as they're not supported. However, these can be useful in JS-specific contexts.
+
+- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
+
+- Adds additional variables for alerts, `.btn-close`, and `.offcanvas`.
+
+- The `--bs-heading-color` variable is back with an update and dark mode support. First, we now check for a `null` value on the associated Sass variable, `$headings-color`, before trying to output the CSS variable, so by default it's not present in our compiled CSS. Second, we use the CSS variable with a fallback value, `inherit`, allowing the original behavior to persist, but also allowing for overrides.
+
+- Converts links to use CSS variables for styling `color`, but not `text-decoration`. Colors are now set with `--bs-link-color-rgb` and `--bs-link-opacity` as `rgba()` color, allowing you to customize the translucency with ease. The `a:hover` pseudo-class now overrides `--bs-link-color-rgb` instead of explicitly setting the `color` property.
+
+- `--bs-border-width` is now being used in more components for greater control over default global styling.
+
+- Adds new root CSS variables for our `box-shadow`s, including `--bs-box-shadow`, `--bs-box-shadow-sm`, `--bs-box-shadow-lg`, and `--bs-box-shadow-inset`.
+
+### Components
+
+#### Alert
+
+- Alert variants are now styled via CSS variables.
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
+
+#### List group
+
+- List group item variants are now styled via CSS variables.
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
+
+#### Close button
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/close-button#dark-variant" >}})
+
+#### Navbar
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.navbar-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the navbar or any parent element. [See the docs for updated examples.]({{< docsref "/components/navbar#color-schemes" >}})
+
+### Forms
+
+- `.form-control` is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.
+
+- `.form-check` and `.form-switch` components are now built with CSS variables for setting the `background-image`. The usage here differs from other components in that the various focus, active, etc states for each component aren't set on the base class. Instead, the states override one variable (e.g., `--bs-form-switch-bg`).
+
+- Floating form labels now have a `background-color` to fix support for `<textarea>` elements. Additional changes have been made to also support disabled states and more.
+
+- Fixed display of date and time inputs in WebKit based browsers.
+
+### Utilities
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be be replaced by `.text-body-secondary` in v6.
+
+ With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
+
+- Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._
+
+- Adds new `.fw-medium` utility.
+
+- Added new [`.z-*` utilities]({{< docsref "/utilities/z-index" >}}) for `z-index`.
+
+- [Box shadow utilities]({{< docsref "/utilities/shadows" >}}) (and Sass variables) have been updated for dark mode. They now use `--bs-body-color-rgb` to generate the `rgba()` color values, allowing them to easily adapt to color modes based on the specified foreground color.
+
+For a complete list of changes, [see the v5.3.0 project on GitHub](https://github.com/twbs/bootstrap/projects/).
+
## v5.2.0
<hr class="mb-4">
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
{{- end -}}
{{< /colors.inline >}}
-<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
+
+<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
+<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
+
+<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
-<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>
{{< /example >}}
## Background gradient
{{< border.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="border border-{{ .name }}"></span>
+<span class="border border-{{ .name }}-subtle"></span>
{{- end -}}
{{< /border.inline >}}
<span class="border border-white"></span>
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p>
+<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
{{- end -}}
{{< /colors.inline >}}
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
+
+<p class="text-body-emphasis">.text-body-emphasis</p>
+<p class="text-body-secondary">.text-body-secondary</p>
+<p class="text-body-tertiary">.text-body-tertiary</p>
+
<p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50">.text-black-50</p>
+<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
{{< /example >}}
**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
{{< /callout >}}
+{{< callout warning >}}
+**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
+{{< /callout >}}
+
{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
<div class="bd-example d-md-flex">
- <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+ <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
</div>
- <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+ <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
</div>
- <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
+ <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
</div>
- <div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;">
+ <div class="overflow-scroll p-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
</div>
</div>
Adjust the `overflow-x` property to affect the overflow of content horizontally.
<div class="bd-example d-md-flex">
- <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
+ <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
<div><code>.overflow-x-auto</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
- <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+ <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-hidden</code> example</div>
<div>on an element with set width and height dimensions.</div>
</div>
- <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+ <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-visible</code> example </div>
<div>on an element with set width and height dimensions.</div>
</div>
- <div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+ <div class="overflow-x-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-scroll</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
Adjust the `overflow-y` property to affect the overflow of content vertically.
<div class="bd-example d-md-flex">
- <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-auto</code> example on an element with set width and height dimensions.
</div>
- <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
</div>
- <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-visible</code> example on an element with set width and height dimensions.
</div>
- <div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
+ <div class="overflow-y-scroll p-3 bg-body-tertiary w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
</div>
</div>
Here are some real life examples of these classes:
-{{< example class="bd-example-position-examples d-flex justify-content-around" >}}
+{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
-<button type="button" class="btn btn-dark position-relative">
- Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="
#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
-</button>
+<div class="position-relative py-2 px-4 text-bg-dark border border-dark rounded-pill">
+ Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="
var(--bs-dark)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+</div>
<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).
-{{< example >}}
-<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
-<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
-<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
-<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
+{{< example class="overflow-hidden" >}}
+<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
{{< /example >}}
## Sass
Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
-{{< example >}}
-<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
-<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
-<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
-<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
-<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
+{{< example class="bd-example-flex" >}}
+<div class="w-25 p-3">Width 25%</div>
+<div class="w-50 p-3">Width 50%</div>
+<div class="w-75 p-3">Width 75%</div>
+<div class="w-100 p-3">Width 100%</div>
+<div class="w-auto p-3">Width auto</div>
{{< /example >}}
{{< example >}}
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
-{{< example >}}
-<div class="grid gap-3" >
- <div class="p-2 bg-light border g-col-6">Grid item 1</div>
- <div class="p-2 bg-light border g-col-6">Grid item 2</div>
- <div class="p-2 bg-light border g-col-6">Grid item 3</div>
- <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-3">
+ <div class="p-2 g-col-6">Grid item 1</div>
+ <div class="p-2 g-col-6">Grid item 2</div>
+ <div class="p-2 g-col-6">Grid item 3</div>
+ <div class="p-2 g-col-6">Grid item 4</div>
</div>
{{< /example >}}
`row-gap` sets the vertical space between children items in the specified container.
-{{< example >}}
-<div class="grid gap-0 row-gap-3" >
- <div class="p-2 bg-light border g-col-6">Grid item 1</div>
- <div class="p-2 bg-light border g-col-6">Grid item 2</div>
- <div class="p-2 bg-light border g-col-6">Grid item 3</div>
- <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-0 row-gap-3">
+ <div class="p-2 g-col-6">Grid item 1</div>
+ <div class="p-2 g-col-6">Grid item 2</div>
+ <div class="p-2 g-col-6">Grid item 3</div>
+ <div class="p-2 g-col-6">Grid item 4</div>
</div>
{{< /example >}}
`column-gap` sets the horizontal space between children items in the specified container.
-{{< example >}}
-<div class="grid gap-0 column-gap-3" >
- <div class="p-2 bg-light border g-col-6">Grid item 1</div>
- <div class="p-2 bg-light border g-col-6">Grid item 2</div>
- <div class="p-2 bg-light border g-col-6">Grid item 3</div>
- <div class="p-2 bg-light border g-col-6">Grid item 4</div>
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid gap-0 column-gap-3">
+ <div class="p-2 g-col-6">Grid item 1</div>
+ <div class="p-2 g-col-6">Grid item 2</div>
+ <div class="p-2 g-col-6">Grid item 3</div>
+ <div class="p-2 g-col-6">Grid item 4</div>
</div>
{{< /example >}}
Prevent text from wrapping with a `.text-nowrap` class.
{{< example >}}
-<div class="text-nowrap bg-light border" style="width: 8rem;">
+<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>
{{< /example >}}
- title: Sass
- title: Options
- title: Color
+ - title: Color modes
- title: Components
- title: CSS variables
- title: Optimize
contrast_color: dark
- name: dark
hex: "#343a40"
+ contrast_color: white
<!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="auto">
<head>
{{ partial "header" . }}
</head>
</div>
{{ if (eq .Page.Params.toc true) }}
- <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
- <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+ <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary">
+ <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
</button>
-<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
+<header class="navbar navbar-expand-lg bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
{{- if eq .Layout "docs" }}
<div class="bd-navbar-toggle">
<small class="d-lg-none ms-2">Open Collective</small>
</a>
</li>
- <li class="nav-item py-1 col-12 col-lg-auto">
+ <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
- <hr class="d-lg-none text-white-50">
+ <hr class="d-lg-none my-2 text-white-50">
</li>
+
{{ partial "docs-versions" . }}
+
+ <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+ <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+ <hr class="d-lg-none my-2 text-white-50">
+ </li>
+
+ <li class="nav-item dropdown">
+ <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+ id="bd-theme"
+ type="button"
+ aria-expanded="false"
+ data-bs-toggle="dropdown"
+ data-bs-display="static">
+ <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
+ <span class="d-lg-none ms-2">Toggle theme</span>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
+ <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
+ Light
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
+ <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
+ Dark
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ <li>
+ <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
+ <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
+ Auto
+ <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+ </button>
+ </li>
+ </ul>
+ </li>
</ul>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">v5 releases</h6></li>
<li>
- <a class="dropdown-item current" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
+ <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x)
+ <svg class="bi"><use xlink:href="#check2"></use></svg>
</a>
</li>
<li>
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
- <div class="container py-4 py-md-5 px-4 px-md-3">
+<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
+ <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
<div class="row">
<div class="col-lg-3 mb-3">
- <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
+ <a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
<span class="fs-5">Bootstrap</span>
</a>
- <ul class="list-unstyled small text-muted">
+ <ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
+{{- $colorModeJS := resources.Get "js/color-modes/index.js" }}
+<script src="{{ $colorModeJS.Permalink | relURL }}"></script>
+
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
<span class="text-muted">CSS variables, responsive offcanvas, new utilities, and more!</span>
</a>
<img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-block mx-auto mb-3">
- <h1 class="mb-3 fw-semibold">Build fast, responsive sites with Bootstrap</h1>
+ <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with Bootstrap</h1>
<p class="lead mb-4">
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
</p>
<symbol id="chevron-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
</symbol>
+ <symbol id="circle-half" viewBox="0 0 16 16">
+ <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+ </symbol>
<symbol id="clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
</symbol>
+ <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+ <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+ <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+ </symbol>
<symbol id="palette2" viewBox="0 0 16 16">
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
<symbol id="plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
+ <symbol id="sun-fill" viewBox="0 0 16 16">
+ <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+ </symbol>
<symbol id="three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</symbol>
{{- $version := .Get 0 -}}
-<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v{{ $version }}</small>
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v{{ $version }}</small>
--- /dev/null
+{{- /* Outputs message about dark mode component variants being deprecated in v5.3. */ -}}
+
+{{- $component := .Get 0 -}}
+
+<div class="bd-callout bd-callout-warning">
+ <p>
+ <strong>Heads up!</strong> Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of adding <code>.{{ $component }}-dark</code>, set <code>data-bs-theme="dark"</code> on the root element, a parent wrapper, or the component itself.
+ </p>
+</div>
--- /dev/null
+{{- /* Outputs badge to identify the version something was deprecated */ -}}
+
+{{- $version := .Get 0 -}}
+
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v{{ $version }}</small>
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
- <div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
+ <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
projects / thirdparty / bootstrap.git / commitdiff
