×
Import settings
Import settings
Export settings
Global Variables
Brand colors

Scaffolding

Links

Typography

The base font for the text

The base font for the headings


Components

Tables

Overall background-color

For striping

Table and cell border


Buttons
All buttons

Default Button

Primary Button

Success Button

Warning Button

Danger Button

Info Button

Link Button

Forms
CatName

Dropdowns

Component Variables
Z-index master list

Media queries breakpoints

Grid system

Number of columns in the grid system

Padding, to be divided by two and applied to the left and right of all columns

Point at which the navbar stops collapsing


Navbar
General

Default Navbar

Inverse Navbar

Navs

Tabs

Pills

Pagination

Pager

Jumbotron

Form states and alerts
Success

Info

Warning

Danger

Tooltips

Popovers

Labels

Modals

Alerts

Success

Info

Warning

Danger

Progress bars

List group

Panels

Default

Primary

Success

Warning

Danger

Info

Thumbnails

Wells

Badges

Breadcrumbs

Carousel

Close

Code

Type

Miscellaneous

Hr border color

Horizontal forms & lists


Container sizes
Small screen / tablet

Medium screen / desktop

Large screen / wide desktop

Get CSS Files
Export Import
Refresh Stylesheet

Bootstrap 3 elements page example template

A quick preview of everything Bootstrap has to offer.

Headings

Page Header With Small Text

This is an h1 heading

This is an h2 heading

This is an h3 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 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.

Muted color paragraph.

Warning color paragraph.

Danger color paragraph.

Info color paragraph.

Success color paragraph.

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



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

  • 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;}
Forms
Legend

Example block-level help text here.



Buttons

Images

Input Groups

.00

$ .00
Labels and Badges
DefaultSuccessWarningDangerInfo Inbox 42
Breadcrumbs
Alerts
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Heads up! This alert needs your attention, but it's not super important.

Warning!

This is a block style alert.

Progress Bars
Media Object
  • 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.

    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.
Jumbotron

Hello, world!

...

Learn more

Carousel
Modal
Misc

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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.
This is a header

This is a panel

This is a header

This is a panel

This is a header

This is a panel

This is a header

This is a panel

This is a header

This is a panel

This is a header

This is a panel

  • First Item
  • Second Item
  • Third Item
Default Well
Small Well
Large Padding Well