To view source code, hover over a section, then click the button in the top right of that section.

Navbar Buttons Typography Tables Forms Navs Indicators Charts Progress bars Containers Dialogs

# Navbar

# Buttons

Left Middle Right

# Typography

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

## Example body text

Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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.

## Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

## Blockquotes

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

> {$ 'Someone famous in' | translate $}Source Title

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

> {$ 'Someone famous in' | translate $}Source Title

# Tables

## Standard Table

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

## Bordered Table

# | Column heading | Column heading | Column heading
--- | --- | --- | ---
1 | Column content | Column content | Column content
2 | Column content | Column content | Column content

# Forms

Legend
Email
Password
{$ 'Checkbox' | translate $}
Themable Checkbox
Textarea
A longer block of help text that breaks onto a new line and may extend beyond one line.
Radios
{$ 'Option one is this' | translate $}
{$ 'Option two can be something else' | translate $}
Themable Radios
{$ 'Themable Option 1' | translate $}
{$ 'Themable Option 2' | translate $}
Selects
Themable Selects
Other Input Types
Datepicker
Datetime
Date
Month
Time
Week
Number
Email
Url
Search
Tel
Color

### Input States

Focused input
Disabled input
Input warning
Input error
Input success

### Input Sizes

Large input
Default input
Small input
Input addons
$

### Inline Form

Name
Email

# Navs

## Tabs

Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.

Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

## Pills

## Breadcrumbs

## Pagination

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

## Pager

- Previous
- Next

- ← {$ 'Older' | translate $}
- {$ 'Newer' | translate $} →

# Indicators

## Alerts

#### Warning!

Somethings not quite right. Maecenas sed diam eget risus varius blandit sit amet non magna!

<translate> Oh snap! Change a few things up and try submitting again. </translate>
<translate> Well done! You successfully read this important alert message. </translate>
<translate> Heads up! This alert needs your attention, but it's not super important. </translate>

## Labels

Default Primary Success Warning Danger Info

## Badges

# Charts

## Usage Charts

## Distribution Charts

## Line Charts

# Progress bars

### Basic

### Contextual alternatives

### Striped

### Animated

### Stacked

### Text

10%
75%

### Loading

# Containers

# Jumbotron

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

Learn more

## List groups

- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus

Cras justo odio Dapibus ac facilisis in Morbi leo risus

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

## Panels

Basic panel
Panel heading
Panel content
Panel content

### Panel primary

Panel content

### Panel success

Panel content

### Panel warning

Panel content

### Panel danger

Panel content

### Panel info

Panel content

## Wells

Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!

## Other lists

### Unordered

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

### Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

### Unstyled

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

### Inline

- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat

### Definition list

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.

### Horizontal Definition List

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

# Dialogs

## Popovers

## Tooltips

## Modals

#### Standard Modal

One fine body…

#### Small Modal

One small body…

#### XS

One tiny body…

#### Large Modal

One large body…

#### XL Modal

One super large body…

#### Source Code