Other Bootstrap 4 Elements
0. Navbar
Normal
bg-white
bg-dark
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
1. Progress Bars
Default
Labels
Height
Backgrounds
Multiple bars
Striped bars
Animated stripes
2. Alert
Normal
Holy guacamole! This is a primary alert with an example link. Give it a click if you like.
Holy guacamole! This is a secondary alert with an example link. Give it a click if you like.
Holy guacamole! This is a success alert with an example link. Give it a click if you like.
Holy guacamole! This is a danger alert with an example link. Give it a click if you like.
Holy guacamole! This is a warning alert with an example link. Give it a click if you like.
Holy guacamole! This is a info alert with an example link. Give it a click if you like.
Holy guacamole! This is a light alert with an example link. Give it a click if you like.
Holy guacamole! This is a dark alert with an example link. Give it a click if you like.
Dismissible
Holy guacamole! This is a primary alert with an example link. Give it a click if you like.
Holy guacamole! This is a secondary alert with an example link. Give it a click if you like.
Holy guacamole! This is a success alert with an example link. Give it a click if you like.
Holy guacamole! This is a danger alert with an example link. Give it a click if you like.
Holy guacamole! This is a warning alert with an example link. Give it a click if you like.
Holy guacamole! This is a info alert with an example link. Give it a click if you like.
Holy guacamole! This is a light alert with an example link. Give it a click if you like.
Holy guacamole! This is a dark alert with an example link. Give it a click if you like.
3. Badge & Pills
Badge - Contextual variations
Primary Secondary Success Danger Warning Info Light DarkPill Badges
Primary Secondary Success Danger Warning Info Light DarkLinks Badges
Primary Secondary Success Danger Warning Info Light Dark4. Breadcrumb
5. Carousel
6. Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
7. Jumbotron - Fluid
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
8. List Group
8.1. Basic
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
8.2. Active
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
8.3. Disabled items
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
8.4. Link
8.5. Buttons
8.6. Flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
8.7. 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
8.8. Contextual Classes (Linked)
8.9. With Badges 1
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
8.10. With Badges 2
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
8.11. Custom Content
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.