Carousel

Reference: Bootstrap carousel


Note: When no additional information is provided refer to Bootstrap defaults.

Full width sections + Modifiers:

Section + wrapper + background

Create a section and add modifiers.

section.wrapper-lg.bg-highlight

Section + wrapper + background

Create a section and add modifiers.

section.wrapper-md.bg-info

Section + wrapper + background

Create a section and add modifiers.

section.wrapper-sm.bg-primary

Section + wrapper + background

Create a section and add modifiers.

section.wrapper-sm.bg-secondary

Section + wrapper + background

Create a section and add modifiers.

section.wrapper-sm.bg-danger


Heads up: Create more variations or instances following the provided mixin pattern.

Heads up: Text inside bg-* may require the use of empahsis classes .text-* to style font colors.

Typography

Reference: Bootstrap typography


.h1 Boot Heading

.h2 Bootstrap Heading

.h3 Bootstrap Heading

.h4 Bootstrap Heading

.h5 Bootstrap Heading
.h6 Bootstrap Heading

Body copy

.lead Lead text

<p>Cardinal covetous comparable orca far sneered much a under on when therefore augustly slew wildebeest oh vehement kiwi adoringly contrary obedient up gosh specially yikes far bluebird disagreeably beside much spluttered and nonsensical tortoise loyally blushed pushed spun.</p>


<small> Small text,
<strong> Strong text,
<em> Emphasis text.

Emphasis classes

Default heading h1.heading-default

Default text p.text-default

Muted text p.text-muted

Primary text p.text-primary

Success text p.text-suceess

Info text p.text-info

Warning text p.text-warning

Danger text p.text-danger

Page header + Headline

Reference: Bootstrap Header

h1.page-header

h1.headline

Headline

Lists

Unordered list: ul>li

  • List item
  • List item
  • List item

Ordered list: ol>li

  1. List item
  2. List item
  3. List item

Unstyled list:
ul.list-unstyled>li

  • List item
  • List item
  • List item

Inline list:
ul.list-inline>li

  • List item
  • List item
  • List item

Tags:
ul.tags>(li.active>a)+(li>a)


Image Stream:
ul.img-stream>li>img

  • img
  • img
  • img
  • img
  • img
  • img
  • img
  • img

Social Networks:
ul.social-networks>li>a.btn.btn-twitter>i.fa.fa-fw.fa-twitter


Heads up: Create more variations or instances following the provided mixin pattern. Just ensure there's a font glyph available to drop in.

Blockquotes with optional author avatar


Default tag:

.blockquote-default

Those who say “it’s not personal, it’s just business” are lying. All business is personal, and the best business is very personal.

img
Cooper Black
Chicago, Illinois USA

Primary class:

.blockquote-primary

Those who say “it’s not personal, it’s just business” are lying. All business is personal, and the best business is very personal.

img
Gill Sans
West Sussex, England

Secondary class:

.blockquote-secondary

Those who say “it’s not personal, it’s just business” are lying. All business is personal, and the best business is very personal.

img
Calisto MT
London, England

Code Highlighting


The Bootsrap way

Nothing new here.


Inline

Wrap inline snippets of code with <code>.

Output example: <p>Lorem ipsum bootstrap</p>


Code blocks

Or use <pre> and <code> to get code blocks:

<!-- The usual Bootstrap files -->
<head>
  <link href="assets/css/bootstrap.css" rel="stylesheet" />
  <script src="assets/js/bootstrap.js"></script>
</head>
<!-- Wrap your code -->
<body>
  <pre>
    <code>
      <p>Lorem ipsum bootstrap</p>
    </code>
  </pre>
</body>

The Prism JS way

Let's go the hipster way with Prism JS


Inline

Wrap inline snippets of code with <code class="language-markup">.

Output example: <p>Lorem ipsum bootstrap</p>


Code blocks

Or use <pre> and <code class="language-markup"> to get code blocks:

<!-- Load prism.js and any of its css themes -->
<head>
	<link href="assets/css/prism.css" rel="stylesheet" />
	<link href="assets/css/prism-line-numbers.css" rel="stylesheet" />
	<script src="assets/js/prism.js"></script>
	<script src="assets/js/prism-line-numbers.js"></script>
</head>
<!-- Wrap your code -->
<body>
	<pre class="line-numbers">
		<code class="language-markup">
			<p>Lorem ipsum bootstrap</p>
		</code>
	</pre>
</body>

Heads up: Only one Prism theme (Default) and one plugin (Line Numbers) are included, more features are available at www.prismjs.com, download a custom set and raplace the current files.

Tables

Easier to read tables


Basic striped tables

.table .table-striped

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

Striped and bordered

