## On this page

## Contents

### Typography

Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

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.

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

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

- This is a list item.
- And another one.
- But they're displayed inline.

### Images

Documentation

### Tables

Documentation

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

# | 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

Documentation
A caption for the above image.

## Forms

### Overview

Documentation
Email address
We'll never share your email with anyone else.
Password
Check me out
Radios buttons
Default radio
Another radio
Upload
Checked switch checkbox input
Example range

### Disabled forms

Documentation
Disabled input
Disabled select menu
Can't check this
Disabled radios buttons
Disabled radio
Another radio
Upload
Disabled checked switch checkbox input
Disabled range

### Sizing

Documentation

### Input group

Documentation
@
@example.com
Your vanity URL
https://example.com/users/
$ .00
With textarea

### Floating labels

Documentation
Email address
Password

### Validation

Documentation
First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
You must agree before submitting.

## Components

### Accordion

Documentation

####

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

Documentation
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.

#### Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

### Badge

Documentation

Example heading New

Example heading New

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

### Breadcrumb

Documentation

### Buttons

Documentation

### Button group

Documentation

### Card

Documentation

##### 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

##### 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

Documentation

##### First slide label

Some representative placeholder content for the first slide.

##### Second slide label

Some representative placeholder content for the second slide.

##### Third slide label

Some representative placeholder content for the third slide.

### Dropdowns

Documentation

### List group

Documentation

- A disabled item
- A second item
- A third item
- A fourth item
- And a fifth one

- An item
- A second item
- A third item
- A fourth item
- And a fifth one

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

### Modal

Documentation

### Navs

Documentation

### Navbar

Documentation

### Pagination

Documentation

### Popovers

Documentation

### Progress

Documentation
0%
25%
50%
75%
100%

### Scrollspy

Documentation

#### First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

#### Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

#### Third heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

#### Fourth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

#### Fifth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

### Spinners

Documentation
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

### Toasts

Documentation
Bootstrap 11 mins ago
Hello, world! This is a toast message.

### Tooltips

Documentation

##### Modal title

...

##### Modal title

I will not close if you click outside me. Don't even try to press escape key.

##### Modal title

This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.

This content should appear at the bottom after you scroll.

##### Full screen modal

...