This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Images
Tables
Variants
Class
Heading
Heading
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
Striped Rows
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Dark Striped Rows
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Hover
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Dark Hover
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Table Striped Hover
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Figures
Note: Images in a figure container may overflow the content area. See GitHub Issue #52
A caption for the above image.A caption for the above image.A caption for the above image.
Components
Accordion
This is the first item's accordion body. It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS
or overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Alerts
Holy guacamole! You should check in on some of those fields below.
Holy guacamole! You should check in on some of those fields below.
Holy guacamole! You should check in on some of those fields below.
Holy guacamole! You should check in on some of those fields below.
Breadcrumb
Buttons
Button Group
@
@
Card
Card title
Some quick example text to build on the card title and make up the bulk of the
card's
content.
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork
yr
lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon.
tattooed, cred irony biodiesel keffiyeh artisan.
@mdo
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork
yr
lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon.
tattooed, cred irony biodiesel keffiyeh artisan..
one
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork
yr
lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon.
tattooed, cred irony biodiesel keffiyeh artisan.
two
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork
yr
lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon.
tattooed, cred irony biodiesel keffiyeh artisan.
three
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork
yr
lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon.
tattooed, cred irony biodiesel keffiyeh artisan.
Ad leggings, brunch id art party dolor. Pitchfork yr lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon. Cosby sweater jean shorts, williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Pitchfork
yr
lo-fi before they sold out qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh cardigan. Seitan
photo booth 3 wolf moon.
tattooed, cred irony biodiesel keffiyeh artisan.
Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause
she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another
life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your
parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its getting heavy. Her love is
like a drug. I guess that I forgot I had a choice.
Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture.
Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing
you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one.
Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.
Placeholder content for the
tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel
and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with
magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard
it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.
Note: The gap property is not supported in Internet Explorer 11. A CSS polyfill is included but does not currently include responsive breakpoints. E.g .hstack .gap-3 will have the correct spacing, but .hstack .gap-md-3 will not.
Vertical
First item
Second item
Third item
Horizontal
First item
Second item
Third item
Horizontal with Vertical rule
Background
Background Color
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
Background Gradient
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Background Opacity
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
Colors
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
Flex
.justify-content-start
Flex item
Flex item
Flex item
.justify-content-end
Flex item
Flex item
Flex item
.justify-content-center
Flex item
Flex item
Flex item
.justify-content-between
Flex item
Flex item
Flex item
.justify-content-around
Flex item
Flex item
Flex item
.justify-content-evenly
Flex item
Flex item
Flex item
Interactions
Text Selection
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
This link can be clicked (this is default behaviour).
This link can not be clicked because the
pointer-events property is inherited from its parent. However, this
link
has a pe-auto class and can be clicked.