All HTML headings,
through
are available.
The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
Bootstrap’s global default font-size is 14px, with a line-height of 1.7em. This is applied to the and all paragraphs. In addition,
(paragraphs) receive a bottom margin of half their line-height (9px by default).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
…
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
…
Make use of HTML’s default emphasis tags with lightweight styles.
For emphasizing a snippet of text with stress
The following snippet of text is rendered as italicized text.
rendered as italicized text
For emphasizing a snippet of text with important
The following snippet of text is rendered as bold text.
rendered as bold text
For de-emphasizing inline or blocks of text, use the small tag.
This line of text is meant to be treated as fine print.
This line of text is meant to be treated as fine print.
Note: Feel free to use and in HTML5. is meant to highlight words or phrases without conveying additional importance while is mostly for voice, technical terms, etc.
Use the
tag with .success, .warning, .info or .error classes.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
…
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
…
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
…
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
…
Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
For expanded text on long hover of an abbreviation, include the title attribute.
An abbreviation of the word attribute is attr.
attr
Add .initialism to an abbreviation for a slightly smaller font-size.
HTML is the best thing since sliced bread.
attr
Present contact information for the nearest ancestor or the entire body of work.
Home Preserve formatting by ending all lines with
For quoting blocks of content from another source within your document.
Wrap
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Style and content changes for simple variations on a standard blockquote.
Add tag for identifying the source. Wrap the name of the source work in .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
Use .pull-right for a floated, right-aligned blockquote.
…
A list of items in which the order does not explicitly matter.
A list of items in which the order does explicitly matter.
A list of items with no list-style or additional left padding.
A list of terms with their associated descriptions.
Note:
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
Make terms and descriptions in
line up side-by-side.
Wrap inline snippets of code with .
For example,
Note: Be sure to keep code within
tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
Use
for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
Sample text here…
<p>Sample text here...</p>
To add colored syntax highlight to the
tag, then use the .prettyprint class or the .prettyprint linenums class.
For basic styling???light padding and only horizontal dividers???add the base class .table to any
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Add any of the follow classes to the .table base class.
.table-stripedAdds zebra-striping to any table row within the :nth-child CSS selector (not available in IE7-IE8).
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
.table-hoverEnable a hover state on table rows within a
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table-borderedAdd borders and rounded corners to the table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
.table-condensedMakes tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Use contextual classes to color table rows.
| Class | Description |
|---|---|
.success |
Indicates a successful or positive action. |
.error |
Indicates a dangerous or potentially negative action. |
.info |
Used as an alternative to the default styles. |
| # | Product | Payment Taken | Status |
|---|---|---|---|
| 1 | TB – Monthly | 01/04/2012 | Approved |
| 2 | TB – Monthly | 02/04/2012 | Declined |
| 3 | TB – Monthly | 03/04/2012 | Pending |
| 4 | TB – Monthly | 04/04/2012 | Call in to confirm |
...1TB - Monthly01/04/2012Approved ...
List of supported table HTML elements and how they should be used.
or ) that appears on a single row| Tag | Description | ||
|---|---|---|---|
|
Wrapping element for displaying data in a tabular format | ||
Container element for table header rows ( |
|||
|
Container element for table rows ( |
||
|
Container element for a set of table cells ( | ||
| Default table cell | |||
| Special table cell for column (or row, depending on scope and placement) labels Must be used within a |
|||
|
|||
| Description or summary of what the table holds, especially useful for screen readers |
| … | … |
|---|---|
| … | … |
Individual form controls receive styling, but without any required base class on the
or large changes in markup. Results in stacked, left-aligned labels on top of form controls.
Included with Bootstrap are three optional form layouts for common use cases.
Add .form-search to the form and .search-query to the for an extra-rounded text input.
Add .form-inline for left-aligned labels and inline-block controls for a compact layout.
Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
.form-horizontal to the form.control-group.control-label to the label.controls for proper alignmentExamples of standard form controls supported in an example form layout.
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Requires the use of a specified type at all times.
Form control which supports multiple lines of text. Change row attribute as necessary.
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
Add the .inline class to a series of checkboxes or radios for controls appear on the same line.
Use the default option or specify a multiple="multiple" to show multiple options at once.
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Add text or buttons before or after any text-based input. Do note that select elements are not supported here.
Wrap an .add-on and an input with one of two classes to prepend or append text to an input.
Use both classes and two instances of .add-on to prepend and append an input.
Instead of a with text, use a .btn to attach a button (or two) to an input.
End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.
Inline and block level support for help text that appears around form controls.
Inline help text
A longer block of help text that breaks onto a new line and may extend beyond one line.
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
Note: In future versions, we’ll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.
Present data in a form that’s not editable without using actual form markup.
Some value here
Provide feedback to users or visitors with basic feedback states on form controls and labels.
We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
Add the disabled attribute on an input to prevent user input and trigger a slightly different look.
Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.
Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome – http://fortawesome.github.com/Font-Awesome
Add .icon-CLASS_NAME to any element, best used with a .
icon-asterisk
icon-ban-circle
icon-beaker
icon-bell
icon-bolt
icon-book
icon-bookmark
icon-bookmark-empty
icon-briefcase
icon-bullhorn
icon-calendar
icon-camera
icon-camera-retro
icon-certificate
icon-check
icon-check-empty
icon-cloud
icon-cog
icon-cogs
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-credit-card
icon-dashboard
icon-download
icon-download-alt
icon-edit
icon-envelope
icon-envelope-alt
icon-external-link
icon-eye-close
icon-eye-open
icon-facetime-video
icon-film
icon-filter
icon-fire
icon-flag
icon-folder-close
icon-folder-open
icon-gift
icon-glass
icon-globe
icon-group
icon-hdd
icon-headphones
icon-heart
icon-heart-empty
icon-home
icon-inbox
icon-info-sign
icon-key
icon-leaf
icon-legal
icon-lemon
icon-lock
icon-unlock
icon-magic
icon-magnet
icon-map-marker
icon-minus
icon-minus-sign
icon-move
icon-music
icon-off
icon-ok
icon-ok-circle
icon-ok-sign
icon-pencil
icon-picture
icon-plane
icon-plus
icon-plus-sign
icon-print
icon-pushpin
icon-qrcode
icon-question-sign
icon-random
icon-refresh
icon-remove
icon-remove-circle
icon-remove-sign
icon-reorder
icon-resize-horizontal
icon-resize-vertical
icon-retweet
icon-road
icon-rss
icon-screenshot
icon-search
icon-share
icon-shopping-cart
icon-signin
icon-signout
icon-sitemap
icon-sort
icon-sort-down
icon-sort-up
icon-star
icon-star-empty
icon-star-half
icon-tag
icon-tasks
icon-thumbs-down
icon-thumbs-up
icon-time
icon-tint
icon-trash
icon-trophy
icon-truck
icon-umbrella
icon-upload
icon-upload-alt
icon-user
icon-user-md
icon-volume-off
icon-volume-down
icon-volume-up
icon-warning-sign
icon-wrench
icon-zoom-in
icon-zoom-out
icon-cut
icon-copy
icon-paste
icon-save
icon-undo
icon-repeat
icon-paper-clip
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-indent-left
icon-indent-right
icon-bold
icon-italic
icon-strikethrough
icon-underline
icon-link
icon-columns
icon-table
icon-th
icon-th-list
icon-list
icon-list-ol
icon-list-ul
icon-list-alt
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-chevron-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-chevron-left
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-right
icon-hand-left
icon-hand-right
icon-hand-up
icon-chevron-up
icon-play
icon-pause
icon-stop
icon-fast-backward
icon-backward
icon-forward
icon-step-forward
icon-eject
icon-resize-full
icon-resize-small
icon-phone-sign
icon-facebook
icon-facebook-sign
icon-twitter-sign
icon-github
icon-github-sign
icon-linkedin-sign
icon-pinterest
icon-pinterest-sign
icon-google-plus-sign
icon-sign-blank
... ...
The documented typography above is a modified version of the reference guide available at: http://twitter.github.com/bootstrap/base-css.html