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
A simple primary alert with an example link.
Give
it
a click if you like.
A simple secondary alert with an example
link.
Give
it a click if you like.
A simple success alert with an example link.
Give
it
a click if you like.
A simple danger alert with an example link.
Give
it a
click if you like.
A simple warning alert with an example link.
Give
it
a click if you like.
A simple info alert with an example link.
Give it
a
click if you like.
A simple light alert with an example link.
Give
it a
click if you like.
A simple dark alert with an example link.
Give it
a
click if you like.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Badge
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Breadcrumb
Buttons
Button group
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Featured
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
- An item
- A second item
- A third item
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Carousel
Dropdowns
List group
- A disabled item
- A second item
- A third item
- A fourth item
- And a fifth one
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Navs
Navbar
Pagination
Progress
Spinners
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Toasts
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Forms
Overview
Disabled forms
Sizing
Input group
@
@example.com
https://example.com/users/
$
.00
With textarea
Floating labels
Validation
Contents
Typography
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
A well-known quote, contained in a blockquote element.
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
- This is a list item.
- And another one.
- But they're displayed inline.
Images
Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||