Bootstrap Classes

Alerts

More info from Bootstap

Alerts
Alert features

Badges

h* and badge

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
badge-*
Primary badge Secondary badge Success badge Info badge Warning badge Danger badge Light badge Dark badge
badge-pill
Primary pill Primary pill Primary pill Primary pill Primary pill Primary pill Primary pill Primary pill

Borders

Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text
Example text

Rounded image Rounded image Rounded image Circle image Edgy image Slightly rounded image Slightly rounded image Slightly rounded image Slightly rounded image

Buttons

bnt-*
bnt-outline-*

Button Groups

btn-group
btn-group-sm
btn-group-lg
btn-group-vertical
btn-group (nested)
Dropdown link Dropdown link
btn-toolbar

Button Modifiers

Primary link Disabled link button

Cards

card-body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
card-title

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card link Another link
card-link

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card link Another link
card-img-top
Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link
middle image

This image is in the middle

Card image

of a card.

card-img-bottom
Some more card content
Card image cap
card-img-overlay
Card image

I'm text that has a background image!

list-group
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
card-header
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

h* card-header

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
card-header-tabs
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
card-header-pills
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
card-footer

Some more card content

2 days ago
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.

Card title

This card has supporting text below as a natural lead-in to additional content.

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.

card-deck
Card image cap

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.

Card title

This card has supporting text below as a natural lead-in to additional content.

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.

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.

Someone famous in Source Title
...
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.

Someone famous in Source Title
Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago


card text-white bg-primary
Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Colors

bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-white

text-primary

text-secondary

text-success

text-info

text-warning

text-danger

text-light

text-dark

text-white

Display

d-*-Inline
d-inline
d-sm-inline
d-md-inline
d-lg-inline
d-xl-inline
d-*-block
d-block d-sm-block d-md-block d-lg-block d-xl-block
d-*-inline-block
d-inline-block
d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block
d-*-none
d-none
d-sm-none
d-md-none
d-lg-none
d-xl-none
d-*-flex
d-flex
d-sm-flex d-md-flex d-lg-flex d-xl-flex
d-*-inline-flex
d-inline-flex
d-sm-inline-flex d-md-inline-flex d-lg-inline-flex d-xl-inline-flex
d-*-table
d-table
d-sm-table d-md-table d-lg-table d-xl-table
d-*-table-cell
d-table-cell
d-sm-table-cell d-md-table-cell d-lg-table-cell d-xl-table-cell
d-print
Doesn't display when printing
Displays as block when printing
Displays as inline when printing
Displays as inline-block when printing

Flexbox

d-flex
Flex item 1
Flex item 2
Flex item 3
d-*-flex
Flex items
Flex items
Flex items
Flex items
d-inline-flex
Flex item 1
Flex item 2
Flex item 3
d-*-inline-flex
Flex items
Flex items
Flex items
Flex items
flex-row
Flex item 1
Flex item 2
Flex item 3
flex-row-reverse
Flex item 1
Flex item 2
Flex item 3
flex-column
Flex item 1
Flex item 2
Flex item 3
flex-*-column
Flex items
Flex items
Flex items
Flex items
flex-*-column-reverse
Flex item 1
Flex item 2
Flex item 3
Flex items
Flex items
Flex items
Flex items
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
align-items-*
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
align-self-*
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
align-content-start
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
align-content-end
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
align-content-center
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
align-content-between
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
align-content-around
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
align-content-stretch
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
responsive variations
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
flex-fill-*
Flex items
Flex items
Flex items
Flex item with more content than the others
Flex item
Flex item
flex-grow
Flex item 1
Flex item 2
Flex item 3
flex-shrink
Flex item 1
Flex item 2
Flex item 3
auto margins
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
flex-*-nowrap
Flex item
Flex items
Flex items
Flex items
Flex items
flex-wrap
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
flex-wrap-reverse
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
order-*
Flex item 1
Flex item 2
Flex item 3

Forms

form-group
form-inline
@
form using the grid
form-control
form-control-lg
form-control-sm
form-control-file
form-control-plainttext
form-control-range
form-check type=checkbox
form-check type=radio
form-check-inline
disabled items
readonly

Form input groups

input-group
Left addon
Right addon
input-group-prepend
input-group-append
input-group-sm
Small
input-group-lg
Large
checkbox
radio
dropdown
Action Another action
segmented buttons
Action Another action

Custom forms

