--- title: Calcite+Bootstrap description: This is a template showcasing what you can expect in Calcite+Bootstrap. Use it as a starting point to create something more unique by building on or modifying it. section: 'examples' ---

# Theme example

This is a template showcasing what you can expect in Calcite-Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.

#### CSS

Typography Code Tables Forms Buttons Images Helper Classes

#### Components

Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List groups Panels Responsive embed Wells

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

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

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

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

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

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

## Buttons

## Images

## Helper Classes

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

## Dropdowns

## Button groups

## Button dropdowns

## Input groups

@
@example.com
$ .00
Your vanity URL
https://example.com/users/

## Navs

### Nav Tabs

### Nav Pills

## Navbar

## Breadcrumbs

## Pagination

### Pager

## Labels

Default Primary Success Info Warning Danger

## Badges

Inbox 42

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

# Sample Page Header Subtext for header

## Thumbnails

## Alerts

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

## Progress bars

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

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

## Cards

- ###### Card Title

  - January 7, 2016
  - Author Name

- ###### Card Title

  - January 7, 2016
  - Author Name

- ###### Card Title

  - January 7, 2016
  - Author Name

- ###### Card Title

  - January 7, 2016
  - Author Name

- ###### Card Title

  - January 7, 2016
  - Author Name

- ###### Card Title

  - January 7, 2016
  - Author Name

## List groups

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

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

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

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

### Panel title

Panel content

## Responsive embed

## Wells

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.