Flex
I'm an inline flexbox container!
Flex row
Flex row-reverse
Flex column
Flex column-reverse
Flex item 1
Flex item 2
Flex item 3
Justify Content
Justify Content Start
Justify Content End
Justify Content Center
Justify Content Between
Flex item 1
Flex item 2
Flex item 3
Justify Content Around
Align items
Align Items Start
Align Items End
Align Items Center
Flex item
Flex item
Flex item
Align Items Baseline
Align Items Strech
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
Disabled 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
Contextual Classes
- Dapibus ac facilisis in
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item
- This is a light list group item
- This is a dark list group item
With Badges
-
Cras justo odio
14
-
Dapibus ac facilisis in
2
-
Morbi leo risus
1
Color
Text color
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-资讯
.text-light
.text-dark
.text-muted
.text-white