},
{
"path": "./dist/css/bootstrap.css",
- "maxSize": "48.75 kB"
+ "maxSize": "49.25 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
- "maxSize": "45.25 kB"
+ "maxSize": "46.0 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
@use "functions" as *;
@use "mixins/border-radius" as *;
+@use "mixins/mask-icon" as *;
@use "mixins/transition" as *;
@use "mixins/tokens" as *;
--breadcrumb-bg: transparent,
--breadcrumb-border-radius: var(--radius-5),
--breadcrumb-divider-color: var(--fg-4),
+ --breadcrumb-divider-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 2l4 6-4 6'/></svg>"))},
+ --breadcrumb-divider-width: .375rem,
+ --breadcrumb-divider-height: .75rem,
--breadcrumb-link-padding-x: .75rem,
--breadcrumb-link-padding-y: .25rem,
--breadcrumb-link-color: var(--fg-3),
.breadcrumb-divider {
margin-inline: calc(var(--breadcrumb-link-padding-x) / 4);
color: var(--breadcrumb-divider-color);
+
+ // Render a default chevron, painted with `currentcolor` via a mask, when the
+ // divider has no explicit content. Any content (an inline SVG, a text
+ // character, etc.) added to the element overrides this default.
+ &:empty::before {
+ display: block;
+ width: var(--breadcrumb-divider-width);
+ height: var(--breadcrumb-divider-height);
+ content: "";
+ background-color: currentcolor;
+ @include mask-icon(var(--breadcrumb-divider-icon));
+ }
}
.breadcrumb-link {
@use "functions" as *;
@use "mixins/transition" as *;
@use "mixins/color-mode" as *;
+@use "mixins/mask-icon" as *;
@use "mixins/tokens" as *;
$carousel-tokens: () !default;
--carousel-caption-padding-y: 1.25rem,
--carousel-caption-spacer: 1.25rem,
--carousel-control-icon-width: 2rem,
- --carousel-control-prev-icon
-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>"),
- --carousel-control-next-icon
-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>"),
+ --carousel-control-prev-icon
: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>"),
+ --carousel-control-next-icon
: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>"),
--carousel-transition-duration: .6s,
--carousel-transition: transform .6s ease-in-out,
),
background-image: if(sass($enable-gradients): linear-gradient(270deg, rgb(0 0 0 / .25), rgb(0 0 0 / .001)); else: null);
}
- // Icons for within
+ // Icons for within, rendered via CSS mask so they inherit a configurable color
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: var(--carousel-control-icon-width);
height: var(--carousel-control-icon-width);
- background-repeat: no-repeat;
- background-position: 50%;
- background-size: 100% 100%;
+ background-color: var(--carousel-control-color);
+ @include mask-icon($size: 100% 100%, $position: 50%);
}
.carousel-control-prev-icon {
- background-image: var(--carousel-control-prev-icon-bg);
+ mask-image: var(--carousel-control-prev-icon);
}
[dir="rtl"] .carousel-control-prev-icon {
- background-image: var(--carousel-control-next-icon-bg);
+ mask-image: var(--carousel-control-next-icon);
}
.carousel-control-next-icon {
- background-image: var(--carousel-control-next-icon-bg);
+ mask-image: var(--carousel-control-next-icon);
}
[dir="rtl"] .carousel-control-next-icon {
- background-image: var(--carousel-control-prev-icon-bg);
+ mask-image: var(--carousel-control-prev-icon);
}
// Optional indicator pips/controls
@use "config" as *;
@use "mixins/border-radius" as *;
@use "mixins/focus-ring" as *;
+@use "mixins/mask-icon" as *;
@use "mixins/tokens" as *;
$datepicker-tokens: () !default;
position: absolute;
inset: .25rem;
content: "";
- background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%236b7280' d='M12 16c-.3 0-.5-.1-.7-.3l-6-6c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l5.3 5.3 5.3-5.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-6 6c-.2.2-.4.3-.7.3'/></svg>");
- background-repeat: no-repeat;
- background-position: center;
+ background-color: var(--datepicker-color);
+ @include mask-icon(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 16c-.3 0-.5-.1-.7-.3l-6-6c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l5.3 5.3 5.3-5.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-6 6c-.2.2-.4.3-.7.3'/></svg>"), $size: null);
}
&:hover {
@include dialog-header(var(--drawer-padding-y) var(--drawer-padding-x));
.btn-close {
- padding: calc(var(--drawer-padding-y) * .5) calc(var(--drawer-padding-x) * .5);
+ margin-block: calc(-.5 * var(--drawer-padding-y));
margin-inline-start: auto;
- margin-inline-end: calc(-.5 * var(--drawer-padding-x));
- margin-top: calc(-.5 * var(--drawer-padding-y));
- margin-bottom: calc(-.5 * var(--drawer-padding-y));
}
}
@use "functions" as *;
@use "layout/breakpoints" as *;
@use "mixins/box-shadow" as *;
+@use "mixins/mask-icon" as *;
@use "mixins/tokens" as *;
@use "mixins/transition" as *;
--navbar-toggler-border-color: color-mix(in oklch, var(--fg-body) 15%, transparent),
--navbar-toggler-border-radius: var(--radius-5),
--navbar-toggler-transition: box-shadow .15s ease-in-out,
+ --navbar-toggler-icon-size: 1.25rem,
+ --navbar-toggler-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path stroke='black' stroke-linecap='round' stroke-width='1' d='M1 3.5h14M1 8h14M1 12.5h14'/></svg>"))},
),
$navbar-tokens
);
--btn-hover-bg: var(--bg-2);
}
+ // Hamburger icon, rendered via CSS mask so it inherits the navbar color
+ .navbar-toggler-icon {
+ display: inline-block;
+ width: var(--navbar-toggler-icon-size);
+ height: var(--navbar-toggler-icon-size);
+ background-color: currentcolor;
+ @include mask-icon(var(--navbar-toggler-icon));
+ }
+
// scss-docs-start navbar-expand-loop
// Generate series of responsive `.navbar-expand` classes for configuring
// where your navbar collapses and expands. Uses container queries so the
@use "../functions" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/focus-ring" as *;
+@use "../mixins/mask-icon" as *;
@use "../mixins/tokens" as *;
$btn-close-tokens: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$btn-close-tokens: defaults(
(
- --btn-close-size: 1.25rem,
+ --btn-close-size: 1.5rem,
--btn-close-color: inherit,
+ --btn-close-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z'/></svg>"))},
--btn-close-opacity: .5,
--btn-close-hover-opacity: .75,
--btn-close-focus-opacity: .85,
height: var(--btn-close-size);
padding: 0;
color: var(--btn-close-color);
- background: transparent; // for button elements
+ background-color: currentcolor;
border: 0; // for button elements
@include border-radius(var(--radius-5));
opacity: var(--btn-close-opacity);
-
- > svg {
- display: block;
- width: 100%;
- height: 100%;
- fill: currentcolor;
- }
+ @include mask-icon(var(--btn-close-icon));
// Override <a>'s hover style
&:hover {
@use "../functions" as *;
@use "../mixins/focus-ring" as *;
+@use "../mixins/mask-icon" as *;
@use "../mixins/tokens" as *;
// stylelint-disable custom-property-no-missing-var-function
--check-bg: var(--bg-body),
--check-border-color: var(--border-color),
--check-border-radius: .375rem,
+ --check-icon-checked: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/></svg>"))},
+ --check-icon-indeterminate: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>"))},
--check-checked-bg: var(--control-checked-bg),
--check-checked-border-color: var(--control-checked-border-color),
--check-indeterminate-bg: var(--control-checked-bg),
// stylelint-enable custom-property-no-missing-var-function
@layer forms {
+ // The class lives on the `<input>` itself; `appearance: none` controls render
+ // pseudo-elements, so the mark is drawn directly on the input — no wrapper.
.check {
@include tokens($check-tokens);
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr));
+ position: relative;
+ flex-shrink: 0;
+ width: var(--check-size);
+ height: var(--check-size);
margin-block: var(--check-margin-block);
+ appearance: none;
+ // later: maybe set a tertiary bg color?
+ background-color: var(--theme-bg, var(--check-bg));
+ border: 1px solid var(--theme-bg, var(--check-border-color));
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: .3em;
- :where(svg, input) {
- flex-shrink: 0;
- grid-row-start: 1;
- grid-column-start: 1;
- width: var(--check-size);
- height: var(--check-size);
- }
-
- :where(input) {
- appearance: none;
- // later: maybe set a tertiary bg color?
- background-color: var(--theme-bg, var(--check-bg));
- border: 1px solid var(--theme-bg, var(--check-border-color));
- // stylelint-disable-next-line property-disallowed-list
- border-radius: .3em;
- }
-
- :where(input:checked, input:indeterminate) {
+ &:checked,
+ &:indeterminate {
background-color: var(--theme-bg, var(--check-checked-bg));
border-color: var(--theme-bg, var(--check-checked-border-color));
+
+ // Check/indeterminate mark, overlaid on the input and rendered via a CSS
+ // mask so it inherits the contrast color without an inline SVG.
+ &::before {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ content: "";
+ background-color: var(--theme-contrast, var(--primary-contrast));
+ @include mask-icon();
+ }
}
- :where(input:focus-visible) {
+ &:checked::before { mask-image: var(--check-icon-checked); }
+ &:indeterminate::before { mask-image: var(--check-icon-indeterminate); }
+
+ &:focus-visible {
@include focus-ring(true);
--focus-ring-offset: -1px;
}
- &:has(input:checked) .checked,
- &:has(input:indeterminate) .indeterminate {
- display: block;
- color: var(--theme-contrast, var(--primary-contrast));
- stroke: currentcolor;
- }
-
- &:has(input:disabled) {
+ &:disabled {
--check-bg: var(--check-disabled-bg);
~ label {
cursor: default;
}
}
- &:has(input:disabled:checked) {
+ &:disabled:checked {
opacity: var(--check-disabled-opacity);
}
-
- :where(svg) {
- pointer-events: none;
- }
-
- :where(svg path) {
- display: none;
- }
}
.check-sm {
}
// Checkbox — control-level styling (border, checked bg, focus ring).
- .check input {
+ .check {
@include form-validation-state-selector($state) {
--check-border-color: var(--#{$theme}-border);
--check-checked-bg: var(--#{$theme}-bg);
}
// Checkbox — label color and feedback display via .form-field:has().
- .form-field:has(.check input.is-#{$state}) {
+ .form-field:has(.check.is-#{$state}) {
label { color: var(--#{$theme}-fg); }
.#{$state}-feedback,
}
@if $state == "invalid" {
- [data-bs-validate] .form-field:has(.check input:user-invalid) {
+ [data-bs-validate] .form-field:has(.check:user-invalid) {
label { color: var(--#{$theme}-fg); }
.invalid-feedback,
.invalid-tooltip { display: block; }
}
} @else if $state == "valid" {
- [data-bs-validate~="valid"] .form-field:has(.check input:user-valid) {
+ [data-bs-validate~="valid"] .form-field:has(.check:user-valid) {
label { color: var(--#{$theme}-fg); }
.valid-feedback,
--- /dev/null
+// Mask icon
+//
+// Renders an SVG icon via a CSS mask so the shape is painted with the
+// element's `background-color` and therefore inherits theme/dark-mode color.
+// Set `background-color` on the element itself; pass `null` for `$icon` when
+// the mask image is applied conditionally (e.g. per state or direction).
+
+// scss-docs-start mask-icon-mixin
+@mixin mask-icon($icon: null, $size: contain, $position: center) {
+ @if $icon != null {
+ mask-image: $icon;
+ }
+ mask-repeat: no-repeat;
+ @if $position != null {
+ mask-position: $position;
+ }
+ @if $size != null {
+ mask-size: $size;
+ }
+}
+// scss-docs-end mask-icon-mixin
@forward "backdrop";
@forward "caret";
@forward "form-validation";
+@forward "mask-icon";
// Skins
@forward "border-radius";
<strong>Album</strong>
</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
</div>
</nav>
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 md:mb-0">
</select>
</div>
<div class="mb-3 form-field">
- <div class="check">
- <input type="checkbox" id="exampleCheck1">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="exampleCheck1" class="check">
<label for="exampleCheck1">Check me out</label>
</div>
<fieldset class="mb-3">
</select>
</div>
<div class="mb-3 form-field">
- <div class="check">
- <input type="checkbox" id="disabledFieldsetCheck" disabled>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="disabledFieldsetCheck" class="check" disabled>
<label for="disabledFieldsetCheck">
Can't check this
</label>
</div>
<div class="col-12">
<div class="form-field">
- <div class="check">
- <input class="is-invalid" type="checkbox" value="" id="invalidCheck3" required>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input class="check is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label for="invalidCheck3">
Agree to terms and conditions
</label>
<img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" style="filter: invert(1) grayscale(100%) brightness(200%);">
</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<hr class="my-4">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="same-address">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="same-address" class="check">
<label for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="save-info">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="save-info" class="check">
<label for="save-info">Save this information for next time</label>
</div>
<div class="container-fluid">
<a class="navbar-brand" href="#">Drawer navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="navbar-collapse drawer-collapse" id="navbarsExampleDefault">
<label for="floatingPassword">Password</label>
</div>
<div class="form-field mb-3">
- <div class="check">
- <input type="checkbox" value="remember-me" id="heroRememberMe">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" value="remember-me" id="heroRememberMe" class="check">
<label for="heroRememberMe">Remember me</label>
</div>
<button class="w-100 btn-solid theme-primary btn-lg" type="submit">Sign up</button>
<div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
<div class="list-group">
<label class="list-group-item d-flex gap-2">
- <div class="check flex-shrink-0">
- <input type="checkbox" value="" checked>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" class="check flex-shrink-0" checked>
<span>
First checkbox
<small class="d-block fg-2">With support text underneath to add more detail</small>
</span>
</label>
<label class="list-group-item d-flex gap-2">
- <div class="check flex-shrink-0">
- <input type="checkbox" value="">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" class="check flex-shrink-0">
<span>
Second checkbox
<small class="d-block fg-2">Some other text goes here</small>
</span>
</label>
<label class="list-group-item d-flex gap-2">
- <div class="check flex-shrink-0">
- <input type="checkbox" value="">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" class="check flex-shrink-0">
<span>
Third checkbox
<small class="d-block fg-2">And we end with another snippet of text</small>
<div class="d-flex flex-column md:flex-row p-4 gap-4 md:py-5 align-items-center justify-content-center">
<div class="list-group">
<label class="list-group-item d-flex gap-3">
- <div class="check flex-shrink-0" style="font-size: 1.375em;">
- <input type="checkbox" value="" checked>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" class="check flex-shrink-0" style="font-size: 1.375em;" checked>
<span class="pt-1 form-checked-content">
<strong>Finish sales report</strong>
<small class="d-block fg-2">
</span>
</label>
<label class="list-group-item d-flex gap-3">
- <div class="check flex-shrink-0" style="font-size: 1.375em;">
- <input type="checkbox" value="">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" class="check flex-shrink-0" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong>
<small class="d-block fg-2">
</span>
</label>
<label class="list-group-item d-flex gap-3">
- <div class="check flex-shrink-0" style="font-size: 1.375em;">
- <input type="checkbox" value="">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" class="check flex-shrink-0" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<strong>Out of office</strong>
<small class="d-block fg-2">
</span>
</label>
<label class="list-group-item d-flex gap-3 bg-body-tertiary">
- <div class="check check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" style="font-size: 1.375em;">
- <input disabled type="checkbox" value="">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input disabled type="checkbox" value="" class="check check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block fg-2">
margin-inline: 1.5rem;
}
-.check:has(input:checked) + .form-checked-content {
+.check:checked + .form-checked-content {
opacity: .5;
}
-.check-input-placeholder input {
+.check-input-placeholder {
border-style: dashed;
}
[contenteditable]:focus {
<div class="container-fluid">
<a class="navbar-brand" href="#">Bottom navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 md:mb-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Top navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 md:mb-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark drawer navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarDark" aria-controls="drawerNavbarDark" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end text-bg-dark" tabindex="-1" id="drawerNavbarDark" aria-labelledby="drawerNavbarDarkLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="drawerNavbarDarkLabel">Drawer</h5>
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="drawer" aria-label="Close"></button>
+ <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<div class="container-fluid">
<a class="navbar-brand" href="#">Light drawer navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbarLight" aria-controls="drawerNavbarLight" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="drawerNavbarLight" aria-labelledby="drawerNavbarLightLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Responsive drawer navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawerNavbar2" aria-controls="drawerNavbar2" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end text-bg-dark" tabindex="-1" id="drawerNavbar2" aria-labelledby="drawerNavbar2Label">
<div class="drawer-header">
<h5 class="drawer-title" id="drawerNavbar2Label">Drawer</h5>
- <button type="button" class="btn-close btn-close-white" data-bs-dismiss="drawer" aria-label="Close"></button>
+ <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<div class="container-fluid">
<a class="navbar-brand" href="#">Never expand</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample01">
<div class="container-fluid">
<a class="navbar-brand" href="#">Always expand</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample03">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at md</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample06">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at 2xl</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample2xl">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<div class="xl:container">
<a class="navbar-brand" href="#">Container XL</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07XL">
<nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Tenth navbar example">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse md:justify-content-center" id="navbarsExample08">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Twelfth navbar example">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse md:justify-content-center" id="navbarsExample10">
<nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse lg:d-flex" id="navbarsExample11">
Aperture
</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawer" aria-controls="drawer" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="drawer" aria-labelledby="drawerLabel">
<div class="drawer-header">
</div>
<div class="form-field text-start my-3">
- <div class="check">
- <input type="checkbox" value="remember-me" id="checkDefault">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" value="remember-me" id="checkDefault" class="check">
<label for="checkDefault">
Remember me
</label>
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 md:mb-0">
import type { Layout } from '@libs/layout'
import BootstrapWhiteFillIcon from '@components/icons/BootstrapWhiteFillIcon.astro'
import GitHubIcon from '@components/icons/GitHubIcon.astro'
-import HamburgerIcon from '@components/icons/HamburgerIcon.astro'
import LinkItem from '@components/header/LinkItem.astro'
import OpenCollectiveIcon from '@components/icons/OpenCollectiveIcon.astro'
import XIcon from '@components/icons/XIcon.astro'
aria-controls="bdSidebar"
aria-label="Toggle docs navigation"
>
- <HamburgerIcon class="navbar-toggler-icon" height={16} width={16} />
+ <span class="navbar-toggler-icon" aria-hidden="true" />
<span class="d-none fs-6 pe-1">Browse</span>
</button>
)
+++ /dev/null
----
-import type { SvgIconProps } from '@libs/icon'
-
-type Props = SvgIconProps
-
-const { class: className, height, width } = Astro.props
----
-
-<svg
- xmlns="http://www.w3.org/2000/svg"
- fill="currentColor"
- viewBox="0 0 16 16"
- class={className}
- height={height}
- width={width}
- aria-hidden="true"
- stroke="currentColor"
- stroke-width="1"
- stroke-linecap="round"
->
- <path d="M1 3.5h14M1 8h14M1 12.5h14"></path>
-</svg>
class:list={['btn-close', className]}
data-bs-dismiss={dismiss}
aria-label="Close"
- data-bs-target={target}
->
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
- <path
- d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708"
- ></path>
- </svg>
-</button>
+ data-bs-target={target}></button>
## Example
-Use an ordered list with `.breadcrumb-item` for each page and `.breadcrumb-divider` elements containing your separator icon. Add `.active` to the `.breadcrumb-link` of the current page.
+Use an ordered list with `.breadcrumb-item` for each page and `.breadcrumb-divider` elements between them. Leave a divider empty to use the default chevron icon, or add your own separator content. Add `.active` to the `.breadcrumb-link` of the current page.
<Example code={`<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#">Home</a>
</li>
- <li class="breadcrumb-divider">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
- </li>
+ <li class="breadcrumb-divider"></li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#">Library</a>
</li>
- <li class="breadcrumb-divider">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
- </li>
+ <li class="breadcrumb-divider"></li>
<li class="breadcrumb-item" aria-current="page">
<a class="breadcrumb-link active" href="#">Data</a>
</li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#">Home</a>
</li>
- <li class="breadcrumb-divider">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
- </li>
+ <li class="breadcrumb-divider"></li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentcolor"><circle cx="2" cy="8" r="2"/><circle cx="8" cy="8" r="2"/><circle cx="14" cy="8" r="2"/></svg>
</a>
</li>
- <li class="breadcrumb-divider">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
- </li>
+ <li class="breadcrumb-divider"></li>
<li class="breadcrumb-item">
<a class="breadcrumb-link" href="#">Documents</a>
</li>
- <li class="breadcrumb-divider">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
- </li>
+ <li class="breadcrumb-divider"></li>
<li class="breadcrumb-item" aria-current="page">
<a class="breadcrumb-link active" href="#">2026</a>
</li>
## Dividers
-Dividers are added explicitly using `.breadcrumb-divider` elements. This gives you full control over the separator—use any SVG icon, text character, or custom content.
+Dividers are added explicitly using `.breadcrumb-divider` elements. An empty divider renders a default chevron, drawn with a CSS [`mask`]([[docsref:/customize/sass/#mask-icons]]) so it inherits the divider color (including in dark mode). To use a different separator, add your own content—any SVG icon, text character, or custom markup—which overrides the default.
+
+### Default divider
+
+Leave the `.breadcrumb-divider` empty to get the built-in chevron. Customize it globally by overriding the `--bs-breadcrumb-divider-icon`, `--bs-breadcrumb-divider-width`, and `--bs-breadcrumb-divider-height` variables.
+
+<Example code={`<nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item">
+ <a class="breadcrumb-link" href="#">Home</a>
+ </li>
+ <li class="breadcrumb-divider"></li>
+ <li class="breadcrumb-item" aria-current="page">
+ <a class="breadcrumb-link active" href="#">Library</a>
+ </li>
+ </ol>
+ </nav>`} />
### SVG dividers
-Use inline SVG for crisp, scalable dividers that inherit `currentColor` for easy theming.
+Add an inline SVG inside the divider to override the default with your own crisp, scalable icon. Use `currentColor` for the stroke or fill so it inherits the divider color for easy theming.
<Example code={`<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<a class="breadcrumb-link" href="#">Home</a>
</li>
<li class="breadcrumb-divider">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" width="6" height="12"><path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708"/>
+ <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708"/>
+ </svg>
</li>
<li class="breadcrumb-item" aria-current="page">
<a class="breadcrumb-link active" href="#">Library</a>
## Example
-Provide an option to dismiss or close a component with `.btn-close`. Requires the use of an SVG icon within, which inherits the `color` from the `.btn-close` class. **Be sure to include text for screen readers**, as we’ve done with `aria-label`.
+Provide an option to dismiss or close a component with `.btn-close`. The icon is rendered with a CSS `mask-image`, so it inherits the `color` from the `.btn-close` class—no inline SVG required. **Be sure to include text for screen readers**, as we’ve done with `aria-label`.
-<Example code={`<button type="button" class="btn-close" aria-label="Close">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
- <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
- </svg>
- </button>`} />
+<Example code={`<button type="button" class="btn-close" aria-label="Close"></button>`} />
## Disabled state
Disabled close buttons change their `opacity`. We’ve also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
-<Example code={`<button type="button" class="btn-close" disabled aria-label="Close">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
- <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
- </svg>
- </button>`} />
+<Example code={`<button type="button" class="btn-close" disabled aria-label="Close"></button>`} />
## Dark variant
Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This happens automatically when in dark mode.
<Example class="bg-inverse" code={`<div data-bs-theme="dark">
- <button type="button" class="btn-close" aria-label="Close">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
- <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
- </svg>
- </button>
- <button type="button" class="btn-close" disabled aria-label="Close">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
- <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
- </svg>
- </button>
+ <button type="button" class="btn-close" aria-label="Close"></button>
+ <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>`} />
## CSS
<Example code={`<ul class="list-group">
<li class="list-group-item">
<div class="form-field">
- <div class="check">
- <input type="checkbox" value="" id="firstCheckbox">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" id="firstCheckbox" class="check">
<label for="firstCheckbox">First checkbox</label>
</div>
</li>
<li class="list-group-item">
<div class="form-field">
- <div class="check">
- <input type="checkbox" value="" id="secondCheckbox">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" id="secondCheckbox" class="check">
<label for="secondCheckbox">Second checkbox</label>
</div>
</li>
<li class="list-group-item">
<div class="form-field">
- <div class="check">
- <input type="checkbox" value="" id="thirdCheckbox">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" id="thirdCheckbox" class="check">
<label for="thirdCheckbox">Third checkbox</label>
</div>
</li>
<Example code={`<ul class="list-group">
<li class="list-group-item">
- <input class="radio me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
- <label for="firstRadio">First radio</label>
+ <div class="form-field">
+ <input type="radio" name="listGroupRadio" value="" id="firstRadio" class="radio" checked>
+ <label for="firstRadio">First radio</label>
+ </div>
</li>
<li class="list-group-item">
- <input class="radio me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
- <label for="secondRadio">Second radio</label>
+ <div class="form-field">
+ <input type="radio" name="listGroupRadio" value="" id="secondRadio" class="radio">
+ <label for="secondRadio">Second radio</label>
+ </div>
</li>
<li class="list-group-item">
- <input class="radio me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
- <label for="thirdRadio">Third radio</label>
+ <div class="form-field">
+ <input type="radio" name="listGroupRadio" value="" id="thirdRadio" class="radio">
+ <label for="thirdRadio">Third radio</label>
+ </div>
</li>
</ul>`} />
<Example code={`<ul class="list-group">
<li class="list-group-item">
<div class="form-field">
- <div class="check">
- <input type="checkbox" value="" id="firstCheckboxStretched">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" id="firstCheckboxStretched" class="check">
<label class="stretched-link" for="firstCheckboxStretched">First checkbox</label>
</div>
</li>
<li class="list-group-item">
<div class="form-field">
- <div class="check">
- <input type="checkbox" value="" id="secondCheckboxStretched">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" id="secondCheckboxStretched" class="check">
<label class="stretched-link" for="secondCheckboxStretched">Second checkbox</label>
</div>
</li>
<li class="list-group-item">
<div class="form-field">
- <div class="check">
- <input type="checkbox" value="" id="thirdCheckboxStretched">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" value="" id="thirdCheckboxStretched" class="check">
<label class="stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
</div>
</li>
<input type="password" class="form-control" id="exampleMenuFormPassword1" placeholder="Password">
</div>
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkLabel" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkLabel" class="check" />
<label for="checkLabel">Example new checkbox</label>
</div>
<div class="vstack gap-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDrawer" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
- <path d="M1 3.5h14M1 8h14M1 12.5h14"/>
- </svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarDrawer" aria-labelledby="navbarDrawerLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarNav" aria-labelledby="navbarNavLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarNavAltMarkup" aria-labelledby="navbarNavAltMarkupLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNavMenu" aria-controls="navbarNavMenu" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarNavMenu" aria-labelledby="navbarNavMenuLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarText" aria-labelledby="navbarTextLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDarkDrawer" aria-controls="navbarDarkDrawer" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
- <path d="M1 3.5h14M1 8h14M1 12.5h14"/>
- </svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarDarkDrawer" aria-labelledby="navbarDarkDrawerLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarColor01" aria-labelledby="navbarColor01Label">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarColor02" aria-labelledby="navbarColor02Label">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarColor03" aria-labelledby="navbarColor03Label">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Left Drawer</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarLeftDrawer" aria-controls="navbarLeftDrawer" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-start" tabindex="-1" id="navbarLeftDrawer" aria-labelledby="navbarLeftDrawerLabel">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Top Drawer</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTopDrawer" aria-controls="navbarTopDrawer" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-top" tabindex="-1" id="navbarTopDrawer" aria-labelledby="navbarTopDrawerLabel">
<div class="drawer-header">
<ResizableExample code={`<nav class="navbar md:navbar-expand bg-1 fg-2">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo01" aria-labelledby="navbarTogglerDemo01Label">
<div class="drawer-header">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo02" aria-labelledby="navbarTogglerDemo02Label">
<div class="drawer-header">
<ResizableExample code={`<nav class="navbar bg-1 fg-2">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo03" aria-labelledby="navbarTogglerDemo03Label">
<nav class="navbar bg-body" data-bs-theme="dark">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
+ <span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
</div>
</nav>`} />
// .theme-success { --theme-base: var(--success-base); --theme-bg: var(--success-bg); ... }
// ...
```
+
+### Mask icons
+
+The `mask-icon()` mixin renders an SVG icon via a CSS [`mask`](https://developer.mozilla.org/en-US/docs/Web/CSS/mask) so the shape is painted with the element’s `background-color`. This lets an icon inherit the current text color, enabling automatic dark mode without a separate SVG. We use this for the [close button]([[docsref:/components/close-button/]]), [navbar toggler]([[docsref:/components/navbar/]]), [checkbox marks]([[docsref:/forms/checkbox/]]), [breadcrumb dividers]([[docsref:/components/breadcrumb/]]), [datepicker arrows]([[docsref:/forms/datepicker/]]), and [carousel controls]([[docsref:/components/carousel/]]).
+
+Some form controls can’t use `mask` because they don’t support pseudo-elements and masking would clip the whole field. The `<select>` chevron and inputs using `.form-control-caret` are two examples, which keep separate light and dark `background-image` SVGs instead as non-masked background images.
+
+<ScssDocs name="mask-icon-mixin" file="scss/mixins/_mask-icon.scss" />
+
+Set `background-color` on the element yourself (the mixin only outputs the `mask-*` properties), then pass your icon as the mask image. Pass `null` for the icon when it’s applied conditionally, such as per state or direction.
+
+```scss
+.custom-icon {
+ // Declare a custom CSS variable for the icon. This could be on the same
+ // element, `:root`, or a parent element. We're using a custom × icon. Be
+ // sure to wrap in `escape-svg()` as well.
+ --custom-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-linecap='round' stroke-width='2' d='m4 4 8 8m0-8-8 8'/></svg>"))};
+
+ width: 1rem;
+ height: 1rem;
+ background-color: currentcolor;
+ @include mask-icon($icon: var(--custom-icon));
+}
+```
<div class="alert theme-primary"><p>This is a primary alert.</p></div>
<input type="text" class="form-control" placeholder="Form control">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkLabel" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkLabel" class="check" />
<label class="form-label" for="checkLabel">Example new checkbox</label>
</div>
<div class="vstack gap-2">
<div class="alert theme-primary"><p>This is a primary alert.</p></div>
<input type="text" class="form-control" placeholder="Form control">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkDarkLabel" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkDarkLabel" class="check" />
<label class="form-label" for="checkDarkLabel">Example new checkbox</label>
</div>
<div class="vstack gap-2">
## Basic checkbox
-All checkbox styling is contained to a wrapper class, `.check`. This does the following:
+All checkbox styling is applied with the `.check` class directly on the `<input>`. This does the following:
-- Adds a stacking grid layout for the checkbox and custom SVG icon.
- Overrides the default `<input>` appearance with themed colors.
-- Handles the toggling of separate paths in our custom SVG for the `:checked` and indeterminate states. Two `<path>`s are included in the SVG, one for each state, and the appropriate `<path>` is shown based on the `<input>`’s state.
+- Renders the `:checked` and indeterminate icons via a CSS `mask` on the input’s `::before` pseudo-element, so the mark inherits the contrast color and no inline SVG is needed. The appropriate icon is shown based on the input’s state.
-For folks looking to replace our provided icons, you’ll need to add the `.checked` and `.indeterminate` classes to the `<path>`s and use them in a single `<svg>` element.
+For folks looking to replace our provided icons, override the `--bs-check-icon-checked` and `--bs-check-icon-indeterminate` CSS variables (or the `--check-icon-*` Sass tokens) with your own `mask-image` URLs.
-Checkbox layout and labels are handled with additional HTML and CSS.
+Labels and layout are handled with additional HTML and CSS.
-<Example code={`<div class="check">
- <input type="checkbox" id="check" checked />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>`} />
+<Example code={`<input type="checkbox" id="check" class="check" checked />`} />
## Indeterminate
Checkboxes can utilize the indeterminate pseudo class when manually set via JavaScript. There is no available HTML attribute for specifying it.
-<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="check">
- <input type="checkbox" id="checkIndeterminate" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>`} />
+<Example addStackblitzJs class="bd-example-indeterminate" code={`<input type="checkbox" id="checkIndeterminate" class="check" />`} />
## With form field
Wrap the `.check` in a `.form-field` layout wrapper and add your label. The grid layout places the checkbox and label side by side.
<Example code={`<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkLabel" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkLabel" class="check" />
<label for="checkLabel">Example new checkbox</label>
</div>`} />
Add a description or other content after the label. We recommend wrapping the label and description in a `.form-field-content` to ensure appropriate spacing and alignment.
<Example code={`<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkDescription" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkDescription" class="check" />
<div class="form-field-content">
<label for="checkDescription">Example new checkbox</label>
<small class="form-text">Supporting description for the above label.</small>
Modify the appearance of checked checkboxes by adding the `.theme-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<div class="form-field">
- <div class="check theme-${themeColor.name}">
- <input type="checkbox" id="check${themeColor.name}" checked />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="check${themeColor.name}" class="check theme-${themeColor.name}" checked />
<label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
</div>`)} />
Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
<Example code={`<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkDisabled" disabled />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkDisabled" class="check" disabled />
<label for="checkDisabled">Example new checkbox</label>
</div>`} />
Applies to checked states, too.
<Example code={`<div class="form-field">
- <div class="check">
- <input type="checkbox" id="checkDisabledChecked" checked disabled />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="checkDisabledChecked" class="check" checked disabled />
<label for="checkDisabledChecked">Example new checkbox</label>
</div>`} />
Add `.check-sm` or `.check-lg` to make your checkbox appear smaller or larger.
-<Example class="d-flex flex-column gap-3" code={`<div class="check check-sm">
- <input type="checkbox" id="checkSizeSm" checked />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
- <div class="check">
- <input type="checkbox" id="checkSizeMd" checked />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
- <div class="check check-lg">
- <input type="checkbox" id="checkSizeLg" checked />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>`} />
+<Example class="d-flex flex-column gap-3" code={`<input type="checkbox" id="checkSizeSm" class="check check-sm" checked />
+ <input type="checkbox" id="checkSizeMd" class="check" checked />
+ <input type="checkbox" id="checkSizeLg" class="check check-lg" checked />`} />
## CSS
When a `.check` is a direct child, the grid switches to a two-column layout with the checkbox in column 1 and the label in column 2.
<Example code={`<div class="form-field">
- <div class="check">
- <input type="checkbox" id="fieldCheck" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" id="fieldCheck" class="check" />
<label for="fieldCheck">Remember me</label>
</div>`} />
<Example code={`<div class="form-field">
<label class="form-label">Terms and conditions</label>
- <div class="check">
- <input type="checkbox" id="fieldOverheadCheck" required />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" id="fieldOverheadCheck" class="check" required />
<div class="form-field-content">
<label for="fieldOverheadCheck">I agree to the terms</label>
<small class="form-text">Please read before agreeing.</small>
Add a `<small class="form-text">` after the label and wrap it in a `.form-field-content` to ensure appropriate spacing and alignment.
<Example class="d-flex flex-column gap-3" code={`<div class="form-field">
- <div class="check">
- <input type="checkbox" id="fieldCheckDesc" />
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" id="fieldCheckDesc" class="check" />
<div class="form-field-content">
<label for="fieldCheckDesc">Subscribe to updates</label>
<small class="form-text">We’ll send you a weekly digest of what’s new.</small>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="fieldValidateCheck" required>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" id="fieldValidateCheck" class="check" required>
<div class="form-field-content">
<label for="fieldValidateCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="form-field mb-3">
- <div class="check">
- <input type="checkbox" id="fieldServerCheck" class="is-invalid" required>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" id="fieldServerCheck" class="check is-invalid" required>
<label for="fieldServerCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
<Example code={`<div class="input-group mb-3">
<div class="input-group-text">
- <div class="check">
- <input type="checkbox" aria-label="Checkbox for following text input">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5.5 10 3 3 6-6'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5.5 10.5h8'/>
- </svg>
- </div>
+ <input type="checkbox" class="check" aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<div class="col-12">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="gridCheck">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="gridCheck" class="check">
<label for="gridCheck">
Check me out
</label>
<div class="row mb-3">
<div class="sm:col-10 sm:offset-2">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="gridCheck1">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="gridCheck1" class="check">
<label for="gridCheck1">
Example checkbox
</label>
</div>
<div class="col-auto">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="autoSizingCheck">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="autoSizingCheck" class="check">
<label for="autoSizingCheck">
Remember me
</label>
</div>
<div class="col-auto">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="autoSizingCheck2">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="autoSizingCheck2" class="check">
<label for="autoSizingCheck2">
Remember me
</label>
<div class="col-12">
<div class="form-field">
- <div class="check">
- <input type="checkbox" id="inlineFormCheck">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="inlineFormCheck" class="check">
<label for="inlineFormCheck">
Remember me
</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-field">
- <div class="check">
- <input type="checkbox" id="exampleCheck1">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="exampleCheck1" class="check">
<label for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn-solid theme-primary">Submit</button>
</select>
</div>
<div class="mb-3 form-field">
- <div class="check">
- <input type="checkbox" id="disabledFieldsetCheck" disabled>
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" id="disabledFieldsetCheck" class="check" disabled>
<label for="disabledFieldsetCheck">
Can’t check this
</label>
<div class="form-group">
<label class="form-label">Checkbox</label>
<div class="form-field">
- <div class="check">
- <input type="checkbox" class="is-invalid" id="validationFormCheck1" required aria-describedby="validationFormCheck1Feedback">
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
- <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-5'/>
- <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 8.5h6'/>
- </svg>
- </div>
+ <input type="checkbox" class="check is-invalid" id="validationFormCheck1" required aria-describedby="validationFormCheck1Feedback">
<div class="form-field-content">
<label for="validationFormCheck1">Check this checkbox</label>
<div id="validationFormCheck1Feedback" class="invalid-feedback">Example invalid feedback text</div>
- Removed `$nested-kbd-font-weight`, no replacement.
- Removed `muted`, `black-50`, and `white-50` from text colors utilities map
- Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
- - Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
+ - Removed `$btn-close-white-filter`. The close button no longer uses a filter—its icon is a CSS mask painted with `currentcolor`, so it adapts to dark backgrounds automatically.
- Removed `$border-radius-xxl`, use `$border-radius-2xl`.
- Removed `$text-muted` for secondary color.
- Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
- The expand/collapse icon now uses an `.accordion-icon` element (typically an SVG) inside the summary, replacing the CSS `background-image` approach.
- Open state styling uses `details[open]` instead of JavaScript-toggled classes.
- Theme coloring via `.theme-*` classes on the `.accordion` wrapper.
-- **Rebuilt close button markup.** `.btn-close` now expects a child `<svg>` element with `fill: currentcolor` instead of the v5 `background-image` encoded SVG. The filter-based dark mode approach (`$btn-close-white-filter`) has been replaced by `currentcolor` inheritance.
+- **Rebuilt close button markup.** `.btn-close` now renders its icon via a CSS `mask-image` (`--btn-close-icon`) tinted with `background-color: currentcolor`, so the button is self-contained—no child `<svg>` is required. The filter-based dark mode approach (`$btn-close-white-filter`) has been replaced by `currentcolor` inheritance, and the `.btn-close-white` class has been removed—on dark backgrounds (e.g., `.text-bg-dark`) the icon now inherits the contrast color automatically.
- **Restructured cards.** Borders now live on `.card-body` and `.card-list` segments rather than a single outer `.card` border. Added `--card-box-shadow` and `--card-body-gap` tokens. New variant classes: `.card-translucent` (frosted glass effect) and `.card-subtle` (themed with subtle backgrounds). Horizontal cards use a new `.card-row` class.
- **Reworked badge variants.** Badge color variants now use `.badge-subtle` and `.badge-outline` combined with `.theme-*` classes (e.g., `.badge-subtle .theme-primary`), replacing the v5 `.bg-primary` utility pattern on badges.
-- **Updated breadcrumb markup.** Breadcrumbs now use `.breadcrumb-link` as an interactive element with padding, min-height, and hover background, and `.breadcrumb-divider` as a visible separator element between items. The v5 `::before` pseudo-element divider pattern has been removed.
+- **Updated breadcrumb markup.** Breadcrumbs now use `.breadcrumb-link` as an interactive element with padding, min-height, and hover background, and explicit `.breadcrumb-divider` elements as separators between items. An empty `.breadcrumb-divider` renders a default chevron via a CSS `mask-image` (`--breadcrumb-divider-icon`) tinted with `background-color: currentcolor`; add your own SVG, text, or markup inside it to override. This replaces the v5 `--bs-breadcrumb-divider` content string on the `.breadcrumb-item::before` pseudo-element.
+- **Navbar toggler icon now uses a CSS mask.** `.navbar-toggler-icon` renders via `mask-image` (`--navbar-toggler-icon`) tinted with `background-color: currentcolor` instead of an embedded `background-image` SVG. The markup stays an empty `<span class="navbar-toggler-icon">`, but the icon now inherits the current text color (including dark mode), so the separate light/dark toggler SVGs are no longer needed.
### Reboot
- Also split apart the documentation pages for checks, radios, and switches.
- Added new CSS variables on each of these components. _Side note: we could’ve shared variables here, but chose not to for simplicity’s sake._
- Removed several now unused Sass variables.
- - Checkboxes now have a wrapping element and an SVG in the DOM for checked and indeterminate states. Radios and switches do not.
+ - Checkboxes apply the `.check` class directly on the `<input>` (no wrapping element) and draw the checked and indeterminate marks with a CSS `mask-image` on a `::before` pseudo-element tinted with the contrast color—no inline SVG in the DOM. Radios and switches are likewise styled without a wrapping element.
- Revamped layout for checks, radios, and switches with labels (and descriptions). We now have custom elements for layout that include basic flexbox styling.
- Refactored toggle buttons to use a nested input structure. The `.btn-check` class now goes on the label (not the input), with the input nested inside. This eliminates the need for `id`/`for` attributes and uses CSS `:has()` selector instead of sibling selectors. Example: `<label class="btn-check btn-solid theme-primary"><input type="checkbox">Toggle</label>`.
- **Consolidate `.form-select` into `.form-control`.**
const placeholderRegex = /<Placeholder\s+([^>]+)\/>/g
const closeButtonRegex = /([ \t]*)<CloseButton\s*([^>]*?)\/>/g
-// Close button SVG icon
-const CLOSE_BUTTON_SVG_PATH =
- 'M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z'
-
/**
* Generates all the placeholder attributes and options required to render a placeholder.
* @see src/components/shortcodes/Placeholder.astro
* Renders a CloseButton component to its HTML string representation.
* Supports optional `dismiss` and `class` attributes.
*/
-function renderCloseButtonToString(attributes: Record<string, string>, indent = ''): string {
+function renderCloseButtonToString(attributes: Record<string, string>): string {
const dismiss = attributes.dismiss
const extraClass = attributes.class
const dismissAttr = dismiss ? ` data-bs-dismiss="${dismiss}"` : ''
const classValue = extraClass ? `btn-close ${extraClass}` : 'btn-close'
- return [
- `<button type="button" class="${classValue}"${dismissAttr} aria-label="Close">`,
- `${indent} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">`,
- `${indent} <path fill="currentcolor" d="${CLOSE_BUTTON_SVG_PATH}"/>`,
- `${indent} </svg>`,
- `${indent}</button>`
- ].join('\n')
+ return `<button type="button" class="${classValue}"${dismissAttr} aria-label="Close"></button>`
}
/**
throw new Error('Invalid CloseButton element.')
}
- return indent + renderCloseButtonToString(closeButtonElement.attribs as Record<string, string>, indent)
+ return indent + renderCloseButtonToString(closeButtonElement.attribs as Record<string, string>)
})
// Replace Placeholder components
--shell-prompt-color: #565c64;
}
+// Geist Mono enables contextual ligatures/alternates (e.g. `--`, `->`, `==`)
+// which distort code. Render glyphs literally for code and inline code.
+code,
+kbd,
+samp,
+pre,
+.astro-code {
+ font-feature-settings: "liga" 0, "calt" 0;
+ font-variant-ligatures: none;
+}
+
.astro-code {
--bs-font-monospace: "Geist Mono";
projects / thirdparty / bootstrap.git / commitdiff