.table .table-striped .table-bordered

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

Striped and bordered with hover effect

.table .table-bordered .table-hover

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

Contextual classes

Use state classes on rows or cells (td & th) .active .success .warning .danger

# First Name Last Name Username
1 Active ... ...
2 ... ... ...
3 Success ... ...
4 ... ... ...
4 Warning ... ...
5 ... ... ...
6 Danger ... ...

Forms

Reference: Bootstrap forms


Basic form

Example block-level help text here.

Checkbox



Radio

Select


Multiple Select


Inline form

Disabled fields


Validation states


Input groups & Addons

Basic addon

Your

Button addon

Checkbox addon


Button & dropdown

Radio addon


Segmented buttons

Buttons

Reference: Bootstrap buttons


Optional shadow and border radius via LESS


Grouped buttons & Dropdown menus


Button groups & Glyphicons


Justified anchor links

Button sizes

Block level

Vertigal groups

Images

Reference: Bootstrap Images

img.img-rounded

img

img.img-circle

img

img.img-thumbnail

img

Navs

Reference: Bootstrap navs

Nav Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Lorem ipsum dolor sitamet, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Nav Pills stacked


Navbar with Logo

Reference: Bootstrap navbar

Heads up: Logo must be 50px height (any width).


Navbar Default

Navbar Inverse

Breadcrumbs

Reference: Bootstrap Breadcrumbs

ol.breadcrumb>(li>a)+(li>a)+(li.active>a)

Pagination

Reference: Bootstrap Pagination

Pagination

ul.pagination>(li.active>a)+(li>a)



Pager aligned

ul.pager>(li.previous>a)+(li.next>a)


Pager default

ul.pager>(li>a)+(li>a)

Labels

Reference: Bootstrap Labes, Badges & Navs

span.label.label-default

Default Primary Success Info Warning Danger

Badges

span.badge

Badge: 42


a>span.badge

Badge iside link: Inbox 42

Badges inside navs:

Nav Pills

ul.nav.nav-pills>(li.active>a)+(li>a)


Nav Pills Stacked

ul.nav.nav-pills.nav-stacked>(li.active>a)+(li>a)

Jumbotron

Reference: Bootstrap Jumbotron

div.jumbotron > div.container > h1 + p

Bootstrap UI

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

Download Now

Thumbnails

Reference: Bootstrap Thumbnails

Thumbnail - Links:

a.thumbnail>img


Thumbnails - Custom content:

div.thumbnail>(a>img)+(div.caption>p)

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Button Button


Thumbnails - With overlay and extra rows:

div.thumbnail>(div.overlay-container>img+div.overlay-content>p)+(div.caption>p)+(div.thumbnail-meta>p)

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet consctetur.

Beautiful Photography »

Graphikaria photo albums...

User Lucida Sans submited this entry
Oct 3, 2014 - 23 14

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet consctetur.

Beautiful Photography »

Graphikaria photo albums...

User Lucida Sans submited this entry
Oct 3, 2014 - 23 14

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet consctetur.

Beautiful Photography »

Graphikaria photo albums...

User Lucida Sans submited this entry
Oct 3, 2014 - 23 14

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet consctetur.

Beautiful Photography »

Graphikaria photo albums...

User Lucida Sans submited this entry
Oct 3, 2014 - 23 14

Thumbnail - Frameless:

div.thumbnail.thumbnail-frameless>(a>img)+(div.caption>p)

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

img

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Filtering and Sorting With Isotope

Isotope V2 Reference: http://isotope.metafizzy.co/
Heads up: I used Isotope version 2. Make sure you are addressing the right documentation in Isotope website.

Example:

The filters:

<ul id="filters" class="tags">
  <li><strong>Browse by tags:</strong></li>
  <li class="active"><a href="#link" data-filter="*">Show All</a></li>
  <li><a href="#link" data-filter=".apples">apples</a></li>
  <li><a href="#link" data-filter=".kiwis">kiwis</a></li>
  <li><a href="#link" data-filter=".oranges">oranges</a></li>
</ul>

The items:

<div class="row isotope-container">
  <div class="col-sm-4 isotope-item apples"></div>
  <div class="col-sm-4 isotope-item kiwis"></div>
  <div class="col-sm-4 isotope-item oranges"></div>
</div>

Example JS setup:

$(window).load(function() {
  var $container = $('.isotope-container').isotope({});
  $container.isotope({
    resizable: false,
    layoutMode : 'masonry',
    itemSelector : '.isotope-item',
    masonry: {
      columnWidth: 1,
      gutter: 1
    }
  });
  $('#filters a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).addClass('active');
    return false;
  });
});

Alerts

