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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

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.

Someone famous in Source Title

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

Someone famous in Source Title

Lists

Unordered

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

Inline

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 = mx + 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

Example block-level help text here.

Inline Form

$
.00

Horizontal Form

Supported Controls

Inputs

Textarea

Checkboxes and Radios

Default
Inline
Without Label Text

Selects

Static Control

email@example.com

email@example.com

Focus State

Disabled State

Disabled Fieldsets

Readonly State

Validation States

With Optional Icons

(success)
(warning)
(error)
@
(success)
Optional icons in horizontal and inline forms
(success)
@
(success)
(success)
@
(success)
Optional icons with hidden .sr-only labels
(success)
@
(success)

Control Sizing

Height Sizing

Horizontal Form Group Sizes

Column Sizing

Help Text

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

Buttons


Images

Responsive Images

Responsive image

Image Shapes

140x140 140x140 140x140

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


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


Thumbnails

Custom Content

100%x200

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

100%x200

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

100%x200

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

Dismissable Alerts

Links in Alerts


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

List Group with Badges

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

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.


Responsive Embed


Wells

Look, I'm in a well!

Sizing

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