# Theme example

This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.

## Typography

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

# h1. Bootstrap heading Secondary text

## h2. Bootstrap heading Secondary text

### h3. Bootstrap heading Secondary text

#### h4. Bootstrap heading Secondary text

##### h5. Bootstrap heading Secondary text

###### h6. Bootstrap heading Secondary text

BODY COPY: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

LEAD BODY COPY: Maecenas sed diam eget risus varius blandit sit amet non magna. 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.

Use the mark tag to highlight text elements inline.

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.

Sometimes you need some words rendered as bold text.

Other times you need words that are rendered as italicized text.

### Alignment Classes

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

### Transformation Classes

Lowercased text.

Uppercased text.

Capitalized text.

### Abbreviations

#### Basic Abbreviation

An abbreviation of the word attribute is attr.

#### Initialism

HTML is the best thing since sliced bread.

### Addresses

### Blockquotes

#### Default Blockquote

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

#### Blockquote Options

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

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

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

#### Description

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 Description

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.

## Code

### Inline

For example, `<section>` should be wrapped as inline.

### User Input

To switch directories, type `cd` followed by the name of the directory.
To edit settings, press ``ctrl` + `,``

### Basic Block

    <p>Sample text here...</p>

### Variables

y = m x + b

### Sample Output

`This text is meant to be treated as sample output from a computer program.`

## Tables

### Basic Table

Optional table caption.
# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Cassidy | Bishop | @cbish
4 | Julio | Ochoa | @j8
5 | Larry | the Bird | @twitter

### Striped Rows

Optional table caption.
# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter
4 | Cassidy | Bishop | @cbish
5 | Julio | Ochoa | @j8

### Bordered Table

Optional table caption.
# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Cassidy | Bishop | @cbish
3 | Julio | Ochoa | @j8
4 | Jacob | Thornton | @fat
5 | Larry | the Bird | @twitter

### Hover Rows

Optional table caption.
# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Cassidy | Bishop | @cbish
3 | Julio | Ochoa | @j8
4 | Jacob | Thornton | @fat
5 | Larry | the Bird | @twitter

### Condensed Table

Optional table caption.
# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Cassidy | Bishop | @cbish
3 | Julio | Ochoa | @j8
4 | Jacob | Thornton | @fat
5 | Larry | the Bird | @twitter

### Contextual classes

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

### Basic Form

Email address
Password
File input

Example block-level help text here.

Check me out

### Inline Form

Name
Email
Email address
Password
Remember me
Amount (in dollars)
$
.00

### Horizontal Form

Email
Password
Remember me

### Supported Controls

#### Inputs

#### Textarea

#### Checkboxes and Radios

##### Default

Option one is this and that—be sure to include why it's great
Option two is disabled
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
Option three is disabled

##### Inline

1 2 3 1 2 3

##### Without Label Text

#### Selects

### Static Control

Email

email@example.com

Password
Email

email@example.com

Password

### Focus State

### Disabled State

#### Disabled Fieldsets

Disabled input
Disabled select menu
Can't check this

### Readonly State

### Validation States

Input with success
Input with warning
Input with error
Checkbox with success
Checkbox with warning
Checkbox with error

#### With Optional Icons

Input with success (success)
Input with warning (warning)
Input with error (error)
Input group with success
@
(success)

##### Optional icons in horizontal and inline forms

Input with success
(success)
Input group with success
@
(success)
Input with success (success)
Input group with success
@
(success)

##### Optional icons with hidden .sr-only labels

Hidden label (success)
Input group with success
@
(success)

### Control Sizing

#### Height Sizing

#### Horizontal Form Group Sizes

Large label
Small label

#### Column Sizing

### Help Text

Input with help text
A block of help text that breaks onto a new line and may extend beyond one line.

## Buttons

## Images

### Responsive Images

### Image Shapes

## Helpers

### Contextual Colors

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

### Contextual Backgrounds

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

### Close Icon

### Carets

## Glyphicons

### Examples

Error: Enter a valid email address

## Dropdowns

## Button Groups

### Basic Group

### Button Toolbar

## Button Dropdowns

### Single Button Dropdowns

### Split Button Dropdowns

### Sizing

### Dropup Variation

## Input Groups

@
@example.com
$ .00

### Sizing

@
@
@

### Checkboxes and Radio Addons

### Button Addons

### Buttons with Dropdowns

### Segmented Buttons

## Navs

### Tabs

### Pills

### Justified

Tabs

pills

### Disabled Links

### Tabs with Dropdowns

### Pills with Dropdowns

## NavBar

### Default Navbar

### Brand Image

### Forms in Navbars

### Buttons in Navbars

### Text in Navbars

### Non-nav Links

### Inverse Navbar

## Breadcrumbs

## Pagination

### Default Pagination

### Disabled and Active Links

### Sizing

## Pager

### Default

### Aligned Links

### Optional Disabled State

## Labels

### Example heading New

### Available Variations

Default Primary Success Warning Danger

## Badges

Inbox 42

button badges

#### Adapts to Active Nav States

## Jumbotron

# Hello, world!

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

Learn more

## Page Header

# Example page header Subtext for header

## Thumbnails

## Custom Content

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

## Alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

### Dismissable Alerts

Warning! Better check yourself, you're not looking too good.

### Links in Alerts

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

## Progress Bar

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

## Media Object

#### Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

#### Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

#### Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

#### Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

#### Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

## List Group

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

### List Group with Badges

- 8 Cras justo odio
- 16 Dapibus ac facilisis in
- 24 Morbi leo risus
- 32 Porta ac consectetur ac
- 40Vestibulum at eros

### Linked Items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

### Disabled Items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

### Contextual Classes

- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

### Custom Content

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

#### List group item heading

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

## Panels

Basic panel example

### Panel with Heading

Panel heading without title
Panel content

### Panel title

Panel content

### Panel with Footer

Panel content

### Contextual Classes

Panel heading without title
Panel content
Panel heading without title
Panel content
Panel heading without title
Panel content
Panel heading without title
Panel content
Panel heading without title
Panel content

### Panel with Table

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

### Panel with List Group

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

## Responsive Embed

## Wells

Look, I'm in a well!

### Sizing

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