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 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 $}
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 $}
Selects
Other Input Types
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
$

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

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

## Labels

Default Primary Success Warning Danger Info

## Badges

# Progress bars

### Basic

### Contextual alternatives

### Striped

### Animated

### Stacked

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

# Dialogs

## Modals

#### Modal title

One fine body…

## Popovers

## Tooltips

#### Source Code