This is a styleguide page. Depicted here are the many different typographic styles, visual treatments and media presentations that are used throughout a website.
Brand Headings
Accented Headline (H1)
Accented Headline (H2)
Accented Headline (H3)
Accented Headline (H4)
Accented Headline (H5)
Accented Headline (H6)
Accented (H1)
Accented (H2)
Accented (H3)
Accented (H4)
Accented (H5)
Accented (H6)
Headline (H1)
Headline (H2)
Headline (H3)
Headline (H4)
Headline (H5)
Headline (H6)
Semantic Headings
Page Header (H1)
This is a .lead paragraph, used for introductory and summary copy.
Section Header (H2)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Nav Header (H3)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Aside Header (H3)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Pull-out Header (H3)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Section Header (H4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Nav Header (H4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Aside Header (H4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Pull-out Header (H4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Subhead (H4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Subhead (H5)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Subhead (H6)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Jumbotrons and Headers
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This Hero-Unit Uses Brand Guidelines
This uses a layered design appoach. The first layer is an image. The second layer is a brand accent color, with opacity applied. The third layer contains an optional transparent image (e.g. Routledge logo). Finally, the fourth layer contains the headline and body copy.
Ads and Promos
People
Create and share information.
Consumers
Consume and purchase information.
Robots
Consume people.
Typography Elements
Headlines and Subheads
This is a .lead paragraph, used for introductory and summary copy.
Level 1 Heading (H1)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Level 2 Heading (H2)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Level 3 Heading (H3)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Level 4 Heading (H4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Level 5 Heading (H5)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Level 6 Heading (H6)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Quotes and Blockquotes
Paragraph inside Blockquote: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, minima placeat veniam nobis aut itaque odit modi sint ullam natus a vel fuga eos.
Someone famous in Source Title
Blockquote – pulled right.
Source
Lists
- Unordered list 01
- Unordered list 02
- Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
- Unordered list inside list level 3
- Unordered list inside list level 3
- Ordered list 01
- Ordered list 02
- Ordered list 03
- Ordered list inside list level 2
- Ordered list inside list level 2
- Ordered list inside list level 3
- Ordered list inside list level 3
- Inline
- List
- .list-inline
- Unordered .list-bulleted 01
- Unordered .list-bulleted 02
- Unordered .list-bulleted 03
- Unordered list inside .list-bulleted level 2
- Unordered list inside .list-bulleted level 2
- Unordered list inside .list-bulleted level 3
- Unordered list inside .list-bulleted level 3
- Ordered .list-numbered 01
- Ordered .list-numbered 02
- Ordered .list-numbered 03
- Ordered list inside .list-numbered level 2
- Ordered list inside .list-numbered level 2
- Ordered list inside .list-numbered level 3
- Ordered list inside .list-numbered level 3
- Unordered .list-brand 01
- Unordered .list-brand 02
- Unordered .list-brand 03
- Unordered list inside .list-brand level 2
- Unordered list inside .list-brand level 2
- Unordered list inside .list-brand level 3
- Unordered list inside .list-brand level 3
Description/Definition Lists
- Vertical 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.
- Horizontal lists
- A description list is perfect for defining terms.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Addresses
Company Name, Inc.246 This Ave, Suite 8
Thatcity, AA 13579
P: (123) 456-7890 Full Name
first.last@example.com
Semantic Contextual Elements
| Purpose | Example | Code |
|---|---|---|
| anchor or link | hyperlink | <a>...</a> |
| bold, or strong |
bold strong |
<b>...</b><strong>...</strong> |
| italic, or emphasis |
italic emphasis |
<i>...</i><em>...</em> |
| abbreviation | HTML | <abbr>...</abbr> |
| big | Large Text | <big>...</big> |
| small | Small Text | <small>...</small> |
| citation | cite | <cite>...</cite> |
| code, or teletype, or pre-formatted text |
codett pre |
<code>...</code><tt>...</tt><pre>...</pre> |
| highlighted text | this keyword here | <mark>...</mark> |
| strike-through | <s>...</s> |
|
| underlined text | underline | <u>...</u> |
| deleted text | <del>...</del> |
|
| inserted text | inserted | <ins>...</ins> |
| subscript | sub | <sub>...</sub> |
| superscript | sup | <sup>...</sup> |
| defining term | dfn | <dfn>...</dfn> |
| keyboard input | kbd | <kbd>...</kbd> |
| quotation | q |
<q>...</q> |
| sample output | samp | <samp>...</samp> |
| variable | var | <var>...</var> |
Text Emphasis
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .text-muted
Nullam id dolor id nibh ultricies vehicula ut id elit. .text-primary
Etiam porta sem malesuada magna mollis euismod. .text-warning
Donec ullamcorper nulla non metus auctor fringilla. .text-danger
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. .text-success
Maecenas sed diam eget risus varius blandit sit amet non magna. .text-info
Design and Layout Components
Panels
Default panel title
Primary panel title
Section panel title
Nav panel title
Aside panel title
Pull-out panel title
Success panel title
Info panel title
Warning panel title
Danger panel title
Default panel with list groups
Default panel with table
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |
Outlined panel title
Layered panel title
Stiched panel title
Labels New
Default Primary Success Info Warning Danger
Wells
Alert Messages
Errors and Warnings: Change a few things up and try submitting again. .alert-danger
Success: You successfully read this important alert message. .alert-success
Information: This alert needs your attention, but it's not super important. .alert-info
List Groups
List group item heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
List group item heading
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
List group item heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Thumbnails
Icons
FontAwesome
<span class="icon icon-..."></span>
Tables
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |
| Default | |
|---|---|
| Active row | tr.active |
| Success | tr.success |
| Danger/Error | tr.danger |
| Warning | tr.warning |
Forms and Buttons
Typical Form Elements
Form Layouts
Inline Form
Horizontal Form
Buttons
Button Sizes
Block Buttons
Disabled Buttons
Grids and Layouts
Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Semantic Grid Layouts
These styles mimic columns but better represent actual layout content.
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Max container width | None (auto) | 720px | 940px | 1140px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # of columns | 12 | |||
| Max column width | Auto | 60px | 78px | 95px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | N/A | Yes | ||
| Column ordering | N/A | Yes | ||
Example: Stacked-to-horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
</div>
<div class="row">
<div class="col-md-8">8</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
Example: Combining mobile with desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">8</div>
<div class="col-xs-6 col-md-4">4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">4</div>
<div class="col-xs-6 col-md-4">4</div>
<div class="col-xs-6 col-md-4">4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6 col-md-6">6</div>
<div class="col-xs-6 col-md-6">6</div>
</div>
Example: Mobile, tablet, and desktop
Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>