Components


Accordion

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Breadcrumb


Buttons

Carousel

Carousel (Dark variant)


Close button


Collapse

Anim cliche, high life terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred ea.

Dropdown

Modal


Popovers


Progress


Tooltips


Checks & Radios


Switches


Select


Disabled Select
Disabled Input
Disabled Fieldset

Range


Input Color


Input Group

@
@example.com
https://example.com/users/
$ .00
@
With textarea

Floating Labels


Validation - Tooltips

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.

Aspect Ratio

1x1
4x3
16x9
21x9

Interactions

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.


Pointer events

This link can not be clicked.

This link can be clicked (this is default behaviour).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.


Position


Word Break

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm