Content

Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
Inline text elements

You can use the mark tag to highlight text.

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

Placeholder Responsive image

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

Placeholder 900x150
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

Breadcrumb

Buttons

Card

Card title

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

Go somewhere
Featured
Card title

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

Go somewhere
2 days ago
Card title

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

  • An item
  • A second item
  • A third item
Card link Another link
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

Carousel

Carousel (Dark variant)

Close button

Collapse

Anim cliche, high life terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred ea.

Dropdowns

Modal

Navbar

Offcanvas

Note: Offcanvas is not working on IE11. See GitHub Issue #39

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Popovers

Progress

Labels
25%
Multiple Bars
Striped
Animated

Scrollspy

@fat

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.

Tabs

Note: Requires element-qsa-scope polyfill. See GitHub Issue #39

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.

Toasts

Tooltips

Checks & Radios

Switches

Select

Disabled Select
Disabled Input
Disabled Fieldset
Read Only

Range

Input Color

Input Group

@
@example.com
https://example.com/users/
$ .00
@
With textarea

Floating Labels

Validation - Tooltips

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.

Ratio

1x1
4x3
16x9
21x9

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.

Pointer events

This link can not be clicked.

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.

Clearfix

Position

Text

Text wrapping and overflow
This text should wrap.
This text should overflow the parent.
Word Break

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm