Typography
Default grid system 12 columns with a responsive twist
The default grid system provided in Bootstrap utilizes 12 columns that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically.
As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.
Offsetting columns
Typography Headings, paragraphs, lists, and other inline type elements
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Blockquotes
| Element | Usage | Optional |
|---|---|---|
<blockquote> | Block-level element for quoting content from another source | Add .pull-left and .pull-right classes for floated options |
<small> | Optional element for adding a user-facing citation, typically an author with title of work | Place the <cite> around the title or name of source |
To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
Include an optional <small> element to cite your source and you'll get an em dash — before it for styling purposes.
Example blockquotes
Default blockquotes are styled as such:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
To float your blockquote to the right, add class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Lists
Unordered
<ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled
<ul class="unstyled">
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered
<ol>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
List with icons
<ul class="unstyled"> + icons
- Web design
- Responsive design
- Cross-everything
- Styleguide docs
- jQuery plugins
- Built for and by nerds
- 12-column grid
- Max-width 1200px
- Growing library
Tables For, you guessed it, tabular data
| Tag | Description |
|---|---|
<table> | Wrapping element for displaying data in a tabular format |
<thead> | Container element for table header rows (<tr>) to label table columns |
<tbody> | Container element for table rows (<tr>) in the body of the table |
<tr> | Container element for a set of table cells (<td> or <th>) that appears on a single row |
<td> | Default table cell |
<th> | Special table cell for column (or row, depending on scope and placement) labels Must be used within a <thead> |
<caption> | Description or summary of what the table holds, especially useful for screen readers |
Example tables
1. Default table styles
Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
2. Striped table
Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.
Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
3. Bordered table
Add borders around the entire table and rounded corners for aesthetic purposes.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
4. Condensed table
Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
5. Combine them all!
Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.
| Full name | |||
|---|---|---|---|
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Icons Graciously provided by Glyphicons
Built as a sprite
Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
How to use
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
There are also styles available for inverted (white) icons, made ready with one extra class:
There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Use cases
Icons are great, but where would one use them? Here are a few ideas:
- As visuals for your sidebar navigation
- For a purely icon-driven navigation
- For buttons to help convey the meaning of an action
- With links to share context on a user's destination
Essentially, anywhere you can put an <i> tag, you can put an icon.
Examples
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Alerts Styles for success, warning, and error messages
Error or danger
Success
Information
Warning
Inline labels Label and annotate text
| Labels | Markup |
|---|---|
| Default | <span class="label">Default</span> |
| Success | <span class="label label-success">Success</span> |
| Warning | <span class="label label-warning">Warning</span> |
| Important | <span class="label label-important">Important</span> |
| Info | <span class="label label-info">Info</span> |
| Inverse | <span class="label label-inverse">Inverse</span> |
Badges Indicators and unread counts
About
Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.
Available classes
| Name | Example | Markup |
|---|---|---|
| Default | 1 | <span class="badge">1</span> |
| Success | 2 | <span class="badge badge-success">2</span> |
| Warning | 4 | <span class="badge badge-warning">4</span> |
| Important | 6 | <span class="badge badge-important">6</span> |
| Info | 8 | <span class="badge badge-info">8</span> |
| Inverse | 10 | <span class="badge badge-inverse">10</span> |
Progress bars For loading, redirecting, or action status
Examples and markup
Basic
Default progress bar with a vertical gradient.
Striped
Uses a gradient to create a striped effect (no IE).
Animated
Takes the striped example and animates it (no IE).
Options and browser support
Additional colors
Progress bars use some of the same button and alert classes for consistent styles.
Striped bars
Similar to the solid colors, we have varied striped progress bars.
Behavior
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
Browser support
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
Opera and IE do not support animations at this time.
Tooltips
About Tooltips
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.
Example use of Tooltips
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.