Reference: Bootstrap Alerts

div.alert.alert-success.alert-dismissable

Success

Well done! You successfully read this important alert message.

div.alert.alert-info.alert-dismissable

Info

Heads up! This alert needs your attention, but it's not super important.

div.alert.alert-warning.alert-dismissable

Warning

Warning! Best check yo self, you're not looking too good.

div.alert.alert-danger.alert-dismissable

Danger

Oh snap! Change a few things up and try submitting again.

Progress Bars

Reference: Bootstrap Progress Bars

div.progress.progress-striped>div.progress-bar[style=width:20%]>span.sr-only{Loading or something}

Default:

40% Complete (success)

Success:

40% Complete (success)

Info:

20% Complete

Warning:

60% Complete (warning)

Danger:

80% Complete (danger)

Active:

80% Complete (danger)

Stacked:

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Media Object

Reference: Bootstrap Media Object


Media Default

div.media>(a.pull-left>img.media-object)+div.media-body>h4.media-heading+p

64x64

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.
64x64

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.
64x64

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 List

ul.media-list>li.media>(a.pull-left>img.media-object)+div.media-body>h4.media-heading+p

  • img

    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.

    64x64

    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.
    64x64

    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.
    64x64

    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.
  • 64x64

    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

Reference: Bootstrap List Groups

Basic Example

ul.list-group>(li.list-group-item.active)+(li.list-group-item)

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

Linked Items:

div.list-group>(a.list-group-item.active)+(a.list-group-item)

Panels

Reference: Bootstap Panels

div.panel.panel-default>div.panel-heading{Hello}+div.panel-body{World}

Basic panel:

Body text.
Panel heading
Body text.
Body text.

Panel heading

Body text.

Contextual alternatives:

Panel Primary

Body text

Panel Secondary

Body text

Panel Success

Body text

Contextual alternatives:

Panel Info

Body text

Panel Warning

Body text

Panel Danger

Body text

Panels and tables

See panels reference above.

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

Panels and list groups

See panels reference

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

Wells

Reference: Bootstrap Wells

Well Small

div.well.well-sm

Premium Sevice

You can use this template as your blog or portfolio

Learn even more »

Well Default

div.well

Premium Sevice

You can use this template as your blog or portfolio

Learn even more »

Well Large

div.well.well-lg

Premium Sevice

You can use this template as your blog or portfolio

Learn even more »

Well Large

div.well.well-lg

Premium Sevice

You can use this template as your blog or portfolio

Learn even more »


Widgets Custom component

Heads up: Text inside bg-* may require the use of empahsis classes .text-* to style font colors.


.widget.padding-md.bg-light

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

.widget.widget-dashed

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

.widget.padding-md.bg-dark

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

.widget.padding-md.bg-secondary

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.


widget.padding-sm.bg-primary

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

.widget.padding-md.bg-warning

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

.widget.padding-lg.bg-danger

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

.widget.padding-lg.bg-success

Designing Products

communication is imperative.

Doing product design in a huge organization is tricky.

Modals

Reference: Bootstrap Modals

Launch Fancy Modal

A rendered modal with header, body, and set of actions in the footer.

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Tooltips

Reference: Bootstap tooltips

Hover over these buttons

Popovers

Reference: Bootstap popovers

Press these buttons

Collapse (accordion) with panel groups

Reference: Bootstrap Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Toggle Indicators

Note: Toggle indicators are independent from the collapse (accordion) component, thus can be applied to any link anywhere on any page. Just remember to add the following data attributes and include the corresponding javascript.

Example:

<a class="btn btn-primary" href="#link" data-state="closed" data-text-open="Self Destroy" data-text-close="I'm kidding">
  <span class="toggle-indicator"></span> Yo!
</a>

Result:

Yo!

Pricing Tables

Custom Component

div.plan>(div.plan-header>h3)+(div.plan-description>p)+(div.plan-price>h1)+(ul.plan-features>li)+(div.plan-cta)


.plan

Starter Pack

Get a helping hand with our products in the members only premium area

$12 /month

  • Unlimited Support
  • Basic Options
  • 100GB Storage
  • Ad Free Streaming

Unlimited ad-free streaming, unlimited viewers


Get it now! »
.plan

Starter Pack

Get a helping hand with our products in the members only premium area

$24 /month

  • Unlimited Support
  • Basic Options
  • 100GB Storage
  • Ad Free Streaming

Unlimited ad-free streaming, unlimited viewers


Get it now! »
.plan.plan-featured

Embed Wrappers For iframes, videos, maps.

Control height via modifier classes

section.embed-wrapper.embed-sm

section.embed-wrapper.embed-md

section.embed-wrapper.embed-lg