<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
+ <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
-</nav>$breadcrumb-divider: none;
As part of Bootstrap’s evolving CSS variables approach, breadcrumbs now use local CSS variables on .breadcrumb for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+ --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
@@ -128,7 +129,7 @@ On this page
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
Sass variables
- $breadcrumb-font-size: null;
+ $breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
@@ -143,4 +144,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
Group a series of buttons together on a single line or stack them in a vertical column.
<div class="btn-group" role="group" aria-label="Basic example">
+<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
-</div>Button groups require an appropriate role attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group" for button groups or role="toolbar" for button toolbars. Then use aria-label or aria-labelledby to label them.
These classes can also be added to groups of links, as an alternative to the .nav navigation components.
<div class="btn-group">
+<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
-</div><div class="btn-group" role="group" aria-label="Basic mixed styles example">
+<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
-</div><div class="btn-group" role="group" aria-label="Basic outlined example">
+<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
-</div>Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
+<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
@@ -86,7 +87,7 @@ On this page
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
-</div><div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
@@ -105,7 +106,7 @@ On this page
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
-</div>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
@@ -138,7 +139,7 @@ On this page
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
-</div>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
+<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
@@ -188,7 +189,7 @@ On this page
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
-</div>Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
+<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
@@ -223,7 +224,7 @@ On this page
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
-</div>Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
@@ -252,7 +253,7 @@ On this page
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
-</div>Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
-</div><div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
@@ -344,7 +345,7 @@ On this page
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
-</div><div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
+<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
<label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
<label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
-</div>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.
<button type="button" class="btn">Base class</button><button type="button" class="btn">Base class</button>The .btn class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.
If you are using the .btn class on its own, remember to at least define some explicit :focus and/or :focus-visible styles.
<button type="button" class="btn btn-primary">Primary</button>
+ <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
@@ -49,7 +50,7 @@ On this page
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
-<button type="button" class="btn btn-link">Link</button>Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.
<a class="btn btn-primary" href="#" role="button">Link</a>
+ <a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
-<input class="btn btn-primary" type="reset" value="Reset">In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
<button type="button" class="btn btn-outline-primary">Primary</button>
+ <button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
-<button type="button" class="btn btn-outline-dark">Dark</button>Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
-<button type="button" class="btn btn-secondary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button>
-<button type="button" class="btn btn-secondary btn-sm">Small button</button><button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>You can even roll your own custom sizing with CSS variables:
<button type="button" class="btn btn-primary"
+ <button type="button" class="btn btn-primary"
style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
Custom button
-</button>Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.
<button type="button" class="btn btn-primary" disabled>Primary button</button>
+ <button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
-<button type="button" class="btn btn-outline-secondary" disabled>Button</button>Disabled buttons using the <a> element behave a bit different:
<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.<a> should not include the href attribute.<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
-<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a><a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
+<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>To cover cases where you have to keep the href attribute on a disabled link, the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
-<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a><a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
+<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
<div class="d-grid gap-2">
+<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
-</div>Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.
<div class="d-grid gap-2 d-md-block">
+<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
-</div>You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too.
<div class="d-grid gap-2 col-6 mx-auto">
+<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
-</div>Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they’re no longer stacked.
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
-</div>The button plugin allows you to create simple on/off toggle buttons.
Visually, these toggle buttons are identical to the checkbox toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
<p class="d-inline-flex gap-1">
+ <p class="d-inline-flex gap-1">
<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
@@ -179,7 +180,7 @@ On this page
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
-</p>Toggle link Active toggle link @@ -189,7 +190,7 @@ On this page Toggle link Active toggle link Disabled toggle link -
<p class="d-inline-flex gap-1">
+ <p class="d-inline-flex gap-1">
<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
@@ -198,10 +199,10 @@ On this page
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
-</p>You can create a button instance with the button constructor, for example:
-const bsButton = new bootstrap.Button('#myButton')
+ const bsButton = new bootstrap.Button('#myButton')
@@ -239,7 +240,7 @@ On this page
Variables
Added in v5.2.0
As part of Bootstrap’s evolving CSS variables approach, buttons now use local CSS variables on .btn for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
- --#{$prefix}btn-padding-x: #{$btn-padding-x};
+ --#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
@@ -257,8 +258,10 @@ On this page
Each .btn-* modifier class updates the appropriate CSS variables to minimize additional CSS rules with our button-variant(), button-outline-variant(), and button-size() mixins.
Here’s an example of building a custom .btn-* modifier class as we do for the buttons unique to our docs by reassigning Bootstrap’s CSS variables with a mixture of our own CSS and Sass variables.
-
- .btn-bd-primary {
+
+
+
+ .btn-bd-primary {
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
@@ -273,7 +276,7 @@ On this page
}
Sass variables
- $btn-color: var(--#{$prefix}body-color);
+ $btn-color: var(--#{$prefix}body-color);
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
@@ -321,7 +324,7 @@ On this page
Sass mixins
There are three mixins for buttons: button and button outline variant mixins (both based on $theme-colors), plus a button size mixin.
- @mixin button-variant(
+ @mixin button-variant(
$background,
$border,
$color: color-contrast($background),
@@ -351,7 +354,7 @@ On this page
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
- @mixin button-outline-variant(
+ @mixin button-outline-variant(
$color,
$color-hover: color-contrast($color),
$active-background: $color,
@@ -374,7 +377,7 @@ On this page
--#{$prefix}gradient: none;
}
- @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+ @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
@@ -383,7 +386,7 @@ On this page
Sass loops
Button variants (for regular and outline buttons) use their respective mixins with our $theme-colors map to generate the modifier classes in scss/_buttons.scss.
- @each $color, $value in $theme-colors {
+ @each $color, $value in $theme-colors {
.btn-#{$color} {
@if $color == "light" {
@include button-variant(
@@ -418,4 +421,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/card/index.html b/docs/5.3/components/card/index.html
index 43ee6d257d..398514d562 100644
--- a/docs/5.3/components/card/index.html
+++ b/docs/5.3/components/card/index.html
@@ -1,8 +1,9 @@
- Cards · Bootstrap v5.3 Skip to main content
+ Cards · Bootstrap v5.3
+ Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
- <div class="card" style="width: 18rem;">
+
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div>
+</div>
Content types
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
Body
@@ -52,11 +53,11 @@ On this page
This is some text within a card body.
-
<div class="card">
+
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
-</div>
+</div>
Titles, text, and links
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.
Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.
@@ -68,7 +69,7 @@ On this page
Card link
Another link
-
<div class="card" style="width: 18rem;">
+
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
@@ -76,7 +77,7 @@ On this page
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
-</div>
+</div>.card-img-top and .card-img-bottom respectively set the top and bottom corners rounded to match the card’s borders. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.
Some quick example text to build on the card title and make up the bulk of the card’s content.
<div class="card" style="width: 18rem;">
+<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
-</div>Create lists of content in a card with a flush list group.
<div class="card" style="width: 18rem;">
+<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
-</div><div class="card" style="width: 18rem;">
+<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
@@ -123,7 +124,7 @@ On this page
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
-</div><div class="card" style="width: 18rem;">
+<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
@@ -142,7 +143,7 @@ On this page
<div class="card-footer">
Card footer
</div>
-</div>Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
<div class="card" style="width: 18rem;">
+<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
@@ -175,7 +176,7 @@ On this page
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
-</div>Add an optional header and/or footer within a card.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">
+<div class="card">
<div class="card-header">
Featured
</div>
@@ -196,7 +197,7 @@ On this page
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div>Card headers can be styled by adding .card-header to <h*> elements.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">
+<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div><div class="card">
+<div class="card">
<div class="card-header">
Quote
</div>
@@ -241,7 +242,7 @@ On this page
</figcaption>
</figure>
</div>
-</div><div class="card text-center">
+<div class="card text-center">
<div class="card-header">
Featured
</div>
@@ -266,7 +267,7 @@ On this page
<div class="card-footer text-body-secondary">
2 days ago
</div>
-</div>Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
<div class="row">
+<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<div class="card">
<div class="card-body">
@@ -309,7 +310,7 @@ On this page
</div>
</div>
</div>
-</div>Use our handful of available sizing utilities to quickly set a card’s width.
With supporting text below as a natural lead-in to additional content.
Button<div class="card w-75 mb-3">
+<div class="card w-75 mb-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -340,7 +341,7 @@ On this page
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
-</div>Use custom CSS in your stylesheets or as inline styles to set a width.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card" style="width: 18rem;">
+<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div>You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card mb-3" style="width: 18rem;">
+<div class="card mb-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@@ -402,7 +403,7 @@ On this page
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div>Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">
+<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
@@ -443,7 +444,7 @@ On this page
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div><div class="card text-center">
+<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
@@ -482,7 +483,7 @@ On this page
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
-</div>Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Last updated 3 mins ago
-<div class="card mb-3">
+<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
@@ -517,7 +518,7 @@ On this page
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
-</div>Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<div class="card text-bg-dark">
+<div class="card text-bg-dark">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small>Last updated 3 mins ago</small></p>
</div>
-</div>Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.
<div class="card mb-3" style="max-width: 540px;">
+<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
@@ -564,7 +565,7 @@ On this page
</div>
</div>
</div>
-</div>Cards include various options for customizing their backgrounds, borders, and color.
Some quick example text to build on the card title and make up the bulk of the card’s content.
-<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
+<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
@@ -680,7 +681,7 @@ On this page
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
-</div>Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.
Some quick example text to build on the card title and make up the bulk of the card’s content.
-<div class="card border-primary mb-3" style="max-width: 18rem;">
+<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
@@ -794,7 +795,7 @@ On this page
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
-</div>You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.
Some quick example text to build on the card title and make up the bulk of the card’s content.
<div class="card border-success mb-3" style="max-width: 18rem;">
+<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
-</div>In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Last updated 3 mins ago
-<div class="card-group">
+<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
@@ -866,7 +867,7 @@ On this page
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
-</div>When using card groups with footers, their content will automatically line up.
<div class="card-group">
+<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
@@ -930,7 +931,7 @@ On this page
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
-</div>Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.
<div class="row row-cols-1 row-cols-md-2 g-4">
+<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
@@ -1007,7 +1008,7 @@ On this page
</div>
</div>
</div>
-</div>Change it to .row-cols-3 and you’ll see the fourth card wrap.
<div class="row row-cols-1 row-cols-md-3 g-4">
+<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
@@ -1083,7 +1084,7 @@ On this page
</div>
</div>
</div>
-</div>When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.
<div class="row row-cols-1 row-cols-md-3 g-4">
+<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
@@ -1159,7 +1160,7 @@ On this page
</div>
</div>
</div>
-</div>Just like with card groups, card footers will automatically line up.
<div class="row row-cols-1 row-cols-md-3 g-4">
+<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
@@ -1235,14 +1236,14 @@ On this page
</div>
</div>
</div>
-</div>In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.
As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on .card for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}card-spacer-y: #{$card-spacer-y};
+ --#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
@@ -1263,7 +1264,7 @@ On this page
--#{$prefix}card-group-margin: #{$card-group-margin};
Sass variables
- $card-spacer-y: $spacer;
+ $card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-title-color: null;
@@ -1286,4 +1287,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
A slideshow component for cycling through elements—images or slides of text—like a carousel.
<div id="carouselExample" class="carousel slide">
+<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
@@ -80,7 +81,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
You must add the .active class to one of the slides, otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.
<div id="carouselExampleIndicators" class="carousel slide">
+<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -135,7 +136,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>You can add captions to your slides with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.
<div id="carouselExampleCaptions" class="carousel slide">
+<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -212,7 +213,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add .bg-body or some custom CSS to the .carousel-items for proper crossfading.
<div id="carouselExampleFade" class="carousel slide carousel-fade">
+<div id="carouselExampleFade" class="carousel slide carousel-fade">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
@@ -255,7 +256,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>You can make your carousels autoplay on page load by setting the ride option to carousel. Autoplaying carousels automatically pause while hovered with the mouse. This behavior can be controlled with the pause option. In browsers that support the Page Visibility API, the carousel will stop cycling when the webpage is not visible to the user (such as when the browser tab is inactive, or when the browser window is minimized).
For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
+<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
@@ -299,7 +300,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>When the ride option is set to true, rather than carousel, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.
<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
+<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
@@ -341,7 +342,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>.carousel-item interval Add data-bs-interval="" to a .carousel-item to change the amount of time to delay between automatically cycling to the next item.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
+<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
@@ -384,7 +385,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
@@ -411,7 +412,7 @@ On this page
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
-</div>Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the touch option to false.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
+<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
@@ -454,7 +455,7 @@ On this page
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div><div id="carouselExampleDark" class="carousel carousel-dark slide">
+<div id="carouselExampleDark" class="carousel carousel-dark slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -537,13 +538,13 @@ Deprecated in v5.3.0
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
-</div>The transition duration of .carousel-item can be changed with the $carousel-transition-duration Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. transition: transform 2s ease, opacity .5s ease-out).
Variables for all carousels:
-$carousel-control-color: $white;
+ $carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
@@ -573,7 +574,7 @@ Deprecated in v5.3.0
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
Variables for the dark carousel:
- $carousel-dark-indicator-active-bg: $black; // Deprecated in v5.3.4
+ $carousel-dark-indicator-active-bg: $black; // Deprecated in v5.3.4
$carousel-dark-caption-color: $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter: invert(1) grayscale(100); // Deprecated in v5.3.4
@@ -728,4 +729,4 @@ myCarousel.a
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
A generic close button for dismissing content like modals and alerts.
Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.
<button type="button" class="btn-close" aria-label="Close"></button><button type="button" class="btn-close" aria-label="Close"></button>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.
<button type="button" class="btn-close" disabled aria-label="Close"></button><button type="button" class="btn-close" disabled aria-label="Close"></button><div data-bs-theme="dark">
+<div data-bs-theme="dark">
<button type="button" class="btn-close" aria-label="Close"></button>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
-</div>As part of Bootstrap’s evolving CSS variables approach, close button now uses local CSS variables on .btn-close for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}btn-close-color: #{$btn-close-color};
+ --#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
@@ -55,7 +56,7 @@ Deprecated in v5.3.0
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
Sass variables
- $btn-close-width: 1em;
+ $btn-close-width: 1em;
$btn-close-height: $btn-close-width;
$btn-close-padding-x: .25em;
$btn-close-padding-y: $btn-close-padding-x;
@@ -72,4 +73,4 @@ Deprecated in v5.3.0
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
<p class="d-inline-flex gap-1">
+<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
@@ -59,7 +60,7 @@ On this page
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
-</div>The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.
Please note that while the example below has a min-height set to avoid excessive repaints in our docs, this is not explicitly required. Only the width on the child element is required.
<p>
+<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
@@ -85,7 +86,7 @@ On this page
This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.
</div>
</div>
-</div>A <button> or <a> element can show and hide multiple elements by referencing them with a selector in its data-bs-target or href attribute.
Conversely, multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.
<button> or <a> eleme
- <p class="d-inline-flex gap-1">
+<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
@@ -129,19 +130,19 @@ Conversely, multiple <button> or <a> eleme
</div>
</div>
</div>
-</div>Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.
If your control element is targeting a single collapsible element – i.e. the data-bs-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern - you will need to include these yourself with custom JavaScript.
$transition-collapse: height .35s ease;
+ $transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Classes
Collapse transition classes can be found in scss/_transitions.scss as these are shared across multiple components (collapse and accordion).
- .collapse {
+ .collapse {
&:not(.show) {
display: none;
}
@@ -281,4 +282,4 @@ myCollapsible.Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
<div class="dropdown">
+<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
@@ -53,7 +54,7 @@ On this page
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
-</div>While <button> is the recommended control for a dropdown toggle, there might be situations where you have to use an <a> element. If you do, we recommend adding a role="button" attribute to appropriately convey control’s purpose to assistive technologies such as screen readers.
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
@@ -75,7 +76,7 @@ On this page
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
-</div>The best part is you can do this with any button variant, too:
<!-- Example single danger button -->
+ <!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Danger
@@ -359,7 +360,7 @@ Deprecated in v5.3.0
Separated link
-
<div class="dropdown">
+
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
@@ -370,7 +371,7 @@ Deprecated in v5.3.0
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
-</div>And putting it to use in a navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -414,7 +415,7 @@ Deprecated in v5.3.0
</ul>
</div>
</div>
-</nav>Directions are flipped in RTL mode. As such, .dropstart will appear on the right side.
<div class="dropdown-center">
+<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropdown
</button>
@@ -437,7 +438,7 @@ Deprecated in v5.3.0
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
-</div>Trigger dropdown menus above elements by adding .dropup to the parent element.
<div class="dropup-center dropup">
+<div class="dropup-center dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Centered dropup
</button>
@@ -508,7 +509,7 @@ Deprecated in v5.3.0
<li><a class="dropdown-item" href="#">Action two</a></li>
<li><a class="dropdown-item" href="#">Action three</a></li>
</ul>
-</div>Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.
<div class="dropdown">
+<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@@ -629,41 +630,41 @@ Deprecated in v5.3.0
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
-</div>You can also create non-interactive dropdown items with .dropdown-item-text. Feel free to style further with custom CSS or text utilities.
<ul class="dropdown-menu">
+ <ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
-</ul>Add .active to items in the dropdown to style them as active. To convey the active state to assistive technologies, use the aria-current attribute — using the page value for the current page, or true for the current item in a set.
<ul class="dropdown-menu">
+ <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
-</ul>Add .disabled to items in the dropdown to style them as disabled.
<ul class="dropdown-menu">
+ <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
-</ul>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional .drop* classes, but you can also control them with additional modifier classes.
Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning .dropdown-menu-end will appear on the left side.
<div class="btn-group">
+<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
@@ -686,7 +687,7 @@ Deprecated in v5.3.0
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
-</div>If you want to use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.
<div class="btn-group">
+<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
@@ -708,7 +709,7 @@ Deprecated in v5.3.0
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
-</div>To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.
<div class="btn-group">
+<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
@@ -728,7 +729,7 @@ Deprecated in v5.3.0
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
-</div>Note that you don’t need to add a data-bs-display="static" attribute to dropdown buttons in navbars, since Popper isn’t used in navbars.
Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.
@@ -807,7 +808,7 @@ Deprecated in v5.3.0<div class="btn-group">
+<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@@ -882,7 +883,7 @@ Deprecated in v5.3.0
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
-</div>Add a header to label sections of actions in any dropdown menu.
@@ -890,11 +891,11 @@ Deprecated in v5.3.0<ul class="dropdown-menu">
+ <ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
-</ul>Separate groups of related menu items with a divider.
<ul class="dropdown-menu">
+ <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
-</ul>Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
+<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
<p>
Some example text that’s free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
-</div>Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
<div class="dropdown-menu">
+<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
@@ -975,7 +976,7 @@ Deprecated in v5.3.0
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
-</div><div class="dropdown">
+<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
Dropdown form
</button>
@@ -1022,7 +1023,7 @@ Deprecated in v5.3.0
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
-</div>Use data-bs-offset or data-bs-reference to change the location of the dropdown.
<div class="d-flex">
+<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
@@ -1073,7 +1074,7 @@ Deprecated in v5.3.0
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
-</div>By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
@@ -1160,12 +1161,12 @@ Deprecated in v5.3.0
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
-</div>As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on .dropdown-menu for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
+ --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
@@ -1196,7 +1197,7 @@ Deprecated in v5.3.0
--bs-dropdown-item-border-radius
Customization through CSS variables can be seen on the .dropdown-menu-dark class where we override specific values without adding duplicate CSS selectors.
- --#{$prefix}dropdown-color: #{$dropdown-dark-color};
+ --#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
@@ -1211,7 +1212,7 @@ Deprecated in v5.3.0
Sass variables
Variables for all dropdowns:
- $dropdown-min-width: 10rem;
+ $dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
@@ -1246,7 +1247,7 @@ Deprecated in v5.3.0
// fusv-enable
Variables for the dark dropdown:
- $dropdown-dark-color: $gray-300;
+ $dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
@@ -1260,13 +1261,13 @@ Deprecated in v5.3.0
$dropdown-dark-header-color: $gray-500;
Variables for the CSS-based carets that indicate a dropdown’s interactivity:
- $caret-width: .3em;
+ $caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Sass mixins
Mixins are used to generate the CSS-based carets and can be found in scss/mixins/_caret.scss.
- @mixin caret-down($width: $caret-width) {
+ @mixin caret-down($width: $caret-width) {
border-top: $width solid;
border-right: $width solid transparent;
border-bottom: 0;
@@ -1490,4 +1491,4 @@ myDropdown.a
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/list-group/index.html b/docs/5.3/components/list-group/index.html
index 8c1e345352..8262c40237 100644
--- a/docs/5.3/components/list-group/index.html
+++ b/docs/5.3/components/list-group/index.html
@@ -1,8 +1,9 @@
- List group · Bootstrap v5.3 Skip to main content
+ List group · Bootstrap v5.3
+ List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
<ul class="list-group">
+
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
-</ul>
+</ul>
Active items
Add .active to a .list-group-item to indicate the current active selection.
@@ -47,13 +48,13 @@ On this page
- A third item
- A fourth item
- And a fifth one
-
<ul class="list-group">
+
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
-</ul>
+</ul>
Links and buttons
Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.
Make .list-group-item-action instances appear disabled by adding .disabled, and aria-disabled="true" to inform assistive technologies that the element is disabled. You may require additional JavaScript to fully disable links and buttons.
@@ -66,7 +67,7 @@ On this page
A third link item
A fourth link item
A disabled link item
-
<div class="list-group">
+
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
@@ -74,7 +75,7 @@ On this page
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
-</div>
+</div>
With <button>s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a>s don’t support the disabled attribute.
<div class="list-group">
+
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
@@ -92,7 +93,7 @@ On this page
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
-</div>
+</div> Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
<ul class="list-group list-group-flush">
+ <ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
-</ul>Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.
Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before pseudo-element on the <li> with counter-increment and content.
<ol class="list-group list-group-numbered">
+ <ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
-</ol>These work great with custom content as well.
<ol class="list-group list-group-numbered">
+ <ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
@@ -165,7 +166,7 @@ On this page
</div>
<span class="badge text-bg-primary rounded-pill">14</span>
</li>
-</ol>Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal list groups cannot be combined with flush list groups.
ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.
<ul class="list-group list-group-horizontal">
+ <ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
@@ -227,7 +228,7 @@ On this page
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
-</ul>Heads up! As of v5.3.0, the list-group-item-variant() Sass mixin is deprecated. List group item variants now have their CSS variables overridden in a Sass loop.
Use contextual classes to style list items with a stateful background and color.
@@ -242,7 +243,7 @@ On this page<ul class="list-group">
+ <ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
@@ -253,7 +254,7 @@ On this page
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
-</ul>Contextual classes also work with .list-group-item-action for <a> and <button> elements. Note the addition of the hover styles here not present in the previous example. Also supported is the .active state; apply it to indicate an active selection on a contextual list group item.
<div class="list-group">
+<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
@@ -278,7 +279,7 @@ On this page
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
-</div>Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.
@@ -295,7 +296,7 @@ On this page A third list item 1 -<ul class="list-group">
+ <ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge text-bg-primary rounded-pill">14</span>
@@ -308,7 +309,7 @@ On this page
A third list item
<span class="badge text-bg-primary rounded-pill">1</span>
</li>
-</ul>Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
Some placeholder content in a paragraph.
And some muted small print. -<div class="list-group">
+<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
@@ -361,7 +362,7 @@ On this page
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-body-secondary">And some muted small print.</small>
</a>
-</div>Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.
<ul class="list-group">
+ <ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
<label class="form-check-label" for="firstCheckbox">First checkbox</label>
@@ -390,7 +391,7 @@ On this page
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
<label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
</li>
-</ul><ul class="list-group">
+ <ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
<label class="form-check-label" for="firstRadio">First radio</label>
@@ -417,7 +418,7 @@ On this page
<input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
<label class="form-check-label" for="thirdRadio">Third radio</label>
</li>
-</ul>You can use .stretched-link on <label>s to make the whole list group item clickable.
<ul class="list-group">
+ <ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
<label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
@@ -445,12 +446,12 @@ On this page
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
<label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
</li>
-</ul>As part of Bootstrap’s evolving CSS variables approach, list groups now use local CSS variables on .list-group for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}list-group-color: #{$list-group-color};
+ --#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
@@ -469,7 +470,7 @@ On this page
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
Sass variables
- $list-group-color: var(--#{$prefix}body-color);
+ $list-group-color: var(--#{$prefix}body-color);
$list-group-bg: var(--#{$prefix}body-bg);
$list-group-border-color: var(--#{$prefix}border-color);
$list-group-border-width: var(--#{$prefix}border-width);
@@ -499,7 +500,7 @@ On this page
Sass mixins
Deprecated in v5.3.0
- @mixin list-group-item-variant($state, $background, $color) {
+ @mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
@@ -522,7 +523,7 @@ Deprecated in v5.3.0
Sass loops
Loop that generates the modifier classes with an overriding of CSS variables.
- // List group contextual variants
+ // List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@@ -690,4 +691,4 @@ tabElms.forE
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/modal/index.html b/docs/5.3/components/modal/index.html
index 3edadf6f36..a75dde701d 100644
--- a/docs/5.3/components/modal/index.html
+++ b/docs/5.3/components/modal/index.html
@@ -1,8 +1,9 @@
- Modal · Bootstrap v5.3 Skip to main content
+ Modal · Bootstrap v5.3
+ Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Image and text
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of .d-inline-block and .align-text-top on the <img>.
- <nav class="navbar bg-body-tertiary">
+
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
-</nav>
+</nav>
Nav
Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.
Add the .active class on .nav-link to indicate the current page.
@@ -208,7 +209,7 @@ On this page
-
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -231,7 +232,7 @@ On this page
</ul>
</div>
</div>
-</nav>
+</nav> And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -263,7 +264,7 @@ On this page
</div>
</div>
</div>
-</nav>You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -325,7 +326,7 @@ On this page
</ul>
</div>
</div>
-</nav>Place various form controls and components within a navbar:
<nav class="navbar bg-body-tertiary">
+ <nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
-</nav>Immediate child elements of .navbar use flex layout and will default to justify-content: space-between. Use additional flex utilities as needed to adjust this behavior.
<nav class="navbar bg-body-tertiary">
+ <nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
@@ -360,7 +361,7 @@ On this page
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
-</nav>Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the <form> element as the container and save some HTML.
<nav class="navbar bg-body-tertiary">
+ <nav class="navbar bg-body-tertiary">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</div>
</form>
-</nav>Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
<nav class="navbar bg-body-tertiary">
+ <nav class="navbar bg-body-tertiary">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
-</nav>Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.
<nav class="navbar bg-body-tertiary">
+ <nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
-</nav>Mix and match with other components and utilities as needed.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -451,12 +452,99 @@ On this page
</span>
</div>
</div>
-</nav>New dark navbars in v5.3.0 — We’ve deprecated .navbar-dark in favor of the new data-bs-theme="dark". Add data-bs-theme="dark" to the .navbar to enable a component-specific color mode. Learn more about our color modes.
New in v5.2.0 — Navbar theming is now powered by CSS variables and .navbar-light has been deprecated. CSS variables are applied to .navbar, defaulting to the “light” appearance, and can be overridden with .navbar-dark.
Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply data-bs-theme="dark" to the .navbar parent for dark background colors. Then, customize with .bg-* and additional utilities.
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
+
+
+
+
+
+
+
+ <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
@@ -476,23 +564,23 @@ On this page
Navbar
- <div class="container">
+<div class="container">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
-</div>Use any of the responsive containers to change how wide the content in your navbar is presented.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
-</nav>Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there).
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.
<nav class="navbar bg-body-tertiary">
+ <nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
-</nav><nav class="navbar fixed-top bg-body-tertiary">
+ <nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
-</nav><nav class="navbar fixed-bottom bg-body-tertiary">
+ <nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
-</nav><nav class="navbar sticky-top bg-body-tertiary">
+ <nav class="navbar sticky-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
-</nav><nav class="navbar sticky-bottom bg-body-tertiary">
+ <nav class="navbar sticky-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
-</nav>Add .navbar-nav-scroll to a .navbar-nav (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at 75vh (or 75% of the viewport height), but you can override that with the local CSS custom property --bs-navbar-height or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar.
Please note that this behavior comes with a potential drawback of overflow—when setting overflow-y: auto (required to scroll the content here), overflow-x is the equivalent of auto, which will crop some horizontal content.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
@@ -615,7 +703,7 @@ On this page
</form>
</div>
</div>
-</nav>Navbars can use .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -670,7 +758,7 @@ On this page
</form>
</div>
</div>
-</nav>With a brand name shown on the left and toggler on the right:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -720,7 +808,7 @@ On this page
</form>
</div>
</div>
-</nav>With a toggler on the left and brand name on the right:
<nav class="navbar navbar-expand-lg bg-body-tertiary">
+ <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -770,7 +858,7 @@ On this page
</form>
</div>
</div>
-</nav>Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the .navbar . Because our plugin works on the id and data-bs-target matching, that’s easily done!
<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
+ <div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
<div class="bg-dark p-4">
<h5 class="text-body-emphasis h4">Collapsed content</h5>
<span class="text-body-secondary">Toggleable via the navbar brand.</span>
@@ -797,7 +885,7 @@ On this page
<span class="navbar-toggler-icon"></span>
</button>
</div>
-</nav>When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes before the toggler in the document’s structure. We also recommend making sure that the toggler has the aria-controls attribute, pointing to the id of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component. We extend both the offcanvas default styles and use our .navbar-expand-* classes to create a dynamic and flexible navigation sidebar.
<nav class="navbar bg-body-tertiary fixed-top">
+ <nav class="navbar bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
@@ -882,7 +970,7 @@ On this page
</div>
</div>
</div>
-</nav>To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like lg, use .navbar-expand-lg.
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
@@ -935,7 +1023,7 @@ On this page
<nav class="navbar navbar-dark bg-dark fixed-top">
+ <nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas dark navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
@@ -975,12 +1063,12 @@ On this page
</div>
</div>
</div>
-</nav>As part of Bootstrap’s evolving CSS variables approach, navbars now use local CSS variables on .navbar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+ --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -1002,7 +1090,7 @@ On this page
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
Some additional CSS variables are also present on .navbar-nav:
- --#{$prefix}nav-link-padding-x: 0;
+ --#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
@@ -1011,7 +1099,7 @@ On this page
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
Customization through CSS variables can be seen on the .navbar-dark class where we override specific values without adding duplicate CSS selectors.
- --#{$prefix}navbar-color: #{$navbar-dark-color};
+ --#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
@@ -1022,7 +1110,7 @@ On this page
Sass variables
Variables for all navbars:
- $navbar-padding-y: $spacer * .5;
+ $navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
@@ -1052,7 +1140,7 @@ On this page
$navbar-light-brand-hover-color: $navbar-light-active-color;
Variables for the dark navbar:
- $navbar-dark-color: rgba($white, .55);
+ $navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
@@ -1064,7 +1152,7 @@ On this page
Sass loops
Responsive navbar expand/collapse classes (e.g., .navbar-expand-lg) are combined with the $breakpoints map and generated through a loop in scss/_navbar.scss.
- // Generate series of `.navbar-expand-*` responsive classes for configuring
+ // Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
@@ -1137,4 +1225,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/navs-tabs/index.html b/docs/5.3/components/navs-tabs/index.html
index ec7487ec13..f3fab792b1 100644
--- a/docs/5.3/components/navs-tabs/index.html
+++ b/docs/5.3/components/navs-tabs/index.html
@@ -1,8 +1,9 @@
- Navs and tabs · Bootstrap v5.3 Skip to main content
+ Navs and tabs · Bootstrap v5.3
+ Navs and tabs
Documentation and examples for how to use Bootstrap’s included navigation components.
<ul class="nav">
+
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -54,19 +55,19 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>
+</ul>
Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important, or roll your own with a <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
<nav class="nav">
+
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
-</nav>
+</nav>
Available styles
Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.
Horizontal alignment
@@ -85,7 +86,7 @@ On this page
Disabled
-
<ul class="nav justify-content-center">
+
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -98,7 +99,7 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>
+</ul>
Right-aligned with .justify-content-end:
<ul class="nav justify-content-end">
+
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -126,7 +127,7 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>
+</ul>
Vertical
Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).
<ul class="nav flex-column">
+
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -155,19 +156,19 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>
+</ul> As always, vertical navigation is possible without <ul>s, too.
<nav class="nav flex-column">
+ <nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
-</nav>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.
<ul class="nav nav-tabs">
+ <ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -196,7 +197,7 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>Take that same HTML, but use .nav-pills instead:
<ul class="nav nav-pills">
+ <ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -225,7 +226,7 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>Take that same HTML, but use .nav-underline instead:
<ul class="nav nav-underline">
+ <ul class="nav nav-underline">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -254,7 +255,7 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>Force your .nav’s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.
<ul class="nav nav-pills nav-fill">
+ <ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -283,19 +284,19 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>When using a <nav>-based navigation, you can safely omit .nav-item as only .nav-link is required for styling <a> elements.
<nav class="nav nav-pills nav-fill">
+ <nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
-</nav>For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.
<ul class="nav nav-pills nav-justified">
+ <ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -323,19 +324,19 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>Similar to the .nav-fill example using a <nav>-based navigation.
<nav class="nav nav-pills nav-justified">
+ <nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
-</nav>If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
<nav class="nav nav-pills flex-column flex-sm-row">
+ <nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
-</nav>If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.
Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role="tablist", role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the ARIA Authoring Practices Guide tabs pattern. See JavaScript behavior for dynamic tabbed interfaces in this section for an example. The aria-current attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding aria-selected="true" on the active tab.
<ul class="nav nav-tabs">
+ <ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -395,7 +396,7 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul><ul class="nav nav-pills">
+ <ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
@@ -437,13 +438,13 @@ On this page
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
-</ul>As part of Bootstrap’s evolving CSS variables approach, navs now use local CSS variables on .nav, .nav-tabs, and .nav-pills for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
On the .nav base class:
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
+ --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
@@ -452,7 +453,7 @@ On this page
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
On the .nav-tabs modifier class:
- --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+ --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
@@ -461,18 +462,18 @@ On this page
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
On the .nav-pills modifier class:
- --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
+ --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
Added in v5.3.0
On the .nav-underline modifier class:
- --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+ --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
Sass variables
- $nav-link-padding-y: .5rem;
+ $nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
@@ -500,7 +501,36 @@ On this page
JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content.
-This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Disabled tab’s associated content.
+
+
+
+
+ This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Disabled tab’s associated content.
+
+
+
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
@@ -523,7 +553,30 @@ On this page
</div>
To help fit your needs, this works with <ul>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <nav>, you shouldn’t add role="tablist" directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <div>) and wrap the <nav> around it.
-
+
+
+
+
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
@@ -540,7 +593,36 @@ On this page
</div>
The tabs plugin also works with pills.
-This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Disabled tab’s associated content.
+
+
+
+
+ This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Disabled tab’s associated content.
+
+
+
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
@@ -563,7 +645,34 @@ On this page
</div>
And with vertical pills. Ideally, for vertical tabs, you should also add aria-orientation="vertical" to the tab list container.
-This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Disabled tab’s associated content.
This is some placeholder content the Messages tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Settings tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
+
+
+ This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Disabled tab’s associated content.
+
+
+ This is some placeholder content the Messages tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+ This is some placeholder content the Settings tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
+
+
+
+
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
@@ -716,4 +825,4 @@ tabEl.addEve
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/offcanvas/index.html b/docs/5.3/components/offcanvas/index.html
index 3545a2ab65..e194cb6322 100644
--- a/docs/5.3/components/offcanvas/index.html
+++ b/docs/5.3/components/offcanvas/index.html
@@ -1,8 +1,9 @@
- Offcanvas · Bootstrap v5.3 Skip to main content
+ Offcanvas · Bootstrap v5.3
+ Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@@ -53,7 +54,7 @@ On this page
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
-</div>
+</div>
Live demo
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.
@@ -88,7 +89,7 @@ On this page
-
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
@@ -115,7 +116,7 @@ On this page
</ul>
</div>
</div>
-</div>Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to enable <body> scrolling.
Try scrolling the rest of the page to see this option in action.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
@@ -138,7 +139,7 @@ On this page
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
-</div>You can also enable <body> scrolling with a visible backdrop.
Try scrolling the rest of the page to see this option in action.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
@@ -161,7 +162,7 @@ On this page
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
-</div>When backdrop is set to static, the offcanvas will not close when clicking outside of it.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
@@ -192,7 +193,7 @@ On this page
I will not close if you click outside of me.
</div>
</div>
-</div>Place offcanvas content here.
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
+<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
@@ -215,7 +216,7 @@ Deprecated in v5.3.0
<div class="offcanvas-body">
<p>Place offcanvas content here.</p>
</div>
-</div>Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, .offcanvas-lg hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint. Responsive offcanvas classes are available for each breakpoint.
This is content within an .offcanvas-lg.
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
+<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>
<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>
@@ -252,7 +253,7 @@ Deprecated in v5.3.0
<div class="offcanvas-body">
<p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
</div>
-</div>There’s no default placement for offcanvas components, so you must add one of the modifier classes below.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
@@ -282,7 +283,7 @@ Deprecated in v5.3.0
<div class="offcanvas-body">
...
</div>
-</div><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
@@ -303,7 +304,7 @@ Deprecated in v5.3.0
<div class="offcanvas-body">
...
</div>
-</div><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
@@ -324,14 +325,14 @@ Deprecated in v5.3.0
<div class="offcanvas-body small">
...
</div>
-</div>Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."—referencing the offcanvas title—to .offcanvas. Note that you don’t need to add role="dialog" since we already add it via JavaScript.
As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on .offcanvas for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
+ --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
@@ -345,7 +346,7 @@ Deprecated in v5.3.0
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
Sass variables
- $offcanvas-padding-y: $modal-inner-padding;
+ $offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
@@ -499,4 +500,4 @@ myOffcanvas.
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
-
Code licensed MIT, docs CC BY 3.0.
-
- Currently v5.3.7.
Projects
\ No newline at end of file
+ - Currently v5.3.8.
Projects
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
<nav aria-label="Page navigation example">
+ <nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -43,7 +44,7 @@ On this page
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
-</nav>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes.
<nav aria-label="Page navigation example">
+ <nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
@@ -78,7 +79,7 @@ On this page
</a>
</li>
</ul>
-</nav>Add .active to indicate a .page-item is the one currently being viewed. If using an <a> on the current page, aria-current="page" should be added for assistive technologies.
<nav aria-label="...">
+ <nav aria-label="...">
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -101,9 +102,9 @@ On this page
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
-</nav>If using a non-interactive element, like a <span> for the current page, you may omit the aria-current attribute.
<li class="page-item active">
+ <li class="page-item active">
<span class="page-link">2</span>
</li>
@@ -123,7 +124,7 @@ On this page
Next
- <nav aria-label="...">
+ <nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
@@ -137,7 +138,7 @@ On this page
<a class="page-link" href="#">Next</a>
</li>
</ul>
-</nav>And just like active page items, you can swap out the disabled <a> for a <span> to remove click functionality and prevent keyboard focus while retaining intended styles.
<li class="page-item disabled">
<span class="page-link">Previous</span>
@@ -153,7 +154,7 @@ On this page
- 2
- 3
- <nav aria-label="...">
+ <nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" >
<a class="page-link" aria-current="page">1</a>
@@ -161,7 +162,7 @@ On this page
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
-</nav><nav aria-label="...">
+ <nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active">
<a class="page-link" aria-current="page">1</a>
@@ -178,7 +179,7 @@ On this page
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
-</nav>Change the alignment of pagination components with flexbox utilities. For example, with .justify-content-center:
<nav aria-label="Page navigation example">
+ <nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
@@ -205,7 +206,7 @@ On this page
<a class="page-link" href="#">Next</a>
</li>
</ul>
-</nav>Or with .justify-content-end:
<nav aria-label="Page navigation example">
+ <nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link">Previous</a>
@@ -231,12 +232,12 @@ On this page
<a class="page-link" href="#">Next</a>
</li>
</ul>
-</nav>As part of Bootstrap’s evolving CSS variables approach, pagination now uses local CSS variables on .pagination for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+ --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color};
@@ -258,7 +259,7 @@ On this page
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
Sass variables
- $pagination-padding-y: .375rem;
+ $pagination-padding-y: .375rem;
$pagination-padding-x: .75rem;
$pagination-padding-y-sm: .25rem;
$pagination-padding-x-sm: .5rem;
@@ -297,7 +298,7 @@ On this page
$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg);
Sass mixins
- @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
+ @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
@@ -307,4 +308,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
-
Code licensed MIT, docs CC BY 3.0.
-
- Currently v5.3.7.
Projects
\ No newline at end of file
+ - Currently v5.3.8.
Projects
\ No newline at end of file
diff --git a/docs/5.3/components/placeholders/index.html b/docs/5.3/components/placeholders/index.html
index f04851e19f..025c3e1f37 100644
--- a/docs/5.3/components/placeholders/index.html
+++ b/docs/5.3/components/placeholders/index.html
@@ -1,8 +1,9 @@
- Placeholders · Bootstrap v5.3
- <div class="card">
+ <div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
@@ -86,19 +87,19 @@ On this page
-
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
-<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
+<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
The use of aria-hidden="true" only indicates that the element should be hidden to screen readers. The loading behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to swap the state of the placeholder and inform AT users of the update.
Width
You can change the width through grid column classes, width utilities, or inline styles.
- <span class="placeholder col-6"></span>
+
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
-<span class="placeholder" style="width: 25%;"></span>
+<span class="placeholder" style="width: 25%;"></span> By default, the placeholder uses currentColor. This can be overridden with a custom color or utility class.
<span class="placeholder col-12"></span>
+ <span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
@@ -119,16 +120,16 @@ On this page
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
-<span class="placeholder col-12 bg-dark"></span>The size of .placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.
<span class="placeholder col-12 placeholder-lg"></span>
+ <span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
-<span class="placeholder col-12 placeholder-xs"></span>Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.
@@ -137,19 +138,19 @@ On this page
-
<p class="placeholder-glow">
+ <p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
-</p>$placeholder-opacity-max: .5;
+ $placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
You only set a height value on the .progress container, so if you change that value, the inner .progress-bar will automatically resize accordingly.
<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
+<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
<div class="progress-bar" style="width: 25%"></div>
-</div>Add labels to your progress bars by placing text within the .progress-bar.
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%">25%</div>
-</div>Note that by default, the content inside the .progress-bar is controlled with overflow: hidden, so it doesn’t bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use .overflow-visible from the overflow utilities.
Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the .progress and .progress-bar background colors. Use caution when implementing this example.
If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
@@ -119,7 +120,7 @@ On this page
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger" style="width: 100%"></div>
-</div>Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.
If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate text color, so the labels remain readable and have sufficient contrast. We recommend using the color and background helper classes.
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
@@ -144,7 +145,7 @@ On this page
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
-</div>You can include multiple progress components inside a container with .progress-stacked to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar must be applied to the .progress elements, rather than the .progress-bars.
<div class="progress-stacked">
+<div class="progress-stacked">
<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
<div class="progress-bar"></div>
</div>
@@ -167,7 +168,7 @@ On this page
<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<div class="progress-bar bg-info"></div>
</div>
-</div>Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
@@ -198,19 +199,19 @@ On this page
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
-</div>The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
-</div>As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on .progress for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}progress-height: #{$progress-height};
+ --#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
@@ -220,7 +221,7 @@ On this page
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};
Sass variables
- $progress-height: 1rem;
+ $progress-height: 1rem;
$progress-font-size: $font-size-base * .75;
$progress-bg: var(--#{$prefix}secondary-bg);
$progress-border-radius: var(--#{$prefix}border-radius);
@@ -232,7 +233,7 @@ On this page
Keyframes
Used for creating the CSS animations for .progress-bar-animated. Included in scss/_progress-bar.scss.
- @if $enable-transitions {
+ @if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: var(--#{$prefix}progress-height); }
}
@@ -241,4 +242,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/scrollspy/index.html b/docs/5.3/components/scrollspy/index.html
index 4000deddde..12322ed3bb 100644
--- a/docs/5.3/components/scrollspy/index.html
+++ b/docs/5.3/components/scrollspy/index.html
@@ -1,8 +1,9 @@
- Scrollspy · Bootstrap v5.3 Skip to main content
+ Scrollspy · Bootstrap v5.3
+ Scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
- <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
+ <nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
@@ -110,7 +111,66 @@ On this page
Nested nav
Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.
-Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
Item 1-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
Item 1-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
Item 3-1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
Item 3-2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
+
+
+
+
+
+ Item 1
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+ Item 1-1
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+ Item 1-2
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+ Item 2
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+ Item 3
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+ Item 3-1
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+ Item 3-2
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
+
+
+
+
+
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
@@ -166,7 +226,30 @@ On this page
List group
Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.
-Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
+
+
+
+
+ Item 1
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 2
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 3
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 4
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
+
+
+
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
@@ -192,7 +275,33 @@ On this page
Simple anchors
Scrollspy is not limited to nav components and list groups, so it will work on any <a> anchor elements in the current document. Scroll the area and watch the .active class change.
-Item 1
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 2
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 3
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 4
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Item 5
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
+
+
+
+
+ Item 1
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 2
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 3
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 4
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+ Item 5
+ This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It’s repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
+
+
+
+
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
@@ -345,4 +454,4 @@ firstScrollSpyEl.Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/spinners/index.html b/docs/5.3/components/spinners/index.html
index 305cbc08ea..30b4b19ed8 100644
--- a/docs/5.3/components/spinners/index.html
+++ b/docs/5.3/components/spinners/index.html
@@ -1,8 +1,9 @@
- Spinners · Bootstrap v5.3 Skip to main content
+ Spinners · Bootstrap v5.3
+ Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Colors
The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.
@@ -60,7 +61,7 @@ On this page
Loading...
- <div class="spinner-border text-primary" role="status">
+
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
@@ -83,15 +84,15 @@ On this page
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
-</div>
+</div>
Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.
Growing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Loading...
- <div class="spinner-grow" role="status">
+
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
-</div>
+</div> Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants.
<div class="spinner-grow text-primary" role="status">
+<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
@@ -139,16 +140,16 @@ On this page
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
-</div>Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.
Use margin utilities like .m-5 for easy spacing.
<div class="spinner-border m-5" role="status">
+<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
-</div>Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
<div class="d-flex justify-content-center">
+<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
-</div><div class="d-flex align-items-center">
+<div class="d-flex align-items-center">
<strong role="status">Loading...</strong>
<div class="spinner-border ms-auto" aria-hidden="true"></div>
-</div><div class="clearfix">
+<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
-</div><div class="text-center">
+<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
-</div>Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.
<div class="spinner-border spinner-border-sm" role="status">
+<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
-</div>Or, use custom CSS or inline styles to change the dimensions as needed.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
+<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
-</div>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
<button class="btn btn-primary" type="button" disabled>
+ <button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
-</button><button class="btn btn-primary" type="button" disabled>
+ <button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
-</button>As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on .spinner-border and .spinner-grow for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Border spinner variables:
---#{$prefix}spinner-width: #{$spinner-width};
+ --#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
@@ -258,19 +259,19 @@ On this page
--#{$prefix}spinner-animation-name: spinner-border;
Growing spinner variables:
- --#{$prefix}spinner-width: #{$spinner-width};
+ --#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;
For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the .spinner-border-sm class does the following:
- --#{$prefix}spinner-width: #{$spinner-width-sm};
+ --#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
Sass variables
- $spinner-width: 2rem;
+ $spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
@@ -282,11 +283,11 @@ On this page
Keyframes
Used for creating the CSS animations for our spinners. Included in scss/_spinners.scss.
- @keyframes spinner-border {
+ @keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
- @keyframes spinner-grow {
+ @keyframes spinner-grow {
0% {
transform: scale(0);
}
@@ -299,4 +300,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
\ No newline at end of file
diff --git a/docs/5.3/components/toasts/index.html b/docs/5.3/components/toasts/index.html
index e0bae15413..dc23dfecf3 100644
--- a/docs/5.3/components/toasts/index.html
+++ b/docs/5.3/components/toasts/index.html
@@ -1,8 +1,9 @@
- Toasts · Bootstrap v5.3 Skip to main content
+ Toasts · Bootstrap v5.3
+ Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
@@ -56,13 +57,15 @@ On this page
<div class="toast-body">
Hello, world! This is a toast message.
</div>
-</div>
+</div>
Previously, our scripts dynamically added the .hide class to completely hide a toast (with display:none, rather than just with opacity:0). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
Live example
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
Bootstrap11 mins agoHello, world! This is a toast message.
-
- <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+
+
+
+ <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@@ -79,7 +82,7 @@ On this page
</div>
We use the following JavaScript to trigger our live toast demo:
- const toastTrigger = document.getElementById('liveToastBtn')
+ const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
@@ -101,7 +104,7 @@ On this page
Hello, world! This is a toast message.
-
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
@@ -111,7 +114,7 @@ On this page
<div class="toast-body">
Hello, world! This is a toast message.
</div>
-</div>
+</div>
Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
@@ -138,7 +141,7 @@ On this page
Heads up, toasts will stack automatically
-
<div class="toast-container position-static">
+
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
@@ -162,7 +165,7 @@ On this page
Heads up, toasts will stack automatically
</div>
</div>
-</div>
+</div>
Custom content
Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. Here we’ve created a simpler toast by removing the default .toast-header, adding a custom hide icon from Bootstrap Icons, and using some flexbox utilities to adjust the layout.
@@ -172,14 +175,14 @@ On this page
- <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
+
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
-</div>Alternatively, you can also add additional controls and components to toasts.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
@@ -197,7 +200,7 @@ On this page
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
-</div>Building on the above example, you can create different toast color schemes with our color and background utilities. Here we’ve added .text-bg-primary to the .toast, and then added .btn-close-white to our close button. For a crisp edge, we remove the default border with .border-0.
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
-</div>Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.
<form>
+<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
@@ -277,7 +280,7 @@ On this page
</div>
</div>
</div>
-</div>For systems that generate more notifications, consider using a wrapping element so they can easily stack.
<div aria-live="polite" aria-atomic="true" class="position-relative">
+<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
@@ -343,7 +346,7 @@ On this page
</div>
</div>
</div>
-</div>You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
<!-- Flexbox container for aligning the toasts -->
+<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
@@ -375,7 +378,7 @@ On this page
Hello, world! This is a toast message.
</div>
</div>
-</div>Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an aria-live region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user. Additionally, include aria-atomic="true" to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the alert component instead of toast.
Note that the live region needs to be present in the markup before the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
@@ -396,7 +399,7 @@ On this page<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
+<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
@@ -406,13 +409,13 @@ On this page
<div class="toast-body">
Hello, world! This is a toast message.
</div>
-</div>While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long delay timeout, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with autohide: false.
As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on .toast for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}toast-zindex: #{$zindex-toast};
+ --#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
@@ -429,7 +432,7 @@ On this page
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};
Sass variables
- $toast-max-width: 350px;
+ $toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
@@ -561,4 +564,4 @@ myToastEl.ad
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent.
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
| # | First | @@ -54,7 +56,8 @@ On this pageDoe | @social |
|---|
<table class="table">
+
+<table class="table">
<thead>
<tr>
<th scope="col">#</th>
@@ -88,7 +91,7 @@ On this page
Use contextual classes to color tables, table rows or individual cells.
Heads up! Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.
Class Heading Heading Default Cell Cell Primary Cell Cell Secondary Cell Cell Success Cell Cell Danger Cell Cell Warning Cell Cell Info Cell Cell Light Cell Cell Dark Cell Cell
- <!-- On tables -->
+ <!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
@@ -123,7 +126,8 @@ On this page
Accented tables
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
-
+
+
#
First
@@ -150,12 +154,14 @@ On this page
Doe
@social
-
<table class="table table-striped">
+
+
<table class="table table-striped">
...
</table>
Striped columns
Use .table-striped-columns to add zebra-striping to any table column.
-
+
+
#
First
@@ -182,11 +188,13 @@ On this page
Doe
@social
-
<table class="table table-striped-columns">
+
+
<table class="table table-striped-columns">
...
</table>
These classes can also be added to table variants:
-
+
+
#
First
@@ -213,10 +221,12 @@ On this page
Doe
@social
-
<table class="table table-dark table-striped">
+
+
<table class="table table-dark table-striped">
...
</table>
-
+
+
#
First
@@ -243,10 +253,12 @@ On this page
Doe
@social
-
<table class="table table-dark table-striped-columns">
+
+
<table class="table table-dark table-striped-columns">
...
</table>
-
+
+
#
First
@@ -273,10 +285,12 @@ On this page
Doe
@social
-
<table class="table table-success table-striped">
+
+
<table class="table table-success table-striped">
...
</table>| # | First | @@ -303,12 +317,14 @@ On this pageDoe | @social |
|---|
<table class="table table-success table-striped-columns">
+
+<table class="table table-success table-striped-columns">
...
</table>Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | First | @@ -335,10 +351,12 @@ On this pageDoe | @social |
|---|
<table class="table table-hover">
+
+<table class="table table-hover">
...
</table>| # | First | @@ -365,11 +383,13 @@ On this pageDoe | @social |
|---|
<table class="table table-dark table-hover">
+
+<table class="table table-dark table-hover">
...
</table>These hoverable rows can also be combined with the striped rows variant:
-| # | First | @@ -396,12 +416,44 @@ On this pageDoe | @social |
|---|
<table class="table table-striped table-hover">
+
+<table class="table table-striped table-hover">
...
</table>Highlight a table row or cell by adding a .table-active class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | John | Doe | @social |
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +John | +Doe | +@social | +
<table class="table">
<thead>
...
@@ -422,7 +474,38 @@ On this page
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | John | Doe | @social |
| # | +First | +Last | +Handle | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +John | +Doe | +@social | +
<table class="table table-dark">
<thead>
...
@@ -453,7 +536,7 @@ On this page
Text and border colors are generated the same way, and their colors are inherited by default.
Behind the scenes it looks like this:
- @mixin table-variant($state, $background) {
+ @mixin table-variant($state, $background) {
.table-#{$state} {
$color: color-contrast(opaque($body-bg, $background));
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
@@ -479,7 +562,8 @@ On this page
Table borders
Bordered tables
Add .table-bordered for borders on all sides of the table and cells.
-
+
+
#
First
@@ -506,11 +590,13 @@ On this page
Doe
@social
-
<table class="table table-bordered">
+
+
<table class="table table-bordered">
...
</table>
Border color utilities can be added to change colors:
-
+
+
#
First
@@ -537,12 +623,14 @@ On this page
Doe
@social
-
<table class="table table-bordered border-primary">
+
+
<table class="table table-bordered border-primary">
...
</table>
Tables without borders
Add .table-borderless for a table without borders.
-
+
+
#
First
@@ -569,10 +657,12 @@ On this page
Doe
@social
-
<table class="table table-borderless">
+
+
<table class="table table-borderless">
...
</table>
-
+
+
#
First
@@ -599,12 +689,14 @@ On this page
Doe
@social
-
<table class="table table-dark table-borderless">
+
+
<table class="table table-dark table-borderless">
...
</table>
Small tables
Add .table-sm to make any .table more compact by cutting all cell padding in half.
-
+
+
#
First
@@ -631,10 +723,12 @@ On this page
Doe
@social
-
<table class="table table-sm">
+
+
<table class="table table-sm">
...
</table>| # | First | @@ -661,7 +755,8 @@ On this pageDoe | @social |
|---|
<table class="table table-dark table-sm">
+
+<table class="table table-dark table-sm">
...
</table><table class="table">
+ <table class="table">
<thead>
<tr>
<th scope="col">#</th>
@@ -724,10 +819,43 @@ On this page
<td>@social</td>
</tr>
</tbody>
-</table>Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default. Use the vertical align classes to re-align where needed.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
This cell inherits vertical-align: bottom; from the table row | This cell inherits vertical-align: bottom; from the table row | This cell inherits vertical-align: bottom; from the table row | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
This cell inherits vertical-align: middle; from the table | This cell inherits vertical-align: middle; from the table | This cell is aligned to the top. | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
| Heading 1 | +Heading 2 | +Heading 3 | +Heading 4 | +
|---|---|---|---|
This cell inherits vertical-align: middle; from the table |
+ This cell inherits vertical-align: middle; from the table |
+ This cell inherits vertical-align: middle; from the table |
+ This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. | +
This cell inherits vertical-align: bottom; from the table row |
+ This cell inherits vertical-align: bottom; from the table row |
+ This cell inherits vertical-align: bottom; from the table row |
+ This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. | +
This cell inherits vertical-align: middle; from the table |
+ This cell inherits vertical-align: middle; from the table |
+ This cell is aligned to the top. | +This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. | +
<div class="table-responsive">
<table class="table align-middle">
<thead>
@@ -754,7 +882,62 @@ On this page
Border styles, active styles, and table variants are not inherited by nested tables.
-| # | First | Last | Handle | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | ||||||||||||
| |||||||||||||||
| 3 | John | Doe | @social | ||||||||||||
| # | +First | +Last | +Handle | +||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +||||||||||||
+
|
+ |||||||||||||||
| 3 | +John | +Doe | +@social | +||||||||||||
<table class="table table-striped table-bordered">
<thead>
...
@@ -778,7 +961,38 @@ On this page
Anatomy
Table head
Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.
-# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 John Doe @social
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ John
+ Doe
+ @social
+
+
+
+
<table class="table">
<thead class="table-light">
...
@@ -788,7 +1002,38 @@ On this page
</tbody>
</table>
-# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 John Doe @social
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ John
+ Doe
+ @social
+
+
+
+
<table class="table">
<thead class="table-dark">
...
@@ -799,7 +1044,46 @@ On this page
</table>
Table foot
-# First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 John Doe @social Footer Footer Footer Footer
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ John
+ Doe
+ @social
+
+
+
+
+ Footer
+ Footer
+ Footer
+ Footer
+
+
+
+
<table class="table">
<thead>
...
@@ -883,7 +1167,7 @@ On this page
@social
-
<table class="table caption-top">
+
<table class="table caption-top">
<caption>List of users</caption>
<thead>
<tr>
@@ -913,13 +1197,70 @@ On this page
<td>@social</td>
</tr>
</tbody>
-</table>
+</table> Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +
|---|---|---|---|---|---|---|---|---|---|
| 1 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
| 2 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
| 3 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
<div class="table-responsive">
<table class="table">
...
@@ -968,7 +1309,7 @@ On this page
$table-cell-padding-y: .5rem;
+ $table-cell-padding-y: .5rem;
$table-cell-padding-x: .5rem;
$table-cell-padding-y-sm: .25rem;
$table-cell-padding-x-sm: .25rem;
@@ -1007,7 +1348,7 @@ On this page
$table-bg-scale: -80%;
Sass loops
- $table-variants: (
+ $table-variants: (
"primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
@@ -1026,4 +1367,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
<h1>h1. Bootstrap heading</h1>
+ <h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
@@ -83,24 +84,31 @@ On this page
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
-h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
+h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
-<p class="h6">h6. Bootstrap heading</p>
+<p class="h6">h6. Bootstrap heading</p> Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
<h3>
+ <h3>
Fancy display heading
<small class="text-body-secondary">With faded secondary text</small>
-</h3>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
-<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
@@ -110,7 +118,7 @@ On this page
Display headings are configured via the $display-font-sizes Sass map and two variables, $display-font-weight and $display-line-height.
Display headings are customizable via two variables, $display-font-family and $display-font-style.
$display-font-sizes: (
+ $display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
@@ -128,9 +136,9 @@ On this page
Make a paragraph stand out by adding .lead.
This is a lead paragraph. It stands out from regular paragraphs.
-
<p class="lead">
+
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
-</p>
+</p>
Inline text elements
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text.
@@ -140,14 +148,14 @@ On this page
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
-This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
-<p><em>This line rendered as italicized text.</em></p>
+<p><em>This line rendered as italicized text.</em></p> Beware that those tags should be used for semantic purpose:
<mark> represents text which is marked or highlighted for reference or notation purposes.Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
Add .initialism to an abbreviation for a slightly smaller font-size.
attr
-HTML
<p><abbr title="attribute">attr</abbr></p>
-<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>HTML
<p><abbr title="attribute">attr</abbr></p>
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.
A well-known quote, contained in a blockquote element.
-
<blockquote class="blockquote">
+ <blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
-</blockquote>The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.
<figure>
+ <figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
-</figure>Use text utilities as needed to change the alignment of your blockquote.
<figure class="text-center">
+ <figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
-</figure>A well-known quote, contained in a blockquote element.
@@ -219,14 +227,14 @@ On this pageSomeone famous in Source Title -
<figure class="text-end">
+ <figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
-</figure>Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
<ul class="list-unstyled">
+ <ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it’s still a list.</li>
@@ -256,18 +264,18 @@ On this page
</ul>
</li>
<li>This may still come in handy in some situations.</li>
-</ul>Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.
<ul class="list-inline">
+ <ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they’re displayed inline.</li>
-</ul>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.
<dl class="row">
+ <dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
@@ -316,13 +324,13 @@ On this page
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
-</dl>In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.
Headings have some dedicated variables for sizing and spacing.
-$headings-margin-bottom: $spacer * .5;
+ $headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
@@ -330,7 +338,7 @@ On this page
$headings-color: inherit;
Miscellaneous typography elements covered here and in Reboot also have dedicated variables.
- $lead-font-size: $font-size-base * 1.25;
+ $lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
@@ -381,4 +389,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
- Currently v5.3.7.
Projects
\ No newline at end of file
+ Currently v5.3.8. Projects
Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
<div class="dropdown" data-bs-theme="light">
+<div class="dropdown" data-bs-theme="light">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
@@ -77,7 +78,7 @@ On this page
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
-</div>For each color mode you wish to support, you’ll need to add new overrides for the shared global CSS variables. We do this already in our _root.scss stylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:
// Color mode variables in _root.scss
+ // Color mode variables in _root.scss
@include color-mode(dark) {
// CSS variable overrides here...
}
@@ -104,11 +105,11 @@ On this page
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>
@@ -153,7 +154,7 @@ On this page
Custom color modes
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own data-bs-theme selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate _variables-dark.scss stylesheet to house Bootstrap’s dark mode specific Sass variables, but that’s not required for you.
For example, you can create a “blue theme” with the selector data-bs-theme="blue". In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.
- [data-bs-theme="blue"] {
+ [data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue);
@@ -331,7 +332,7 @@ On this page
CSS
Variables
Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to data-bs-theme but can be configured to use a prefers-color-scheme media query. Use these variables as a guideline for generating your own new color modes.
- --#{$prefix}body-color: #{$body-color-dark};
+ --#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
@@ -382,7 +383,7 @@ On this page
Sass variables
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in _variables-dark.scss. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
- // scss-docs-start theme-text-dark-variables
+ // scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark: tint-color($primary, 40%);
$secondary-text-emphasis-dark: tint-color($secondary, 40%);
$success-text-emphasis-dark: tint-color($success, 40%);
@@ -462,7 +463,7 @@ On this page
Sass mixins
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the data-bs-theme attribute selector or media query with the customizable color-mode() mixin. See the Sass usage section for more details.
- @mixin color-mode($mode: light, $root: false) {
+ @mixin color-mode($mode: light, $root: false) {
@if $color-mode-type == "media-query" {
@if $root == true {
@media (prefers-color-scheme: $mode) {
@@ -485,4 +486,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
-
Code licensed MIT, docs CC BY 3.0.
-
- Currently v5.3.7.
Projects
\ No newline at end of file
+ - Currently v5.3.8.
Projects
\ No newline at end of file
diff --git a/docs/5.3/customize/color/index.html b/docs/5.3/customize/color/index.html
index ddaec4cd8b..264fceb2f8 100644
--- a/docs/5.3/customize/color/index.html
+++ b/docs/5.3/customize/color/index.html
@@ -1,8 +1,9 @@
- Color · Bootstrap v5.3 Skip to main content
+ Color · Bootstrap v5.3
+ Color
Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.
PrimarySecondarySuccessDangerWarningInfoLightDark
All these colors are available as a Sass map, $theme-colors.
- $theme-colors: (
+ $theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
@@ -71,7 +72,7 @@ On this page
$grays lists all tints and shades of grayWithin scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the $colors Sass map:
- $colors: (
+ $colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
@@ -139,4 +140,4 @@ On this page
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
-
Code licensed MIT, docs CC BY 3.0.
-
- Currently v5.3.7.
Projects
\ No newline at end of file
+ - Currently v5.3.8.
Projects
\ No newline at end of file
diff --git a/docs/5.3/customize/components/index.html b/docs/5.3/customize/components/index.html
index 9a13ca9189..e5051033be 100644
--- a/docs/5.3/customize/components/index.html
+++ b/docs/5.3/customize/components/index.html
@@ -1,8 +1,9 @@
- Components · Bootstrap v5.3