Buttons
Grid System
Column 1 of 2 (col-6)
Column 2 of 2 (col-6)
Column 1 of 3 (col-4)
Column 2 of 3 (col-4)
Column 3 of 3 (col-4)
Column 1 of 4 (col-3)
Column 2 of 4 (col-3)
Column 3 of 4 (col-3)
Column 4 of 4 (col-3)
Accordion Section
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.
Carousel Section
Jumbotron Section
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!
Badges
Example heading New
Example heading New
Cards
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereList Groups
- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
Progress
Spinners
Loading...
Loading...
Loading...
Loading...
Pagination
Breadcrumbs
Toasts
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Offcanvas
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Utilities
Borders
Primary border
Secondary border
Danger border
Success border with rounded corners
Colors & Backgrounds
Primary background with white text
Secondary background with white text
Success background with white text
Danger background with white text
Warning background with dark text
Info background with dark text
Spacing & Sizing
p-2 m-2
p-3 m-3
p-4 m-4
Width 25%
Width 50%
Width 75%
Width 100%
Display & Flex
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Justified 1
Justified 2
Justified 3
Position
Top Left
Top Right
Bottom Left
Bottom Right
Center
Text Utilities
Primary text
Secondary text
Success text
Danger text
Warning text
Info text
Uppercase text
LOWERCASE TEXT
capitalized text
Bold text
Italic text
Underlined text
Line-through text