Input group
Basic example
Sizing
Checkboxes and radios
Multiple inputs
Multiple addons
Buttons addons
Buttons with dropdowns
Segmented buttons
Custom select
Custom file input
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.
Learn moreFluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
List group
Basic example
- 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
Links
Buttons
Flush
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Contextual classes
- Dapibus ac facilisis in
- A simple primary list group item
- A simple secondary list group item
- A simple success list group item
- A simple danger list group item
- A simple warning list group item
- A simple info list group item
- A simple light list group item
- A simple dark list group item
With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
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.Modal
Live demo
Scrolling long content
Vertically centered
Navs
Base nav
Horizontal centered
Horizontal Right
Vertical
Tabs
Pills
Fill and justify
Navbar
Example
Brand
Color schemes
Container
Responsive behaviors
pagination
Example
With icons
Disabled and active states
Sizing
Alignment
Progress
simple examples
Labels
Height
Backgrounds
Multiple bars
Striped
Animated stripes
Spinners
Border spinner
Colors
Growing spinner
growing colors
Buttons
Growing buttons
ToolTips
Alerts
Simple Alerts
Custom Alerts
Link colors
Additional content
Well done!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloribus inventore sint numquam voluptate suscipit iste cumque. Veniam, quo expedita facilis cumque officiis cum tenetur explicabo aperiam adipisci. Deserunt, eos?
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissing
Badges
Scale
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Contextual variations
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Links
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Breadcrumb
Buttons
Simple
Linked
Link Link Link Link Link Link Link LinkOutline
Size
Block
large
Small
State
Active
Primary link LinkDisabled
Toggle states
Checked
Button Group
Simple
Button toolbar
Carousel
Slide only
Slide With Controls
Collapse
Simple
Multiple
Accordion
Dropdowns
Forms
Input Forms
Form controls
Upload File
Size
Checkboxes
Radios
Form Row
Column Sizing
Help Text
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.Server Side
Select Menu
Card
Simple
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Content Types
Body
Titles, text, and links
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link
Images
Some quick example text to build on the card title and make up the bulk of the card's content.
List Groups
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Header and Footer
Simple
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Centered
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Size
Using grid markup
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Using utilities
Text alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Navigation
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Card Style
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Group
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Card Columns
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago