Content

Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

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
Table Striped Columns
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table Dark Striped Columns
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figures

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.
Accordion Flush

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Alerts

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

Buttons

Link

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.

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

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

Dropdowns

List Group

The current link item A second link item A third link item A fourth link item A disabled link item
  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
A simple default list group item 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
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.

Modal

Navbar

Offcanvas

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

Placeholders

...
Card title

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

Go somewhere

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, williams hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa diesel wes and 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 diesel 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, williams hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa diesel wes and 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 diesel 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, williams hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa diesel wes and 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 diesel 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, williams hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa diesel wes and 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 diesel 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, williams hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa diesel wes and 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 diesel 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, williams hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa diesel wes and 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 diesel keffiyeh artisan.

Spinners

Tabs

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

Forms

Checks & Radios

Switches

Select

Disabled Select
Disabled Input
Disabled Fieldset
Read Only

Range

File Input

Input Color

Datalists

Input Group

@
@example.com
https://example.com/users/
$ .00
@
With textarea
First and last name

Floating Labels

Validation

Server Side

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

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.

Helpers

Clearfix

Color & background

Primary with contrasting color
Secondary with contrasting color
Success with contrasting color
Danger with contrasting color
Warning with contrasting color
Info with contrasting color
Light with contrasting color
Dark with contrasting color
Primary Info
Header

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

Header

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

Colored links

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

Focus ring

Custom focus ring

Ratio

1x1
4x3
16x9
21x9

Stacks

Vertical
First item
Second item
Third item
Horizontal
First item
Second item
Third item
Horizontal with Vertical rule

Text truncation

This text is quite long, and will be truncated once displayed.
This text is quite long, and will be truncated once displayed.

Vertical rule

Utilities

Background

Background Color
.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle
.bg-body-secondary
.bg-body-tertiary
.bg-body
.bg-black
.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
.bg-black.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

Borders

Additive

Subtractive

Color

Width

Radius

Radius Sizes

Colors

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-muted

.text-black

.text-white

.text-black-50

.text-white-50

This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text

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
col
col
col
col-sm
col-sm
col-sm
col-md
col-md
col-md
col-lg
col-lg
col-lg
col-xl
col-xl
col-xl
col-xxl
col-xxl
col-xxl

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 behavior).

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.

Link

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

Opacity

100%
75%
50%
25%

Position

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Sizing

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

Text

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

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Font weight and italics

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Line height

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed