Buttons

Typography

Display headings

Display heading 1

Display heading 2

Display heading 3

Display heading 4

Regular headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Body text

I'm the Dude. So that's what you call me. You know, that or, uh, His Dudeness , or uh, Duder, or El Duderino if you're not into the whole brevity thing.

This is an example of .text-muted
This is an example of .text-primary
This is an example of .text-success
This is an example of .text-info
This is an example of .text-warning
This is an example of .text-danger

Text emphasis

This is an example of .lead text

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text .

The following snippet of text is rendered as italicized text .

An abbreviation of the word attribute is attr .

Blockquotes

What's a... pederast, Walter?

Donny The Big Lebowski

Shut the f--- up, Donny.

Walter The Big Lebowski

Inline code

<code> tags look like this.

User input

Press alt + f4 to win $$

Sample output

How about a nice game of chess?

Tables

Basic table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default header

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat

Inverse header

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat

Striped rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual rows

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content

Forms

Default form

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Forms grid

Form inputs

$

Indicators

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Labels
Default Primary Success Info Warning Danger

Label pills
Default Primary Success Info Warning Danger

Progress bars

Default

0% 25% 50% 75% 100%

Contextual alternatives

25% 50% 75% 100%

Striped

100% 100% 100% 100% 100%

Animated

25%

Containers

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Fluid jumbotron

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Cards

Examples

This is a basic card block

Card title

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

Card link Another link

Featured card

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Button

Primary

Text goes here

Success

Text goes here

Info

Text goes here

Warning

Text goes here

Danger

Text goes here


Card groups

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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Card decks

Card title

This is a longer 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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

List groups

Dialogs

Modal

Popovers

Tooltips