Overview
container
While containers can be nested, most layouts do not require a nested container.
container-fluid
Use .container-fluid
for a full width container, spanning the
entire width of the viewport.
Display headings
Display 1
Display 2
Display 3
Display 4
Blockquotes with Naming a source
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
alighnments
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
Buttons
Outline buttons
Flex Properties
d-flex
d-inline-flex
I'm an inline flexbox container!
Flex Direction
flex-row
Flex item 1
Flex item 2
Flex item 3
flex-row-reverse
Flex item 1
Flex item 2
Flex item 3
Justify Content
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Lists
List Group
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Active items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
With Badges
-
Cras justo odio
14
-
Dapibus ac facilisis in
2
-
Morbi leo risus
1
Breadcrumb
Tables
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Striped rows
# |
First |
Last |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
Jacob |
Thornton |
@fat |
3 |
Larry |
the Bird |
@twitter |
Modals
Live demo
Vertically centered
Forms