Hello, world!

`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set. - Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles. > This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](https://coreui.io/bootstrap/docs/getting-started/accessibility/#reduced-motion). ## Supported content Navbars come with built-in support for a handful of sub-components. Choose from the following as needed: - `.navbar-brand` for your company, product, or project name. - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors. - Flex and spacing utilities for any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. - Add an optional `.navbar-scroll` to set a `max-height` and [scroll expanded navbar content](#scrolling). Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. ```html ``` This example uses [background](https://coreui.io/bootstrap/docs/utilities/background/) (`bg-body-tertiary"`) and [spacing](https://coreui.io/bootstrap/docs/utilities/spacing/) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. ### Brand The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles. #### Text Add your text within an element with the `.navbar-brand` class. ```html ``` #### Image You can replace the text within the `.navbar-brand` with an ``. ```html ``` #### 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 ``. ```html ``` ### Nav Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) 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. Please note that you should also add the `aria-current` attribute on the active `.nav-link`. ```html ``` And because we use classes for our navs, you can avoid the list-based approach entirely if you like. ```html ``` 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. ```html ``` ### Forms Place various form controls and components within a navbar: ```html ``` Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities](https://coreui.io/bootstrap/docs/utilities/flex/) as needed to adjust this behavior. ```html ``` Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the ` ``` 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. ```html ``` ### Text Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. ```html ``` Mix and match with other components and utilities as needed. ```html ``` ## Color schemes > **New dark navbars in v5.0.0 —** We've deprecated `.navbar-dark` in favor of the new `data-coreui-theme="dark"`. Add `data-coreui-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.](https://coreui.io/bootstrap/docs/customize/color-modes/) > > --- > > **New in v4.2.6 —** 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 CoreUI for 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-coreui-theme="dark"` for dark background colors. Then, customize with `.bg-*` utilities. ```html ``` ## Containers Although it's not required, you can wrap a navbar in a `.container` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement). ```html

``` Use any of the responsive containers to change how wide the content in your navbar is presented. ```html ``` ## Placement Use our [position utilities](https://coreui.io/bootstrap/docs/utilities/position/) 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 ``) to prevent overlap with other elements. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ## Scrolling 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 `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. Here's an example navbar using `.navbar-nav-scroll` with `style="--cui-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing. ```html ``` ## Responsive behaviors 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. ### Toggler Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles. With no `.navbar-brand` shown at the smallest breakpoint: ```html ``` With a brand name shown on the left and toggler on the right: ```html ``` With a toggler on the left and brand name on the right: ```html ``` ### External content 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-coreui-target` matching, that's easily done! ```html

Collapsed content

Toggleable via the navbar brand.

``` 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. ### Offcanvas Transform your expanding and collapsing navbar into an offcanvas drawer with the [offcanvas component](https://coreui.io/bootstrap/docs/components/offcanvas/). We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar. In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely. ```html ``` To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`. ```html ``` When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. ```html ``` ## Customizing ### CSS variables Navbars 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. ```scss // stylelint-disable-next-line scss/at-function-named-arguments --cui-navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)}; --cui-navbar-padding-y: #{$navbar-padding-y}; --cui-navbar-color: #{$navbar-light-color}; --cui-navbar-hover-color: #{$navbar-light-hover-color}; --cui-navbar-disabled-color: #{$navbar-light-disabled-color}; --cui-navbar-active-color: #{$navbar-light-active-color}; --cui-navbar-brand-padding-y: #{$navbar-brand-padding-y}; --cui-navbar-brand-margin-end: #{$navbar-brand-margin-end}; --cui-navbar-brand-font-size: #{$navbar-brand-font-size}; --cui-navbar-brand-color: #{$navbar-light-brand-color}; --cui-navbar-brand-hover-color: #{$navbar-light-brand-hover-color}; --cui-navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x}; --cui-navbar-toggler-padding-y: #{$navbar-toggler-padding-y}; --cui-navbar-toggler-padding-x: #{$navbar-toggler-padding-x}; --cui-navbar-toggler-font-size: #{$navbar-toggler-font-size}; --cui-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)}; --cui-navbar-toggler-border-color: #{$navbar-light-toggler-border-color}; --cui-navbar-toggler-border-radius: #{$navbar-toggler-border-radius}; --cui-navbar-toggler-focus-width: #{$navbar-toggler-focus-width}; --cui-navbar-toggler-transition: #{$navbar-toggler-transition}; ``` Some additional CSS variables are also present on `.navbar-nav`: ```scss --cui-nav-link-padding-x: 0; --cui-nav-link-padding-y: #{$nav-link-padding-y}; @include rfs($nav-link-font-size, --cui-nav-link-font-size); --cui-nav-link-font-weight: #{$nav-link-font-weight}; --cui-nav-link-color: var(--cui-navbar-color); --cui-nav-link-hover-color: var(--cui-navbar-hover-color); --cui-nav-link-disabled-color: var(--cui-navbar-disabled-color); ``` ### SASS variables Variables for all navbars: ```scss $navbar-padding-y: $spacer * .5 !default; $navbar-padding-x: null !default; $navbar-nav-link-padding-x: .5rem !default; $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default; $navbar-brand-margin-end: 1rem !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-focus-width: $btn-focus-width !default; $navbar-toggler-transition: box-shadow .15s ease-in-out !default; $navbar-light-color: rgba(var(--cui-emphasis-color-rgb), .65) !default; $navbar-light-hover-color: rgba(var(--cui-emphasis-color-rgb), .8) !default; $navbar-light-active-color: rgba(var(--cui-emphasis-color-rgb), 1) !default; $navbar-light-disabled-color: rgba(var(--cui-emphasis-color-rgb), .3) !default; $navbar-light-icon-color: rgba($body-color, .75) !default; $navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default; $navbar-light-toggler-border-color: rgba(var(--cui-emphasis-color-rgb), .15) !default; $navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-hover-color: $navbar-light-active-color !default; ``` Variables for the [dark navbar](#color-schemes): ```scss $navbar-dark-color: rgba($white, .55) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; $navbar-dark-icon-color: $navbar-dark-color !default; $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default;$navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-dark-brand-color: $navbar-dark-active-color !default; $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; ``` ### SASS loop [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. ```scss // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { @each $breakpoint in map.keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); // stylelint-disable-next-line scss/selector-no-union-class-name &#{$infix} { @include media-breakpoint-up($next) { flex-wrap: nowrap; justify-content: flex-start; .navbar-nav { flex-direction: row; .dropdown-menu { position: absolute; } .nav-link { padding-right: var(--cui-navbar-nav-link-padding-x); padding-left: var(--cui-navbar-nav-link-padding-x); } } .navbar-nav-scroll { overflow: visible; } .navbar-collapse { display: flex !important; // stylelint-disable-line declaration-no-important flex-basis: auto; } .navbar-toggler { display: none; } .offcanvas { // stylelint-disable declaration-no-important position: static; z-index: auto; flex-grow: 1; width: auto !important; height: auto !important; visibility: visible !important; background-color: transparent !important; border: 0 !important; transform: none !important; @include box-shadow(none); @include transition(none); // stylelint-enable declaration-no-important .offcanvas-header { display: none; } .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } } } } } } ``` --- # Bootstrap 5 Navs And Tabs > Documentation and examples for how to use CoreUI for Bootstrap's included navigation components. ## Base nav Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. > The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. > > To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set. ```html

``` Classes are used throughout, so your markup can be super flexible. Use `

` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup. ```html ``` ## Available styles Change the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own. ### Horizontal alignment Change the horizontal alignment of your nav with [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/#horizontal-alignment). By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with `.justify-content-center`: ```html

``` Right-aligned with `.justify-content-end`: ```html

``` ### 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`). ```html

``` As always, vertical navigation is possible without `

`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `` elements. ```html ``` 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. ```html

``` Similar to the `.nav-fill` example using a `

`-based navigation. ```html ``` ## Working with flex utilities If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/). 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. ```html ``` ## Regarding accessibility 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 `

` element around the whole navigation. Do not add the role to the `

WAI

ARIA

...

``` To help fit your needs, this works with `

`, 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 `

`) and wrap the `

` around it. ```html

...

``` The tabs plugin also works with pills. ```html

...

``` And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container. ```html

...

``` ### Accessibility Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `

...

``` ### Via JavaScript Enable tabbable tabs via JavaScript (each tab needs to be activated individually): ```js const triggerTabList = document.querySelectorAll('#myTab button') triggerTabList.forEach(triggerEl => { const tabTrigger = new coreui.Tab(triggerEl) triggerEl.addEventListener('click', event => { event.preventDefault() tabTrigger.show() }) }) ``` You can activate individual tabs in several ways: ```js const triggerEl = document.querySelector('#myTab button[data-coreui-target="#profile"]') coreui.Tab.getInstance(triggerEl).show() // Select tab by name const triggerFirstTabEl = document.querySelector('#myTab li:first-child button') coreui.Tab.getInstance(triggerFirstTabEl).show() // Select first tab ``` ### Fade effect To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible. ```html

...

``` ### Methods > #### Asynchronous methods and transitions > > All our API methods are **asynchronous** and initiate a **transition**. They return to the caller as soon as the transition begins but **before it concludes**. Furthermore, a method call on a **transitioning component will be ignored**. > > [Refer to our JavaScript documentation for further details](https://coreui.io/bootstrap/docs/getting-started/javascript/#asynchronous-functions-and-transitions). #### constructor You can create a tab instance with the constructor, for example: ```js const cuiTab = new coreui.Tab('#myTab') ``` | Method | Description | | --- | --- | | `dispose` | Destroys an element's tab. | | `getInstance` | *Static* method which allows you to get the tab instance associated with a DOM element, you can use it like this: `coreui.Tab.getInstance(element)`. | | `getOrCreateInstance` | *Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized You can use it like this: `coreui.Tab.getOrCreateInstance(element)`. | | `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.coreui.tab` event occurs). | ### Events When showing a new tab, the events fire in the following order: 1. `hide.coreui.tab` (on the current active tab) 2. `show.coreui.tab` (on the to-be-shown tab) 3. `hidden.coreui.tab` (on the previous active tab, the same one as for the `hide.coreui.tab` event) 4. `shown.coreui.tab` (on the newly-active just-shown tab, the same one as for the `show.coreui.tab` event) If no tab was already active, then the `hide.coreui.tab` and `hidden.coreui.tab` events will not be fired. | Event type | Description | | --- | --- | | `hide.coreui.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. | | `hidden.coreui.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. | | `show.coreui.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | | `shown.coreui.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | ```js const tabEl = document.querySelector('button[data-coreui-toggle="tab"]') tabEl.addEventListener('shown.coreui.tab', event => { event.target // newly activated tab event.relatedTarget // previous active tab }) ``` ## Customizing ### CSS variables Navs use local CSS variables on `.nav`, `.nav-tabs`, `.nav-pills`, `.nav-underline` and `.nav-underline-border` 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: ```scss --cui-nav-link-padding-x: #{$nav-link-padding-x}; --cui-nav-link-padding-y: #{$nav-link-padding-y}; @include rfs($nav-link-font-size, --cui-nav-link-font-size); --cui-nav-link-font-weight: #{$nav-link-font-weight}; --cui-nav-link-color: #{$nav-link-color}; --cui-nav-link-hover-color: #{$nav-link-hover-color}; --cui-nav-link-disabled-color: #{$nav-link-disabled-color}; ``` On the `.nav-tabs` modifier class: ```scss --cui-nav-tabs-border-width: #{$nav-tabs-border-width}; --cui-nav-tabs-border-color: #{$nav-tabs-border-color}; --cui-nav-tabs-border-radius: #{$nav-tabs-border-radius}; --cui-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color}; --cui-nav-tabs-link-active-color: #{$nav-tabs-link-active-color}; --cui-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg}; --cui-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color}; ``` On the `.nav-pills` modifier class: ```scss --cui-nav-pills-border-radius: #{$nav-pills-border-radius}; --cui-nav-pills-link-active-color: #{$nav-pills-link-active-color}; --cui-nav-pills-link-active-bg: #{$nav-pills-link-active-bg}; ``` _Added in 5.0.0._ On the `.nav-underline` modifier class: ```scss --cui-nav-underline-gap: #{$nav-underline-gap}; --cui-nav-underline-border-width: #{$nav-underline-border-width}; --cui-nav-underline-link-active-color: #{$nav-underline-link-active-color}; ``` _Added in 5.0.0._ On the `.nav-underline-border` modifier class: ```scss --cui-nav-underline-border-gap: #{$nav-underline-border-gap}; --cui-nav-underline-border-border-color: #{$nav-underline-border-border-color}; --cui-nav-underline-border-border-width: #{$nav-underline-border-border-width}; --cui-nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x}; --cui-nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y}; --cui-nav-underline-border-link-color: #{$nav-underline-border-link-color}; --cui-nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color}; --cui-nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color}; ``` ### SASS variables ```scss $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; $nav-link-font-size: null !default; $nav-link-font-weight: null !default; $nav-link-color: var(--cui-link-color) !default; $nav-link-hover-color: var(--cui-link-hover-color) !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: var(--cui-secondary-color) !default; $nav-link-focus-box-shadow: $focus-ring-box-shadow !default; $nav-tabs-border-color: var(--cui-border-color) !default; $nav-tabs-border-width: var(--cui-border-width) !default; $nav-tabs-border-radius: var(--cui-border-radius) !default; $nav-tabs-link-hover-border-color: var(--cui-secondary-bg) var(--cui-secondary-bg) $nav-tabs-border-color !default; $nav-tabs-link-active-color: var(--cui-emphasis-color) !default; $nav-tabs-link-active-bg: var(--cui-body-bg) !default; $nav-tabs-link-active-border-color: var(--cui-border-color) var(--cui-border-color) $nav-tabs-link-active-bg !default; $nav-pills-border-radius: var(--cui-border-radius) !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; $nav-underline-gap: 1rem !default; $nav-underline-border-width: .125rem !default; $nav-underline-link-active-color: var(--cui-emphasis-color) !default; $nav-underline-border-gap: .5rem !default; $nav-underline-border-border-color: var(--cui-border-color) !default; $nav-underline-border-border-width: .125rem !default; $nav-underline-border-link-padding-y: .5rem !default; $nav-underline-border-link-padding-x: .5rem !default; $nav-underline-border-link-color: var(--cui-secondary-color) !default; $nav-underline-border-link-active-color: var(--cui-primary) !default; $nav-underline-border-link-disabled-color: var(--cui-tertiary-color) !default; $nav-enclosed-padding: .125rem !default; $nav-enclosed-bg: var(--cui-tertiary-bg) !default; $nav-enclosed-border-radius: $border-radius-lg !default; $nav-enclosed-link-padding-y: .375rem !default; $nav-enclosed-link-padding-x: .875rem !default; $nav-enclosed-link-color: var(--cui-body-color) !default; $nav-enclosed-link-border-width: 1px !default; $nav-enclosed-link-active-color: var(--cui-body-color) !default; $nav-enclosed-link-active-bg: var(--cui-body-bg) !default; $nav-enclosed-link-active-border-color: var(--cui-border-color) !default; $nav-enclosed-link-hover-box-shadow: var(--cui-box-shadow-sm) !default; $nav-enclosed-link-disabled-color: var(--cui-secondary-color) !default; ``` --- # Bootstrap 5 Offcanvas > Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. ## How it works The Bootstrap Offcanvas component serves as a sidebar element that can be activated through JavaScript, allowing it to slide in from the left, right, top, or bottom of the viewport. Triggers, like buttons or anchors, are linked to the elements you want to toggle, and data attributes facilitate their activation in JavaScript. - Offcanvas shares some JavaScript code with modals. Conceptually, they are quite similar, but they remain separate plugins. - Likewise, some [source Sass](#sass) variables for offcanvas styles and dimensions are derived from the modal variables. - When displayed, offcanvas features a default backdrop that can be clicked to hide it. - As with modals, only one offcanvas can be displayed at a time. **Attention!** Due to CSS animation handling, `margin` or `translate` cannot be applied to an `.offcanvas` element. Instead, utilize the class as a separate wrapping element. > This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](https://coreui.io/bootstrap/docs/getting-started/accessibility/#reduced-motion). ## Examples ### Offcanvas components Below is a default offcanvas example (via `.show` on `.offcanvas`). Offcanvas supports a header with a close button and an optional body class for initial `padding`. We recommend including offcanvas headers with dismiss actions whenever possible, or providing an explicit dismiss action. ```html

The content for the Bootstrap offcanvas goes here. You can place nearly any Bootstrap component or custom element here.

``` ### Live demo Utilize the buttons below to toggle the visibility of an offcanvas element using JavaScript, which adds or removes the `.show` class from an element with the `.offcanvas` class. - `.offcanvas` hides content. - `.offcanvas.show` shows content. You can employ a link with the `href` attribute or a button featuring the `data-coreui-target` attribute. In both instances, including `data-coreui-toggle="offcanvas"` is necessary. ```html Link with href

Some text as a placeholder. In real life, you can have the elements you have chosen, like text, images, lists, etc.

``` ### Body scrolling The `` element's scrolling is disabled when the Bootstrap offcanvas and its backdrop are visible. Utilize the `data-coreui-scroll` attribute to allow scrolling on the ``. ```html

Scroll further down the page to see this option in action.

``` ### Body scrolling and backdrop You can also enable `` scrolling with a visible backdrop. ```html

Try scrolling the rest of the page to see this option in action.

``` ### Static backdrop When the backdrop is set to static, the Bootstrap offcanvas will remain open when clicking outside of it. ```html

I won’t close if you click outside of me.

``` ## Dark offcanvas _Added in 4.2.6._ Change the appearance of offcanvas elements using utilities to better match various contexts, such as dark navbars. Here, we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If there are dropdowns inside, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. > Attention! Dark variants for components are no longer supported as of v5.3.0 due to the introduction of color modes. Instead of manually adding the classes mentioned earlier, simply set `data-coreui-theme="dark"` on the root element, a parent wrapper, or the component itself. ```html

Place offcanvas content here.

``` ## Responsive _Added in 4.2.6._ Responsive offcanvas classes hide content that is outside the viewport from a specified breakpoint and lower. Above that breakpoint, the content will behave normally. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but displays the content above the `lg` breakpoint. ```html

Resize your browser to show the responsive offcanvas toggle.

This is content within an .offcanvas-lg.

``` Responsive offcanvas classes are available for each breakpoint. - `.offcanvas` - `.offcanvas-sm` - `.offcanvas-md` - `.offcanvas-lg` - `.offcanvas-xl` - `.offcanvas-xxl` ## Placement Offcanvas components do not have a default position; therefore, you need to apply one of the modifier classes listed below. - `.offcanvas-start` places the offcanvas on the left side of the viewport (as shown above) - `.offcanvas-end` places the offcanvas on the right side of the viewport - `.offcanvas-top` places offcanvas at the top of the viewport - `.offcanvas-bottom` places offcanvas at the bottom of the viewport Feel free to experiment with the top, right, and bottom examples below. ```html

...

``` ```html

...

``` ```html

...

``` ## Accessibility 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. ## Usage The offcanvas plugin leverages several classes and attributes to perform its functions: - `.offcanvas` hides the content - `.offcanvas.show` shows the content - `.offcanvas-start` hides the offcanvas on the left - `.offcanvas-end` hides the offcanvas on the right - `.offcanvas-top` hides the offcanvas at the top - `.offcanvas-bottom` hides the offcanvas at the bottom Include a dismiss button using the `data-coreui-dismiss="offcanvas"` attribute to activate the JavaScript functionality. Ensure you use the ` ``` > While both methods for dismissing an offcanvas are supported, remember that dismissing from the outside of an offcanvas does not align with the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Proceed with caution. ### Via JavaScript Enable manually with: ```js const offcanvasElementList = document.querySelectorAll('.offcanvas') const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new coreui.Offcanvas(offcanvasEl)) ``` ### Options Options can be passed using data attributes or JavaScript. To do this, append an option name to `data-coreui-`, such as `data-coreui-animation="{value}"`. Remember to convert the case of the option name from "_camelCase_" to "_kebab-case_" when using data attributes. For instance, you should write `data-coreui-custom-class="beautifier"` rather than `data-coreui-customClass="beautifier"`. Starting with CoreUI 4.2.6, all components support an **experimental** reserved data attribute named `data-coreui-config`, which can contain simple component configurations as a JSON string. If an element has attributes `data-coreui-config='{"delay":50, "title":689}'` and `data-coreui-title="Custom Title"`, then the final value for `title` will be `Custom Title`, as the standard data attributes will take precedence over values specified in `data-coreui-config`. Moreover, existing data attributes can also hold JSON values like `data-coreui-delay='{"show":50, "hide":250}'`. | Name | Type | Default | Description | | --- | --- | --- | --- | | `backdrop` | boolean or the string `static` | `true` | Applies a backdrop to the body while the Bootstrap offcanvas is open. Alternatively, specify `static` for a backdrop that doesn't close the offcanvas component when clicked. | | `keyboard` | boolean | `true` | Closes the offcanvas when the escape key is pressed. | | `scroll` | boolean | `false` | Allows body scrolling while the offcanvas is open. ### Methods > #### Asynchronous methods and transitions > > All our API methods are **asynchronous** and initiate a **transition**. They return to the caller as soon as the transition begins but **before it concludes**. Furthermore, a method call on a **transitioning component will be ignored**. > > [Refer to our JavaScript documentation for further details](https://coreui.io/bootstrap/docs/getting-started/javascript/#asynchronous-functions-and-transitions). Activates your content as an offcanvas element and accepts an optional options `object`. You can create an offcanvas instance using the constructor; for example: ```js const cuiOffcanvas = new coreui.Offcanvas('#myOffcanvas') ``` | Method | Description | | --- | --- | | `getInstance` | *Static* method that allows you to obtain the offcanvas instance associated with a DOM element | | `getOrCreateInstance` | *Static* method that enables you to retrieve the offcanvas instance linked to a DOM element, or create a new one if it hasn't been initialized | | `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element is actually hidden** (i.e. before the `hidden.coreui.offcanvas` event occurs).| | `show` | Displays an offcanvas element. **Returns to the caller before the offcanvas element is actually shown** (i.e. before the `shown.coreui.offcanvas` event occurs).| | `toggle` | Switches an offcanvas element between shown and hidden. **Returns to the caller before the offcanvas element is actually shown or hidden** (i.e. before the `shown.coreui.offcanvas` or `hidden.coreui.offcanvas` event occurs). ### Events CoreUI for Bootstrap's offcanvas class exposes a few events for hooking into offcanvas functionality. | Event Type | Description | | --- | --- | | `hide.coreui.offcanvas` | This event is fired immediately after the `hide` method has been called. | | `hidden.coreui.offcanvas` | This event is fired when an offcanvas element is hidden from the user (it will wait for CSS transitions to complete). | | `hidePrevented.coreui.offcanvas` | This event is triggered when the offcanvas is shown, its backdrop is `static`, and a click outside of the offcanvas occurs. The event is also triggered when the escape key is pressed and the `keyboard` option is set to `false`. | | `show.coreui.offcanvas` | This event fires immediately when the `show` instance method is invoked. | | `shown.coreui.offcanvas` | This event is fired when an offcanvas element becomes visible to the user (it will wait for CSS transitions to complete). ```js const myOffcanvas = document.getElementById('myOffcanvas') myOffcanvas.addEventListener('hidden.coreui.offcanvas', event => { // do something... }) ``` ## Customization ### CSS variables Offcanvas utilizes local CSS variables on `.offcanvas` for improved real-time customization. The values for the CSS variables are defined through Sass, ensuring that Sass customization remains supported as well. ```scss --cui-offcanvas-zindex: #{$zindex-offcanvas}; --cui-offcanvas-width: #{$offcanvas-horizontal-width}; --cui-offcanvas-height: #{$offcanvas-vertical-height}; --cui-offcanvas-padding-x: #{$offcanvas-padding-x}; --cui-offcanvas-padding-y: #{$offcanvas-padding-y}; --cui-offcanvas-color: #{$offcanvas-color}; --cui-offcanvas-bg: #{$offcanvas-bg-color}; --cui-offcanvas-border-width: #{$offcanvas-border-width}; --cui-offcanvas-border-color: #{$offcanvas-border-color}; --cui-offcanvas-box-shadow: #{$offcanvas-box-shadow}; --cui-offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out}; --cui-offcanvas-title-line-height: #{$offcanvas-title-line-height}; ``` ### SASS variables ```scss $offcanvas-padding-y: $modal-inner-padding !default; $offcanvas-padding-x: $modal-inner-padding !default; $offcanvas-horizontal-width: 400px !default; $offcanvas-vertical-height: 30vh !default; $offcanvas-transition-duration: .3s !default; $offcanvas-border-color: $modal-content-border-color !default; $offcanvas-border-width: $modal-content-border-width !default; $offcanvas-title-line-height: $modal-title-line-height !default; $offcanvas-bg-color: var(--cui-body-bg) !default; $offcanvas-color: var(--cui-body-color) !default; $offcanvas-box-shadow: $modal-content-box-shadow-xs !default; $offcanvas-backdrop-bg: $modal-backdrop-bg !default; $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; ``` --- # Bootstrap 5 Pagination > Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. ## Overview We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `

` element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive `aria-label` for the `

` to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="Search results pages"`. ```html ``` ## Working with icons 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. ```html ``` ## Disabled and active states Pagination links are customizable for different circumstances. Use `.disabled` for links that appear un-clickable and `.active` to indicate the current page. While the `.disabled` class uses `pointer-events: none` to _try_ to disable the link functionality of ``s, that CSS property is not yet standardized and doesn't account for keyboard navigation. As such, you should always add `tabindex="-1"` on disabled links and use custom JavaScript to fully disable their functionality. ```html ``` You can optionally swap out active or disabled anchors for ``, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles. ```html ``` ## Sizing Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes. ```html ``` ```html ``` ## Alignment Change the alignment of pagination components with [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/). For example, with `.justify-content-center`: ```html ``` Or with `.justify-content-end`: ```html ``` ## Customizing ### CSS variables 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. ```scss --cui-pagination-padding-x: #{$pagination-padding-x}; --cui-pagination-padding-y: #{$pagination-padding-y}; @include rfs($pagination-font-size, --cui-pagination-font-size); --cui-pagination-color: #{$pagination-color}; --cui-pagination-bg: #{$pagination-bg}; --cui-pagination-border-width: #{$pagination-border-width}; --cui-pagination-border-color: #{$pagination-border-color}; --cui-pagination-border-radius: #{$pagination-border-radius}; --cui-pagination-hover-color: #{$pagination-hover-color}; --cui-pagination-hover-bg: #{$pagination-hover-bg}; --cui-pagination-hover-border-color: #{$pagination-hover-border-color}; --cui-pagination-focus-color: #{$pagination-focus-color}; --cui-pagination-focus-bg: #{$pagination-focus-bg}; --cui-pagination-focus-box-shadow: #{$pagination-focus-box-shadow}; --cui-pagination-active-color: #{$pagination-active-color}; --cui-pagination-active-bg: #{$pagination-active-bg}; --cui-pagination-active-border-color: #{$pagination-active-border-color}; --cui-pagination-disabled-color: #{$pagination-disabled-color}; --cui-pagination-disabled-bg: #{$pagination-disabled-bg}; --cui-pagination-disabled-border-color: #{$pagination-disabled-border-color}; ``` ### SASS variables ```scss $pagination-padding-y: .375rem !default; $pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; $pagination-padding-x-sm: .5rem !default; $pagination-padding-y-lg: .75rem !default; $pagination-padding-x-lg: 1.5rem !default; $pagination-font-size: $font-size-base !default; $pagination-color: var(--cui-link-color) !default; $pagination-bg: var(--cui-body-bg) !default; $pagination-border-radius: var(--cui-border-radius) !default; $pagination-border-width: var(--cui-border-width) !default; $pagination-margin-start: calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list $pagination-border-color: var(--cui-border-color) !default; $pagination-focus-color: var(--cui-link-hover-color) !default; $pagination-focus-bg: var(--cui-secondary-bg) !default; $pagination-focus-box-shadow: $focus-ring-box-shadow !default; $pagination-focus-outline: 0 !default; $pagination-hover-color: var(--cui-link-hover-color) !default; $pagination-hover-bg: var(--cui-tertiary-bg) !default; $pagination-hover-border-color: var(--cui-border-color) !default; // Todo in v6: remove this? $pagination-active-color: $component-active-color !default; $pagination-active-bg: $component-active-bg !default; $pagination-active-border-color: $component-active-bg !default; $pagination-disabled-color: var(--cui-secondary-color) !default; $pagination-disabled-bg: var(--cui-secondary-bg) !default; $pagination-disabled-border-color: var(--cui-border-color) !default; $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; $pagination-border-radius-sm: var(--cui-border-radius-sm) !default; $pagination-border-radius-lg: var(--cui-border-radius-lg) !default; ``` ### SASS mixins ```scss @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { --cui-pagination-padding-x: #{$padding-x}; --cui-pagination-padding-y: #{$padding-y}; @include rfs($font-size, --cui-pagination-font-size); --cui-pagination-border-radius: #{$border-radius}; } ``` --- # Bootstrap 5 Placeholders > Use loading placeholders for your components or pages to indicate something may still be loading. ## About Bootstrap placeholders can enhance your application's user experience. They're built exclusively with HTML and CSS, so you don't need any JavaScript to create them. However, you'll require some custom JavaScript to toggle their visibility. Their appearance, color, and size can be easily customized using our utility classes. ## Example In the example below, we use the Bootstrap card component and modify it with placeholders to form a "loading card." The size and proportions remain consistent between the two. ```html

Bootstrap card title

Some brief example text to expand on the card title and form most of the card's content.

Go somewhere

``` ## How it works Create placeholders using the `.placeholder` class along with a grid column class (e.g., `.col-6`) to define the `width`. These placeholders can either replace text inside an element or be added as a modifier class to an existing component. To ensure the `height` is maintained, we style `.btn`s with `::before`. This pattern can be expanded for other cases or a ` ` can be added inside the element to match the height when actual text appears. ```html ``` > Using `aria-hidden="true"` simply tells screen readers to ignore the element. The actual *loading* behavior of the placeholder depends on how authors implement and style the placeholder, as well as how they update it. Some JavaScript may be necessary to *toggle* the placeholder's state and notify AT users of the change. ### Width You can adjust the `width` using grid column classes, width utilities, or inline styles. ```html ``` ### Color By default, the `placeholder` uses `currentColor`, but this can be replaced with a custom color or utility class. ```html ``` ### Sizing The size of `.placeholder`s depends on the typographic style of the parent element. Customize them with size modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`. ```html ``` ### Animation Animate Bootstrap placeholders using `.placeholder-glow` or `.placeholder-wave` to visually suggest that content is _actively_ loading. ```html

``` ## Customization ### SASS variables ```scss $placeholder-opacity-max: .5 !default; $placeholder-opacity-min: .2 !default; ``` --- # Bootstrap 5 Popovers > Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. ## Overview Things to know when using the popover plugin: - Popovers rely on the 3rd party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js](https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js) before coreui.js or use `coreui.bundle.min.js` / `coreui.bundle.js` which contains Popper in order for popovers to work! - Popovers require the [tooltip plugin](https://coreui.io/bootstrap/docs/components/tooltips/) as a dependency. - Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Zero-length `title` and `content` values will never show a popover. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Triggering popovers on hidden elements will not work. - Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element. - When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `.text-nowrap` on your ``s to avoid this behavior. - Popovers must be hidden before their corresponding elements have been removed from the DOM. - Popovers can be triggered thanks to an element inside a shadow DOM. > By default, this component utilizes the built-in content sanitizer, which removes any HTML elements that are not explicitly allowed. Refer to the [sanitizer section in our JavaScript documentation](https://coreui.io/bootstrap/docs/getting-started/javascript/#sanitizer) for more details. > This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](https://coreui.io/bootstrap/docs/getting-started/accessibility/#reduced-motion). Keep reading to see how popovers work with some examples. ## Examples ### Enable popovers everywhere One way to initialize all popovers on a page would be to select them by their `data-coreui-toggle` attribute: ```js const popoverTriggerList = document.querySelectorAll('[data-coreui-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new coreui.Popover(popoverTriggerEl)) ``` ```js document .querySelectorAll('[data-coreui-toggle="popover"]') .forEach(popover => { new coreui.Popover(popover) }) ``` ### Live demo We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `data-coreui-title` and body content is set via `data-coreui-content`. > You can choose to use either `title` or `data-coreui-title` in your HTML. If you opt for `title,` Popper will automatically change it to `data-coreui-title` upon rendering the element. ```html ``` ### Four directions Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI in RTL. ```html ``` ### Using the `container` option When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. ```js const popover = new coreui.Popover(document.querySelector('.example-popover'), { container: 'body' }) ``` ### Custom popovers _Added in 4.2.6._ You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-coreui-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables. ```scss .custom-popover { --cui-popover-max-width: 200px; --cui-popover-border-color: var(--cui-primary); --cui-popover-header-bg: var(--cui-primary); --cui-popover-header-color: var(--cui-white); --cui-popover-body-padding-x: 1rem; --cui-popover-body-padding-y: .5rem; } ``` ```html ``` ### Dismiss on next click Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element. A shown popover can also be dismissed by pressing the Escape key. As with dropdown menus, a popover shown inside a dialog is dismissed on its own: the first Escape closes the popover and a subsequent one closes the dialog. > #### Specific markup required for dismiss-on-next-click > > For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the `` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute. ```html Dismissible popover ``` ```js const popover = new coreui.Popover(document.querySelector('.popover-dismiss'), { trigger: 'focus' }) ``` ### Disabled elements Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `

` or ``, ideally made keyboard-focusable using `tabindex="0"`. For disabled popover triggers, you may also prefer `data-coreui-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element. ```html ``` ## Usage Enable popovers via JavaScript: ```js const exampleEl = document.getElementById('example') const popover = new coreui.Popover(exampleEl, options) ``` > ### Making popovers work for keyboard and assistive technology users > > To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as ``s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users. > > While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream. > > Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing TAB will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead. ### Options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-coreui-`, as in `data-coreui-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing via data attributes. For example: instead of using `data-coreui-customClass="beautifier"`, use `data-coreui-custom-class="beautifier"`. > Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. | Name | Type | Default | Description | | --- | --- | --- | --- | | `allowList` | object | [Default value](https://coreui.io/bootstrap/docs/getting-started/javascript/#sanitizer) | Object which contains allowed attributes and tags. | | `animation` | boolean | `true` | Apply a CSS fade transition to the popover | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | | `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. | | `content` | string, element, function | `''` | Default content value if `data-coreui-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. | | `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. | | `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). | | `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. | | `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-coreui-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). | | `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. | | `popperConfig` | null, object, function | `null` | To change CoreUI for Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the CoreUI for Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.| | `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. | | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | | `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue](https://github.com/coreui/coreui/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `''` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. | | `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | > #### Data attributes for individual popovers > > Options for individual popovers can alternatively be specified through the use of data attributes, as explained above. #### Using function with `popperConfig` ```js const popover = new coreui.Popover(element, { popperConfig(defaultBsPopperConfig) { // const newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig } }) ``` ### Methods > #### Asynchronous methods and transitions > > All our API methods are **asynchronous** and initiate a **transition**. They return to the caller as soon as the transition begins but **before it concludes**. Furthermore, a method call on a **transitioning component will be ignored**. > > [Refer to our JavaScript documentation for further details](https://coreui.io/bootstrap/docs/getting-started/javascript/#asynchronous-functions-and-transitions). | Method | Description | | --- | --- | | `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. | | `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. | | `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** | | `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. | | `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized | | `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.coreui.popover` event occurs). This is considered a "manual" triggering of the popover. | | `setContent` | Gives a way to change the popover's content after its initialization. | | `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.coreui.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. | | `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.coreui.popover` or `hidden.coreui.popover` event occurs). This is considered a "manual" triggering of the popover. | | `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. | | `update` | Updates the position of an element's popover. | ```js // getOrCreateInstance example const popover = coreui.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance // setContent example myPopover.setContent({ '.popover-header': 'another title', '.popover-body': 'another content' }) ``` > The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` ### Events | Event | Description | | --- | --- | | `show.coreui.popover` | This event fires immediately when the `show` instance method is called. | | `shown.coreui.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | | `hide.coreui.popover` | This event is fired immediately when the `hide` instance method has been called. | | `hidden.coreui.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | | `inserted.coreui.popover` | This event is fired after the `show.coreui.popover` event when the popover template has been added to the DOM. | ```js const myPopoverTrigger = document.getElementById('myPopover') myPopoverTrigger.addEventListener('hidden.coreui.popover', () => { // do something... }) ``` ## Customizing ### CSS variables Popovers use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --cui-popover-zindex: #{$zindex-popover}; --cui-popover-max-width: #{$popover-max-width}; @include rfs($popover-font-size, --cui-popover-font-size); --cui-popover-bg: #{$popover-bg}; --cui-popover-border-width: #{$popover-border-width}; --cui-popover-border-color: #{$popover-border-color}; --cui-popover-border-radius: #{$popover-border-radius}; --cui-popover-inner-border-radius: #{$popover-inner-border-radius}; --cui-popover-box-shadow: #{$popover-box-shadow}; --cui-popover-header-padding-x: #{$popover-header-padding-x}; --cui-popover-header-padding-y: #{$popover-header-padding-y}; @include rfs($popover-header-font-size, --cui-popover-header-font-size); --cui-popover-header-color: #{$popover-header-color}; --cui-popover-header-bg: #{$popover-header-bg}; --cui-popover-body-padding-x: #{$popover-body-padding-x}; --cui-popover-body-padding-y: #{$popover-body-padding-y}; --cui-popover-body-color: #{$popover-body-color}; --cui-popover-arrow-width: #{$popover-arrow-width}; --cui-popover-arrow-height: #{$popover-arrow-height}; --cui-popover-arrow-border: var(--cui-popover-border-color); ``` ### SASS variables ```scss $popover-font-size: $font-size-sm !default; $popover-bg: var(--cui-body-bg) !default; $popover-max-width: 276px !default; $popover-border-width: var(--cui-border-width) !default; $popover-border-color: var(--cui-border-color-translucent) !default; $popover-border-radius: var(--cui-border-radius-lg) !default; $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list $popover-box-shadow: var(--cui-box-shadow) !default; $popover-header-font-size: $font-size-base !default; $popover-header-bg: var(--cui-secondary-bg) !default; $popover-header-color: $headings-color !default; $popover-header-padding-y: .5rem !default; $popover-header-padding-x: $spacer !default; $popover-body-color: var(--cui-body-color) !default; $popover-body-padding-y: $spacer !default; $popover-body-padding-x: $spacer !default; $popover-arrow-width: 1rem !default; $popover-arrow-height: .5rem !default; ``` --- # Bootstrap 5 Progress > Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. ## How it works Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. - We use the inner `.progress-bar` to indicate the progress so far. - The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. - The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. Put that all together, and you have the following examples. ```html

``` Bootstrap provides a handful of [utilities for setting width](https://coreui.io/bootstrap/docs/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress. ```html

``` ## Labels Add labels to your progress bars by placing text within the `.progress-bar`. ```html

25%

``` ## Height We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly. ```html

``` ## Backgrounds Use background utility classes to change the appearance of individual progress bars. ```html

``` ## Multiple bars Include multiple progress bars in a progress component if you need. ```html

``` ## Striped Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. ```html

``` ## Animated stripes The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. ```html

``` ## Progress group ```html

Title

``` ```html

Male

43%

``` ```html

Organic Search

191.235

(56%)

``` ## Customizing ### CSS variables Progress bars 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. ```scss --cui-progress-height: #{$progress-height}; @include rfs($progress-font-size, --cui-progress-font-size); --cui-progress-bg: #{$progress-bg}; --cui-progress-border-radius: #{$progress-border-radius}; --cui-progress-box-shadow: #{$progress-box-shadow}; --cui-progress-bar-color: #{$progress-bar-color}; --cui-progress-bar-bg: #{$progress-bar-bg}; --cui-progress-bar-transition: #{$progress-bar-transition}; ``` ### SASS variables ```scss $progress-height: 1rem !default; $progress-font-size: $font-size-base * .75 !default; $progress-bg: var(--cui-secondary-bg) !default; $progress-border-radius: var(--cui-border-radius) !default; $progress-box-shadow: var(--cui-box-shadow-inset) !default; $progress-bar-color: $white !default; $progress-bar-bg: var(--cui-primary) !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; // TODO: clean-up ??? $progress-group-margin-bottom: $spacer !default; $progress-group-header-margin-bottom: $spacer * .25 !default; ``` ### Keyframes Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`. ```scss @if $enable-transitions { @keyframes progress-bar-stripes { 0% { background-position-x: var(--cui-progress-height); } } } ``` --- # Bootstrap 5 Scrollspy > Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. ## How it works Scrollspy has a few requirements to function properly: - It must be used on a Bootstrap [nav component](https://coreui.io/bootstrap/docs/components/navs-tabs/) or [list group](https://coreui.io/bootstrap/docs/components/list-group/). - Scrollspy requires `position: relative;` on the element you're spying on, usually the ``. - Anchors (``) are required and must point to an element with that `id`. When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets. ### Scrollable containers and keyboard access If you're making a scrollable container (other than the ``), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access. ## Example in navbar Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well. ```html

First heading

...

Second heading

...

Third heading

...

Fourth heading

...

Fifth heading

...

``` ## Example with nested nav Scrollspy also works with nested `.nav`s. 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. ```html

Item 1

...

Item 1-1

...

Item 1-2

...

Item 2

...

Item 3

...

Item 3-1

...

Item 3-2

...

``` ## Example with list-group Scrollspy also works with `.list-group`s. Scroll the area next to the list group and watch the active class change. ```html

Item 1 Item 2 Item 3 Item 4

Item 1

...

Item 2

...

Item 3

...

Item 4

...

``` ## Usage ### Via data attributes To easily add scrollspy behavior to your topbar navigation, add `data-coreui-spy="scroll"` to the element you want to spy on (most typically this would be the ``). Then add the `data-coreui-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component. ```css body { position: relative; } ``` ```html ... ... ``` ### Via JavaScript After adding `position: relative;` in your CSS, call the scrollspy via JavaScript: ```js const scrollSpy = new coreui.ScrollSpy(document.body, { target: '#navbar-example' }) ``` ### Options Options can be passed using data attributes or JavaScript. To do this, append an option name to `data-coreui-`, such as `data-coreui-animation="{value}"`. Remember to convert the case of the option name from "_camelCase_" to "_kebab-case_" when using data attributes. For instance, you should write `data-coreui-custom-class="beautifier"` rather than `data-coreui-customClass="beautifier"`. Starting with CoreUI 4.2.6, all components support an **experimental** reserved data attribute named `data-coreui-config`, which can contain simple component configurations as a JSON string. If an element has attributes `data-coreui-config='{"delay":50, "title":689}'` and `data-coreui-title="Custom Title"`, then the final value for `title` will be `Custom Title`, as the standard data attributes will take precedence over values specified in `data-coreui-config`. Moreover, existing data attributes can also hold JSON values like `data-coreui-delay='{"show":50, "hide":250}'`. | Name | Type | Default | Description | | --- | --- | --- | --- | | `rootMargin` | string | `0px 0px -25%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. | | `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. | | `target` | string, DOM element | `null` | Specifies element to apply Scrollspy plugin. | > **Deprecated Options** > > Up until v5.1.3 we were using `offset` & `method` options, which are now deprecated and replaced by `rootMargin`. > To keep backwards compatibility, we will continue to parse a given `offset` to `rootMargin`, but this feature will be removed in **v6**. ### Methods | Method | Description | | --- | --- | | `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) | | `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element | | `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn't initialized. | | `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. | Here's an example using the refresh method: ```js const dataSpyList = document.querySelectorAll('[data-coreui-spy="scroll"]') dataSpyList.forEach(dataSpyEl => { coreui.ScrollSpy.getInstance(dataSpyEl).refresh() }) ``` ### Events | Event | Description | | --- | --- | | `activate.coreui.scrollspy` | This event fires on the scroll element whenever an anchor is activated by the scrollspy. | ```js const firstScrollSpyEl = document.querySelector('[data-coreui-spy="scroll"]') firstScrollSpyEl.addEventListener('activate.coreui.scrollspy', () => { // do something... }) ``` --- # Bootstrap 5 Search Button > Bootstrap Search Button for CoreUI is a keyboard-aware trigger component that can open search interfaces, modals, offcanvas panels, and custom flows from click or shortcut. ## Overview The CoreUI **Bootstrap Search Button component** is a trigger element designed for search entry points and command-style actions. It behaves like a regular button on click, but it can also react to a configurable keyboard shortcut such as `meta+/` or `ctrl+/`. - Use it as a standalone trigger for a custom search UI. - Combine it with `data-coreui-toggle` and `data-coreui-target` to open a modal or offcanvas. - Shortcut keys are rendered automatically. - Displayed shortcut keys react to keyboard interaction and receive an `.active` state while pressed. ## Basic example Use `.search-button` together with `data-coreui-search-button`. The keyboard shortcut keys are generated automatically by JavaScript. Because the component dispatches a real `click()` when the configured shortcut matches, it works with CoreUI data APIs such as modal, offcanvas, or collapse triggers. ```html ``` ```html ``` ## Custom shortcut Configure the shortcut with `data-coreui-shortcut`. On macOS, the component prefers the `meta` variant for the visual label. On Windows and Linux, it prefers the `ctrl` variant. > Shortcuts such as `meta+f`, `ctrl+f`, `meta+s`, or `ctrl+s` can override native browser or system shortcuts. Prefer safer combinations such as `meta+/` and `ctrl+/` unless replacing the default behavior is intentional. ```html ``` ```html ``` ## Launch an offcanvas Because the component dispatches a real `click()` when the configured shortcut matches, it works with CoreUI data APIs such as modal, offcanvas, or collapse triggers. This demo uses `meta+shift+o` / `ctrl+shift+o` to avoid colliding with other live examples on the page. ```html

Use this space for filters, recent searches, or command shortcuts.

``` ```html

Use this space for filters, recent searches, or command shortcuts.

``` ## Keyboard behavior ### When the configured shortcut is pressed | Key | Action | | --- | --- | | `Enter` / `Space` on a focused search button | Trigger the same action as a pointer click | | Configured shortcut, e.g. `⌘/` / `Ctrl+/` | Trigger the same action as a pointer click | | Modifier key inside the visible shortcut | Add `.active` to the corresponding `.search-button-key` while pressed | | Final key inside the visible shortcut | Add `.active` to the corresponding `.search-button-key` while pressed | ### Keyboard state behavior | Interaction | Effect | | --- | --- | | Matching shortcut on `keydown` | Optionally prevents the browser's default behavior and dispatches the component trigger | | Plain typing inside `input`, `textarea`, `select`, or `contenteditable` | Does not trigger the component without `meta` or `ctrl` | | `keyup` after a shortcut key press | Removes `.active` from the rendered shortcut keys | | Browser window `blur` | Clears all active shortcut key states | | Multiple configured shortcuts | The component listens to all configured shortcuts and renders the platform-preferred one in the UI | ## Accessibility Accessibility is an important part of the Search Button design. The component includes built-in behaviors that help preserve expected keyboard interaction and reduce conflicts with assistive technologies, but accessible results still depend on choosing the right markup and shortcut combinations. ### Built-in accessibility behavior - Native button semantics are preserved when the component is used on a ` ``` ### Via JavaScript ```js const searchButton = document.querySelector('[data-coreui-search-button]') new coreui.SearchButton(searchButton, { shortcut: 'meta+i,ctrl+i' }) ``` ### Options | Name | Type | Default | Description | | --- | --- | --- | --- | | `preventDefault` | `boolean` | `true` | Prevents the browser's default behavior when the configured shortcut matches. | | `shortcut` | `string` | `'meta+/,ctrl+/'` | Comma-separated shortcut list. The component matches all configured shortcuts and prefers the platform-appropriate one for rendering. Plain typing inside editable fields is ignored unless the shortcut also includes `meta` or `ctrl`. | ### Methods | Method | Description | | --- | --- | | `trigger()` | Triggers the `trigger.coreui.search-button` event manually. | ```js const element = document.querySelector('[data-coreui-search-button]') const searchButton = coreui.SearchButton.getOrCreateInstance(element) searchButton.trigger() ``` ### Events | Event | Description | | --- | --- | | `trigger.coreui.search-button` | Fired when the component is activated by click, API call, or keyboard shortcut. | ```js const element = document.querySelector('[data-coreui-search-button]') element.addEventListener('trigger.coreui.search-button', () => { // do something }) ``` ## Customizing ### CSS variables Search buttons use local CSS variables on `.search-button` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --cui-search-button-height: #{$search-button-height}; --cui-search-button-padding-x: #{$search-button-padding-x}; --cui-search-button-font-family: #{$search-button-font-family}; --cui-search-button-font-size: #{$search-button-font-size}; --cui-search-button-font-weight: #{$search-button-font-weight}; --cui-search-button-color: #{$search-button-color}; --cui-search-button-bg: #{$search-button-bg}; --cui-search-button-border-width: #{$search-button-border-width}; --cui-search-button-border-color: #{$search-button-border-color}; --cui-search-button-border-radius: #{$search-button-border-radius}; --cui-search-button-box-shadow: #{$search-button-box-shadow}; --cui-search-button-transition: #{$search-button-transition}; --cui-search-button-focus-color: #{$search-button-focus-color}; --cui-search-button-focus-bg: #{$search-button-focus-bg}; --cui-search-button-focus-border-color: #{$search-button-focus-border-color}; --cui-search-button-focus-box-shadow: #{$search-button-focus-box-shadow}; --cui-search-button-icon-size: #{$search-button-icon-size}; --cui-search-button-keys-gap: #{$search-button-keys-gap}; --cui-search-button-key-width: #{$search-button-key-width}; --cui-search-button-key-height: #{$search-button-key-height}; --cui-search-button-key-padding-inline: #{$search-button-key-padding-inline}; --cui-search-button-key-font-size: #{$search-button-key-font-size}; --cui-search-button-key-bg: #{$search-button-key-bg}; --cui-search-button-key-border-radius: #{$search-button-key-border-radius}; --cui-search-button-key-active-bg: #{$search-button-key-active-bg}; --cui-search-button-placeholder-margin-inline: #{$search-button-placeholder-margin-inline}; ``` ### SASS variables ```scss $search-button-height: $input-height !default; $search-button-padding-x: $input-padding-x !default; $search-button-font-family: $input-font-family !default; $search-button-font-size: $input-font-size !default; $search-button-font-weight: $input-font-weight !default; $search-button-color: $input-placeholder-color !default; $search-button-bg: $input-bg !default; $search-button-border-width: $input-border-width !default; $search-button-border-color: $input-border-color !default; $search-button-border-radius: $input-border-radius !default; $search-button-box-shadow: $input-box-shadow !default; $search-button-transition: $input-transition !default; $search-button-focus-color: $input-focus-color !default; $search-button-focus-bg: $input-focus-bg !default; $search-button-focus-border-color: $input-focus-border-color !default; $search-button-focus-box-shadow: $input-focus-box-shadow !default; $search-button-icon-size: 1.125rem !default; $search-button-keys-gap: .25rem !default; $search-button-key-width: 1.5rem !default; $search-button-key-height: 1.5rem !default; $search-button-key-padding-inline: .25rem !default; $search-button-key-font-size: .75rem !default; $search-button-key-bg: var(--cui-tertiary-bg) !default; $search-button-key-border-radius: var(--cui-border-radius-sm) !default; $search-button-key-active-bg: var(--cui-secondary-bg) !default; $search-button-placeholder-margin-inline: .55rem 2rem !default; ``` --- # Bootstrap 5 Sidebar > Bootstrap Sidebar is a powerful and customizable responsive navigation component for any type of vertical navigation. Bootstrap Sidebar come with built-in support for branding, navigation, and more. ## How it works Here's what you need to know before getting started with the sidebar: - Sidebar requires a wrapping `.sidebar`. - Sidebar is hidden by default on mobile devices. Force it to be shown by adding `.show` to the `.sidebar`. - Sidebar is shown by default on desktop devices. Force it to be hidden by adding `.hide` to the `.sidebar`. - Ensure accessibility by using a `

` element or, if using a more generic element such as a `

`, add a `role="navigation"` to `.sidebar-nav` to explicitly identify it as a landmark region for users of assistive technologies. Read on for an example and list of supported sub-components. ## Supported content Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed: - `.sidebar-header` for optional header. - `.sidebar-brand` for your company, product, or project name. - `.sidebar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `.sidebar-footer` for optional footer. - `.sidebar-toggler` for use with our minimizer plugin. ## Examples Below is a more complete sidebar example shown by default on desktop devices. It combines several optional features in a single demo, including narrow visibility helpers, tree navigation, nested groups, a custom group indicator, badges, and a footer dropdown. ```html ``` ### Narrow sidebar Add the `.sidebar-narrow` class to make the sidebar narrow. Use `.d-sidebar-narrow` to show content only in the narrow state and `.d-sidebar-narrow-none` to hide content in the narrow state. These utility classes replace the older brand-specific visibility helpers such as `.sidebar-brand-full` and `.sidebar-brand-narrow`, which are deprecated and will be removed in v6. ```html ``` ### Unfoldable sidebar Add the `.sidebar-narrow-unfoldable` class to make the sidebar narrow with unfoldable on hover. Use `.d-sidebar-narrow-unfoldable` and `.d-sidebar-narrow-unfoldable-none` to control content visibility for unfoldable sidebars. ```html ``` ### Narrow visibility helpers Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants: - `.d-sidebar-narrow` shows content only in the narrow state - `.d-sidebar-narrow-none` hides content in the narrow state - `.d-sidebar-narrow-unfoldable` shows content only when the sidebar uses the `sidebar-narrow-unfoldable` variant - `.d-sidebar-narrow-unfoldable-none` hides content when the sidebar uses the `sidebar-narrow-unfoldable` variant ## Navigation Use `.sidebar-nav` as the main navigation container inside a sidebar. It supports plain links, section titles, nested groups, tree navigation, and custom group indicators. Add `data-coreui-navigation` when you want CoreUI to handle expandable groups automatically. For backward compatibility, `data-coreui="navigation"` is still supported. ### Basic navigation Use the following building blocks inside `.sidebar-nav`: - `.nav-title` for section headings - `.nav-item` for each navigation entry - `.nav-link` for clickable items - `.nav-icon` for optional leading icons - `.badge` or utility classes such as `.ms-auto` for trailing metadata ### Navigation groups Use `.nav-group` for expandable navigation sections, `.nav-group-toggle` for the clickable toggle, and `.nav-group-items` for nested items. Add `.show` to `.nav-group` when the group should be expanded by default. Add `.compact` to `.sidebar-nav` to reduce the vertical padding of links across the entire navigation, or to `.nav-group-items` to apply the same compact spacing only to a nested group. This is useful for denser navigation trees or documentation sidebars. ### Compact navigation Use `.compact` on `.sidebar-nav` to make the entire navigation denser, or on `.nav-group-items` to compact only a nested section. ```html ``` ### Tree navigation Add the `.sidebar-nav-tree` class to `.sidebar-nav` to render nested groups as a tree. Nested `.nav-group-items` get connector lines automatically, making deeper navigation levels easier to scan. ```html ``` ### Group indicator By default, `.nav-group-toggle` renders its own indicator with a pseudo-element. No additional markup is required. ```html ``` ### Custom group indicator To replace the default indicator, add a `.nav-group-toggle-indicator` element inside the toggle. The default pseudo-element is removed automatically. Use `.show` and `.hide` inside `.nav-group-toggle-indicator` to control which icon is visible when the group is expanded or collapsed. ```html ``` ## Dark sidebar Change the appearance of sidebars with the `.sidebar-dark` class. ```html ``` ## Placement By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below. - `.sidebar-start` places sidebar on the left of the viewport (shown above) - `.sidebar-end` places sidebar on the right of the viewport ## JavaScript behavior ### Methods You can create a sidebar instance with the sidebar constructor, for example: var mySidebar = document.querySelector('#mySidebar') var sidebar = new coreui.Sidebar(mySidebar) | Method | Description | | --- | --- | | `show()` | Shows the sidebar. | | `hide()` | Hides the sidebar. | | `toggle()` | Toggles the sidebar between visible and hidden states. | | `narrow()` | Switches the sidebar to the narrow variant on desktop. | | `unfoldable()` | Switches the sidebar to the narrow-unfoldable variant on desktop. | | `reset()` | Removes `sidebar-narrow` and `sidebar-narrow-unfoldable` from the sidebar on desktop. | | `toggleNarrow()` | Toggles the narrow variant on desktop. | | `toggleUnfoldable()` | Toggles the narrow-unfoldable variant on desktop. | | `getInstance()` | Static method that returns the sidebar instance associated with a DOM element. | | `getOrCreateInstance()` | Static method that returns the sidebar instance associated with a DOM element, or creates a new one. | var sidebarNode = document.querySelector('#mySidebar') var sidebar = coreui.Sidebar.getOrCreateInstance(sidebarNode) sidebar.toggle() ### Events CoreUI for Bootstrap's sidebar plugin exposes a few events for hooking into sidebar behavior. | Event | Description | | --- | --- | | `show.coreui.sidebar` | Fired immediately when the `show()` instance method is called. | | `shown.coreui.sidebar` | Fired when the sidebar has been made visible to the user and CSS transitions have completed. | | `hide.coreui.sidebar` | Fired immediately when the `hide()` instance method is called. | | `hidden.coreui.sidebar` | Fired when the sidebar has finished being hidden from the user and CSS transitions have completed. | var mySidebar = document.getElementById('mySidebar') mySidebar.addEventListener('hidden.coreui.sidebar', function () { // do something… }) ## Customizing ### CSS variables Sidebars use local CSS variables on `.sidebar`, `.sidebar-backdrop`, `.sidebar-narrow`, `.sidebar-narrow-unfoldable`, and `.sidebar-nav` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --cui-sidebar-zindex: #{$zindex-sidebar}; --cui-sidebar-width: #{$sidebar-width}; --cui-sidebar-bg: #{$sidebar-bg}; --cui-sidebar-padding-x: #{$sidebar-padding-x}; --cui-sidebar-padding-y: #{$sidebar-padding-y}; --cui-sidebar-color: #{$sidebar-color}; --cui-sidebar-brand-color: #{$sidebar-brand-color}; --cui-sidebar-brand-bg: #{$sidebar-brand-bg}; ``` ```scss --cui-sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow}; ``` ```scss --cui-sidebar-narrow-width: #{$sidebar-narrow-width}; --cui-sidebar-padding-x: #{$sidebar-narrow-padding-x}; ``` ```scss --cui-sidebar-narrow-unfoldable-box-shadow: #{$sidebar-narrow-unfoldable-box-shadow}; ``` ```scss --cui-sidebar-nav-padding-x: #{$sidebar-nav-padding-x}; --cui-sidebar-nav-padding-y: #{$sidebar-nav-padding-y}; --cui-sidebar-nav-gap: #{$sidebar-nav-gap}; --cui-sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x}; --cui-sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y}; --cui-sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top}; --cui-sidebar-nav-title-color: #{$sidebar-nav-title-color}; --cui-sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x}; --cui-sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y}; --cui-sidebar-nav-link-color: #{$sidebar-nav-link-color}; --cui-sidebar-nav-link-bg: #{$sidebar-nav-link-bg}; --cui-sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color}; --cui-sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius}; --cui-sidebar-nav-link-border-width: #{$sidebar-nav-link-border-width}; --cui-sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color}; --cui-sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg}; --cui-sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color}; --cui-sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color}; --cui-sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg}; --cui-sidebar-nav-link-icon-margin: #{$sidebar-nav-link-icon-margin}; --cui-sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color}; --cui-sidebar-nav-link-icon-width: #{$sidebar-nav-link-icon-width}; --cui-sidebar-nav-link-icon-height: #{$sidebar-nav-link-icon-height}; --cui-sidebar-nav-link-icon-font-size: #{$sidebar-nav-link-icon-font-size}; --cui-sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color}; --cui-sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color}; --cui-sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color}; --cui-sidebar-nav-link-icon-bullet-size: #{$sidebar-nav-link-icon-bullet-size}; --cui-sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-link-icon-bullet-bg}; --cui-sidebar-nav-link-icon-bullet-border-width: #{$sidebar-nav-link-icon-bullet-border-width}; --cui-sidebar-nav-link-icon-bullet-border-radius: #{$sidebar-nav-link-icon-bullet-border-radius}; --cui-sidebar-nav-link-icon-bullet-border-color: #{$sidebar-nav-link-icon-bullet-border-color}; --cui-sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-link-active-icon-bullet-bg}; --cui-sidebar-nav-link-active-icon-bullet-border-color: #{$sidebar-nav-link-active-icon-bullet-border-color}; --cui-sidebar-nav-link-disabled-icon-bullet-bg: #{$sidebar-nav-link-disabled-icon-bullet-bg}; --cui-sidebar-nav-link-disabled-icon-bullet-border-color: #{$sidebar-nav-link-disabled-icon-bullet-border-color}; --cui-sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-link-hover-icon-bullet-bg}; --cui-sidebar-nav-link-hover-icon-bullet-border-color: #{$sidebar-nav-link-hover-icon-bullet-border-color}; --cui-sidebar-nav-group-bg: #{$sidebar-nav-group-bg}; --cui-sidebar-nav-group-border-width: #{$sidebar-nav-group-border-width}; --cui-sidebar-nav-group-border-radius: #{$sidebar-nav-group-border-radius}; --cui-sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color}; --cui-sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y}; --cui-sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x}; --cui-sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color}; --cui-sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)}; --cui-sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color}; --cui-sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)}; --cui-sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color}; ``` ```scss --cui-sidebar-nav-tree-group-border-color: #{$sidebar-nav-tree-group-border-color}; --cui-sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-tree-link-icon-bullet-bg}; --cui-sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-tree-link-hover-icon-bullet-bg}; --cui-sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-tree-link-active-icon-bullet-bg}; ``` ```scss --cui-sidebar-toggler-width: #{$sidebar-toggler-width}; --cui-sidebar-toggler-height: #{$sidebar-toggler-height}; --cui-sidebar-toggler-bg: #{$sidebar-toggler-bg}; --cui-sidebar-toggler-color: #{$sidebar-toggler-color}; --cui-sidebar-toggler-icon: #{escape-svg($sidebar-toggler-icon)}; --cui-sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color}; --cui-sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow}; --cui-sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color}; --cui-sidebar-toggler-transition: #{$sidebar-toggler-transition}; ``` ```scss --cui-backdrop-zindex: #{$zindex-sidebar-backdrop}; --cui-backdrop-bg: #{$sidebar-backdrop-bg}; --cui-backdrop-opacity: #{$sidebar-backdrop-opacity}; ``` ### SASS variables ```scss $sidebar-width: 16rem !default; $sidebar-widths: ( sm: 12rem, lg: 20rem, xl: 24rem ) !default; $sidebar-padding-y: $spacer !default; $sidebar-padding-x: $spacer !default; $sidebar-color: var(--cui-body-color) !default; $sidebar-bg: var(--cui-body-bg) !default; $sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default; $sidebar-brand-color: var(--cui-body-color) !default; $sidebar-brand-bg: rgba($black, .2) !default; $sidebar-backdrop-bg: $black !default; $sidebar-backdrop-opacity: .5 !default; $sidebar-overlaid-box-shadow: var(--cui-box-shadow) !default; $sidebar-narrow-width: 4rem !default; $sidebar-narrow-padding-x: .5rem !default; $sidebar-narrow-unfoldable-box-shadow: var(--cui-box-shadow) !default; ``` ```scss $sidebar-toggler-width: .5rem !default; $sidebar-toggler-height: .5rem !default; $sidebar-toggler-padding-x: .25rem !default; $sidebar-toggler-padding-y: .25rem !default; $sidebar-toggler-bg: transparent !default; $sidebar-toggler-color: var(--cui-tertiary-color) !default; $sidebar-toggler-icon: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default; $sidebar-toggler-focus-shadow: $focus-ring-box-shadow !default; $sidebar-toggler-hover-color: var(--cui-secondary-color) !default; $sidebar-toggler-focus-color: var(--cui-secondary-color) !default; $sidebar-toggler-transition: transform .15s !default; ``` --- # Bootstrap 5 Spinners > Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. ## About Bootstrap "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes. For accessibility purposes, each loader here includes `role="status"` and a nested ``. > This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](https://coreui.io/bootstrap/docs/getting-started/accessibility/#reduced-motion). ## Border spinner Use the border spinners for a lightweight loading indicator. ```html

``` ### Colors The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner. > **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! ```html

``` Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants. ## Alignment Spinners in Bootstrap are built with `rem`s, `currentColor`, and `display: inline-flex`. This means they can easily be resized, recolored, and quickly aligned. ### Margin Use [margin utilities][margin] like `.m-5` for easy spacing. ```html

``` ### Placement Use [flexbox utilities][flex], [float utilities][float], or [text alignment][text] utilities to place spinners exactly where you need them in any situation. #### Flex ```html

``` ```html

Loading...

``` #### Floats ```html

``` #### Text align ```html

``` ## Size Add `.spinner-border-sm` and `.spinner-grow-sm` to make a smaller spinner that can quickly be used within other components. ```html

``` Or, use custom CSS or inline styles to change the dimensions as needed. ```html

``` ## Buttons 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. ```html ``` ```html ``` ## Customizing ### CSS variables Spinners 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: ```scss --cui-spinner-width: #{$spinner-width}; --cui-spinner-height: #{$spinner-height}; --cui-spinner-vertical-align: #{$spinner-vertical-align}; --cui-spinner-border-width: #{$spinner-border-width}; --cui-spinner-animation-speed: #{$spinner-animation-speed}; --cui-spinner-animation-name: spinner-border; ``` Growing spinner variables: ```scss --cui-spinner-width: #{$spinner-width}; --cui-spinner-height: #{$spinner-height}; --cui-spinner-vertical-align: #{$spinner-vertical-align}; --cui-spinner-animation-speed: #{$spinner-animation-speed}; --cui-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: ```scss --cui-spinner-width: #{$spinner-width-sm}; --cui-spinner-height: #{$spinner-height-sm}; --cui-spinner-border-width: #{$spinner-border-width-sm}; ``` ### SASS variables ```scss $spinner-width: 2rem !default; $spinner-height: $spinner-width !default; $spinner-vertical-align: -.125em !default; $spinner-border-width: .25em !default; $spinner-animation-speed: .75s !default; $spinner-width-sm: 1rem !default; $spinner-height-sm: $spinner-width-sm !default; $spinner-border-width-sm: .2em !default; ``` ### Keyframes Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`. ```scss @keyframes spinner-border { to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } } ``` ```scss @keyframes spinner-grow { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } } ``` [color]: /utilities/colors/ [display]: /utilities/display/ [flex]: /utilities/flex/ [float]: /utilities/float/ [margin]: /utilities/spacing/ [sizing]: /utilities/sizing/ [text]: /utilities/text/ --- # Bootstrap 5 Toasts > Send push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Bootstrap toasts are lightweight notifications that mimic the push notifications popularized by mobile and desktop operating systems. They utilize flexbox, making them simple to align and position. ## Overview Things to know when using the toast plugin: - Toasts are opt-in for performance reasons, so **you must initialize them yourself**. - Toasts will automatically hide if you do not specify `autohide: false`. > This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](https://coreui.io/bootstrap/docs/getting-started/accessibility/#reduced-motion). ## Examples ### Basic To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use `display: flex`, allowing easy alignment of content thanks to our margin and flexbox utilities. Bootstrap toasts are as flexible as you need and require very little markup. At a minimum, you should have a single element containing your “toasted” content, and it's strongly recommended to include a dismiss button. ```html