×
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
Bootnerator

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?

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.
  • 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
  1. Home
  2. Library
  3. Data
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

Modal title

One fine body…

Misc

Popover top

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

Collapsible Group Item #1

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.

Collapsible Group Item #2

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.

Collapsible Group Item #3

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

This is a panel

This is a footer
This is a header

This is a panel

This is a footer
This is a header

This is a panel

This is a footer
This is a header

This is a panel

This is a footer
This is a header

This is a panel

  • First Item
  • Second Item
  • Third Item
This is a footer
Default Well
Small Well
Large Padding Well