Style Guide

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.

Headings

Page Header With Small Text

This is an h1 heading

This is an h2 heading

This is an h2 heading

This is an h3 heading

This is an h3 heading

This is an h4 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading
Tables
# First Name Tables
1 Michael Are formatted like this
2 Lucille Do you like them?
3 Success
4 Danger
5 Warning
6 Active
# First Name Tables
1 Michael This one is bordered and condensed
2 Lucille Do you still like it?
Content Formatting

This is a large lead paragraph.

This is a lead paragraph.

This is an ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks. An inline cta and An inline cta with caret.

Muted color paragraph.

Warning color paragraph.

Danger color paragraph.

Info color paragraph.

Success color paragraph.

This is text in a small wrapper. NBD, right?


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

Here's what a blockquote looks like in Bootstrap. Use small to identify the source. This is a cite block.

  • Normal Unordered List
  • Can Also Work
    • With Nested Children
  • Adds Bullets to Page
  1. Normal Ordered List
  2. Can Also Work
    1. With Nested Children
  3. Adds Bullets to Page

function preFormatting() {  // looks like this;  var something = somethingElse;  return true;}

This is a longer button This is a longer button

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

Photo credit

200x200
200x200

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Inbox 42

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

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

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.

You may also add the class “nh-icon-sm” to reduce these to 60px.

Image Sizes

Home
  • Hero: 1170×450
  • 3 Column: 618×378
  • Featured Project: 975×566
Our Approach
  • Hero: 1170×450
Our Projects
  • Grid Position 1: 745×255
  • Grid Position 2: 760×950
  • Grid Position 3: 700×840
  • Grid Position 4: 700×840
  • Grid Position 5: 730×420
Project Detail
  • Hero: 1290×450
  • Right Rail: 618×378
Our Team
  • Profile: 255×320
Blog
  • Featured Image: 720×405 orĀ 400×225 – Use 720×405 as the featured image. Do not vary from these sizes.
  • 16:9 aspect ratio is required