custom-checkbox
custom-radio
custom-switch
custom-select
custom-file
custom-range

Grid

rows and columns
Row 1 col 1
Row 1 col 2
Row 1 col 3
Row 2 col 1
Row 2 col 2
Row 2 col 3
w-100 break
col
col
col
col
rows and col-*
Row 1 col 1
Row 1 col 2
Row 1 col 3
Row 2 col 1
Row 2 col 2
Row 2 col 3
responsive rows and col-*
Row 1 col 1
Row 1 col 2
Row 1 col 3
Row 2 col 1
Row 2 col 2
Row 2 col 3
col-*-auto
1 of 3
Variable width content with lots of text
3 of 3
row-cols-*
Column
Column
Column
Column
Column
order-#*
First, but unordered
Second, but last
Third, but first
no-gutters*
.col-sm-6 .col-md-8
.col-6 .col-md-4
offset-*-#*
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
nested-columns*
Level 1 col
Level 2 col
Level 2 col

Images

Responsive image Thumbnail image

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.

Some action

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.

Some action

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

List Group

Cras justo odio Dapibus ac facilisis in Morbi leo risus
Dapibus ac facilisis in
Dapibus ac facilisis in
Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros
Dapibus ac facilisis in
Dapibus ac facilisis in
List group item heading
3 days ago

Donec 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 ago

Donec 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 ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Media Objects

64x64
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Top-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Generic placeholder image
Center-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Generic placeholder image
Bottom-aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Popover

Popovers
Dismissible popover

Positioning

align-*

Large text to show align-baseline of inline image...

Large text to show align-top of inline image...

Large text to show align-middle of inline image...

Large text to show align-bottom of inline image...

Large text to show align-text-top of inline image...

Large text to show align-text-bottom of inline image...

clearfix
Float left
Float right
Sticky top
float-*-left
Float left on all viewport sizes
Float left on viewports sized SM (small) or wider
Float left on viewports sized MD (medium) or wider
Float left on viewports sized LG (large) or wider
Float left on viewports sized XL (extra-large) or wider
float-*-right
Float right on all viewport sizes
Float right on viewports sized SM (small) or wider
Float right on viewports sized MD (medium) or wider
Float right on viewports sized LG (large) or wider
Float right on viewports sized XL (extra-large) or wider
float-*-none
Don't float on all viewport sizes
Don't float on viewports sized SM (small) or wider
Don't float on viewports sized MD (medium) or wider
Don't float on viewports sized LG (large) or wider
Don't float on viewports sized XL (extra-large) or wider

Progress

progress
progress-bar with label
25%
progress-bar with height
progress-bar bg-*
multiple progress-bar
progress-bar-striped
progress-bar-striped bg-*
progress-bar with different background
progress-bar-animated

Scrollspy

Verse 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam maecenas sed enim ut sem viverra aliquet. Diam volutpat commodo sed egestas egestas. Nibh ipsum consequat nisl vel. Aenean et tortor at risus viverra adipiscing at in tellus. Ac tortor vitae purus faucibus ornare suspendisse sed. Leo in vitae turpis massa sed elementum. Eu augue ut lectus arcu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Ut faucibus pulvinar elementum integer. Orci a scelerisque purus semper eget duis. Felis eget velit aliquet sagittis id consectetur purus ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Eget nunc lobortis mattis aliquam faucibus purus in massa. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. Risus sed vulputate odio ut enim blandit volutpa

Verse 2

Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Blandit volutpat maecenas volutpat blandit aliquam etiam erat. Nibh tellus molestie nunc non. Proin nibh nisl condimentum id venenatis a condimentum vitae sapien. Auctor augue mauris augue neque. Luctus accumsan tortor posuere ac. Sed nisi lacus sed viverra tellus in. Hendrerit gravida rutrum quisque non. Posuere ac ut consequat semper viverra nam libero justo laoreet. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Urna condimentum mattis pellentesque id. Risus quis varius quam quisque id diam vel. Morbi non arcu risus quis varius quam quisque id. Enim sed faucibus turpis in. Vel eros donec ac odio tempor orci dapibus ultrices. Adipiscing at in tellus integer feugiat scelerisque. Risus feugiat in ante metus dictum at. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Enim nec dui nunc mattis enim ut tellus elementum sagittis. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare. Eu sem integer vitae justo eget magna fermentum iaculis eu. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. Habitant morbi tristique senectus et netus et malesuada fames. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Elementum nibh tellus molestie nunc non blandit massa enim. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Fusce ut placerat orci nulla pellentesque dignissim. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Eget mauris pharetra et ultrices neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.

