• Primary Color
  • Secondary Color
  • Success Color
  • Danger Color
  • Warning Color
  • Info Color
  • Light Color
  • Dark Color
  • Primary Color Background
  • Secondary Color Background
  • Success Color Background
  • Danger Color Background
  • Warning Color Background
  • Info Color Background
  • Light Color Background
  • Dark Color Background

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

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.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • Nested lists:
    • will still show a bullet
    • and have appropriate left margin
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  1. This is an ordered list.
  2. Nested unordered lists:
    • will still show a bullet
    • and have appropriate left margin
  3. Nested ordered lists:
    1. will still show a bullet
    2. and have appropriate left margin
  • Inline list
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Tables

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

Figures

Placeholder400x300
A caption for the above image.

Forms

Overview

We'll never share your email with anyone else.
Radios buttons

Disabled forms

Disabled radios buttons

Input group

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

Floating labels

Validation

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.

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

Buttons

Button group

Tabs

Progress

0%
25%
50%
75%
100%

Spinners

Toasts

Tooltips

Slick Slider

...