Buttons

Button Outline

Buttons Sizes

Buttons Group

Progress Bar

Striped

Alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Badge

Primary Secondary Success Danger Warning Info Light Dark

Cards

Card title

This is a simple Card example.

This is some text within a card body.

Featured

Special title treatment

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

Go somewhere

Typography

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.

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

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

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

Quote

“I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. ”

– Noaa

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat.

Display

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6