The Kitchen Sink
This is a view of all the UI elements available with Bootstrap 5.
Typography
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
This is a lead paragraph. It stands out from regular paragraphs.
This is a regular paragraph. This text is bold. This text is italicized. This is a link.
Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | mdo |
| 2 | Jacob | Thornton | fat |
| 3 | Larry the Bird | ||
Forms
Buttons
Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Cards
Primary Card
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary Card
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info Card
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success Card
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning Card
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Modals
Accordion
This is the first item's accordion body. It is shown 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.
Bootstrap 5 Form Demo
This is a showcase of various form controls available with Bootstrap 5.