Spinner

spinner-border
spinner-border text-*
spinner-border-sm-*
spinner-grow
spinner-grow-sm

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Sizing

w-100
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
h-100
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
mw-100
mh-100

Spacing

m-#
m-0
m-1
m-2
m-3
m-4
m-5
responsive variations
m-sm-5
m-md-5
m-lg-5
m-xl-5
mt-#
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
responsive variations
mt-sm-5
mt-md-5
mt-lg-5
mt-xl-5
mr-#
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
responsive variations
mr-sm-5
mr-md-5
mr-lg-5
mr-xl-5
mb-#
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
responsive variations
mb-sm-5
mb-md-5
mb-lg-5
mb-xl-5
ml-#
ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
responsive variations
ml-sm-5
ml-md-5
ml-lg-5
ml-xl-5
mx-#
mx-0
mx-1
mx-2
mx-3
mx-4
mx-5
responsive variations
mx-sm-5
mx-md-5
mx-lg-5
mx-xl-5
my-#
my-0
my-1
my-2
my-3
my-4
my-5
responsive variations
my-sm-5
my-md-5
my-lg-5
my-xl-5
m-n*
m-n5
m-n*
Card 1
Card 2
p-#
p-0
p-1
p-2
p-3
p-4
p-5
responsive variations
p-sm-5
p-md-5
p-lg-5
p-xl-5
pt-#
pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
responsive variations
pt-sm-5
pt-md-5
pt-lg-5
pt-xl-5
pr-#
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
responsive variations
pr-sm-5
pr-md-5
pr-lg-5
pr-xl-5
pb-#
pb-0
pb-1
pb-2
pb-3
pb-4
pb-5
responsive variations
pb-sm-5
pb-md-5
pb-lg-5
pb-xl-5
pl-#
pl-0
pl-1
pl-2
pl-3
pl-4
pl-5
responsive variations
pl-sm-5
pl-md-5
pl-lg-5
pl-xl-5
px-#
px-0
px-1
px-2
px-3
px-4
px-5
responsive variations
px-sm-5
px-md-5
px-lg-5
px-xl-5
py-#
py-0
py-1
py-2
py-3
py-4
py-5
responsive variations
py-sm-5
py-md-5
py-lg-5
py-xl-5

Tables

table
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
thead-light
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
thead-dark
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-striped
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-bordered
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-borderless
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-hover
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-sm
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-responsive
# First Name Last Name Column header Column header Column header Column header Column header Column header Column header Column header Column header Column header Column header Column header Column header Column header
1 Mark Otto Content Content Content Content Content Content Content Content Content Content Content Content Content Content
2 Jacob Thornton Content Content Content Content Content Content Content Content Content Content Content Content Content Content
table-responsive-*
# First Name Last Name Column header Column header Column header Column header Column header Column header Column header Column header Column header
1 Mark Otto Content Content Content Content Content Content Content Content Content
2 Jacob Thornton Content Content Content Content Content Content Content Content Content
table-active
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-primary
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-secondary
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-success
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-info
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-warning
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-danger
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-light
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-dark
# First Name Last Name
1 Mark Otto
2 Jacob Thornton

Text

Bold text.

Bolder text.

Light text.

Lighter text.

Normal weight text.

This text is not decorated

Italicized text.

This is in monospace

Justified text.

No wrap text.

Left aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Right aligned text on all viewport sizes.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

Center aligned text on all viewport sizes.

Center aligned text on viewports sized SM (small) or wider.

Center aligned text on viewports sized MD (medium) or wider.

Center aligned text on viewports sized LG (large) or wider.

Center aligned text on viewports sized XL (extra-large) or wider.

lowercased text.

uppercased text.

capitalized text.

truncated text.

Text with the default body color.

Text with 50% opacity black.

Text with 50% opacity white

Muted text

Custom heading

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Toasts

Tooltips

Typography

Display 1

Display 2

Display 3

Display 4

lead

Lead text - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

blockquote

Blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

blockquote-footer

Blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote footer Cite
list-unstyled
list-inline
dl-horizontal
Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Miscellaneous Utilities

close
embed-responsive
invisible
visible
...
sr-only
Skip to main content
sr-only-focusable
Skip to main content
stretched-link
Streched link