#### UI Elements

#### Buttons

##### Basic

Bootstrap includes six predefined button styles, each serving its own semantic purpose..

##### Outline

Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

##### Rounded

Use class `.btn-rounded` for button round.

##### Sizes

Add `.btn-lg` or `.btn-sm` for additional sizes.

##### Width

Add `.w-xs`, `.w-sm`, `.w-md` and `.w-lg` class for additional buttons width.

##### Tags

The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).

Link

#### Badges

##### Basic

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Success Info Warning Danger Dark

##### Pill

Use the `.rounded-pill` modifier class to make badges more rounded.

Primary Success Info Warning Danger Dark

##### Lighten

Use `.bg-soft-*` class for a badge lighten.

Primary Success Info Warning Danger Dark

##### Soft Pill

Use `.bg-soft-*` class for a pill badge.

Primary Success Info Warning Danger Dark

##### Badges in Buttons

Badges can be used as part of links or buttons to provide a counter.

##### Badges Position Examples

Example of Badges Position

#### Dropdowns

##### Basic

Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either `<button>` elements:

Dropdown link

##### Variant

The best part is you can do this with any button variant, too:

##### Split Button

The best part is you can do this with any button variant, too:

##### Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

##### Dark Dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.

##### Menu Alignment

Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.

##### Menu Alignment Option

Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.

##### Auto Close Behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.

##### Menu Content

Example of dropdown menu Headers, Text, Forms content

##### Dropup Variation

Trigger dropdown menus above elements by adding `.dropup` to the parent element.

##### Dropright Variation

Trigger dropdown menus at the right of the elements by adding `.dropend` to the parent element.

##### Dropleft Variation

Trigger dropdown menus at the left of the elements by adding `.dropend` to the parent element.

#### Images

##### Rounded & Circle

Use classes `.rounded` and `.rounded-circle`.

##### Thumbnails

In addition to our border-radius utilities, you can use `.img-thumbnail` to give an image a rounded 1px border appearance.

##### Sizes

`.avatar-sm`

`.avatar-md`

`.avatar-lg`

`.avatar-sm`

`.avatar-md`

`.avatar-lg`

##### Media Object

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

###### Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

###### Center-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

###### Bottom-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

#### Cards

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

- Cras justo odio
- Dapibus ac facilisis in

Card link Another link

##### Card title

This is a wider card with as a to additional content.

Last updated 3 mins ago

##### Card title

This is a wider card with as a to additional content.

Last updated 3 mins ago

#### Card background Color

##### Primary Card

If several languages coalesce, the grammar of the resulting individual

##### Success Card

If several languages coalesce, the grammar of the resulting individual

##### Info Card

If several languages coalesce, the grammar of the resulting individual

#### Card Border Color

##### Warning outline Card

##### card title

If several languages coalesce, the grammar of the resulting individual

##### Danger outline Card

##### card title

If several languages coalesce, the grammar of the resulting individual

##### Success Card

##### card title

If several languages coalesce, the grammar of the resulting individual

#### Collapse

##### Basic Collapse

You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="collapse"` is required.

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

##### Basic Horizontal Collapse

The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

##### Multiple Targets Collapse

A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute.

Toggle first element

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

#### Tabs & Accordions

##### Basic Tabs

Example of Default Nav Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh iphone. Seitan aliquip butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, aesthetic magna delectus.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy mi whatever gluten yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia farm-to-table VHS.

##### Basic Nav Pills

Example of Default Nav Pills

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, vinyl cillum PBR. Homo nostrud organic labore

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy Leggings gentrify squid 8-bit cred pitchfork

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

##### Custom Nav Tabs

Example of Custom Nav Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis butcher

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby.

##### Vertical Nav Tabs

Use `flex-column` class to create Vertical nav tabs.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, nulla assumenda shoreditch et.
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt Leggings occaecat craft beer farm-to-table, raw denim accusamus labore sustainable VHS.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy mi whatever gluten yr.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic

##### Basic Accordions

Extend the default collapse behavior to create an accordion.

##

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, nulla assumenda shoreditch et.

##

sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt Leggings occaecat craft beer farm-to-table, raw denim accusamus labore sustainable VHS.

##

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, nulla assumenda shoreditch et.

##### Accordion Flush

Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

##

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-flush` class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

##

Placeholder content for this accordion, which is intended to demonstrate the `.accordion-flush` class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

#### Offcanvas

##### Demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.

Link with href

##### Offcanvas

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

##### Placement

Offcanvas Diffrent Placement Example: Left, Right & Bottom

##### Offcanvas top

...

##### Offcanvas right

...

##### Offcanvas bottom

...

##### Backdrop

Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop.

##### Colored with scrolling

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

##### Offcanvas with backdrop

.....

##### Backdroped with scrolling

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

#### Modals

##### Basic

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

##### Modal Heading

##### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

##### Optional Sizes

Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`.

##### Extra large modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Large Modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Small Modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Full Screen modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Toggle Between Modals

Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes.

##### Modal 1

Show a second modal and hide this one with the button below.

##### Modal 2

Hide this modal and show the first with the button below.

##### Vertically Centered

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

##### Center Modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Scrollable

You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.

##### Scrollable Modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Scrollable Modal

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

##### Modal title

I will not close if you click outside me. Don't even try to press escape key.

#### Pagination

##### Basic

Pagination links indicate a series of related content exists across multiple pages.

##### Custom

Add `.pagination-rounded` with `.pagination` class for rounded pagination.

##### Sizing

Add `.pagination-lg` or `.pagination-sm` for pagination additional sizes.

#### Placeholder

##### Basic

Use loading placeholders for your components or pages to indicate something may still be loading

##### Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

#####

##### Width

You can change the `width` through grid column classes, width utilities, or inline styles.

##### Sizing

The size of `.placeholder`s are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.

##### Color

By default, the `placeholder` uses `currentColor`. This can be overriden with a custom color or utility class.

##### Placeholder Glow Animation

Animate placehodlers with `.placeholder-glow` to better convey the perception of something being actively loaded.

##### Placeholder Wave Animation

Animate placehodlers with `.placeholder-wave` to better convey the perception of something being actively loaded.

#### Progress

##### Basic

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

##### Heights

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

##### Striped & Animated

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

#### Tooltips & Popovers

##### Tooltips

Hover over the links below to see tooltips.

##### Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

#### Spinners

##### Border

Use the border spinners for a lightweight loading indicator.

Loading...

##### Color Variation

Add `text-*` color for a Spinner color variation.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

##### Growing

Switch to the grow spinner.it does repeatedly grow Continue!

Loading...

##### Color Variation

Add `text-*` color for a Spinner color variation.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...