Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
All HTML headings, <h1> through <h6>, are available.
.h1 through
.h6 classes are also available, for when you want to match the font styling of a
heading but still want your text to be
displayed inline.
Create lighter, secondary text in any heading with a generic
<small> tag or the .small class.
Sketchucation's global default
font-size is 16px, with a line-height of 1.6. This
is applied to the
<body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom
margin of half their
computed line-height (10px by default).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aspernatur, perferendis facere placeat distinctio nam repellendus eos voluptates similique a incidunt quo hic obcaecati ipsum vitae error cupiditate harum in molestias cum quasi excepturi, voluptatibus esse. Veniam beatae veritatis distinctio vero illum, repellendus nihil, iure provident! Consectetur libero, voluptatem blanditiis, ab dolor totam architecto eum nesciunt optio itaque, doloremque non.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aspernatur, perferendis facere placeat distinctio nam repellendus eos voluptates similique a incidunt quo hic obcaecati ipsum vitae error cupiditate harum in molestias cum quasi excepturi, voluptatibus esse. Veniam beatae veritatis distinctio vero illum, repellendus nihil, iure provident! Consectetur libero, voluptatem blanditiis, ab dolor totam architecto eum nesciunt optio itaque, doloremque non.
Make a paragraph stand out by adding
.lead.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo aspernatur, perferendis facere placeat distinctio nam repellendus eos voluptates similique a incidunt quo hic obcaecati ipsum vitae error cupiditate harum in molestias cum quasi excepturi, voluptatibus esse. Veniam beatae veritatis distinctio vero illum, repellendus nihil, iure provident! Consectetur libero, voluptatem blanditiis, ab dolor totam architecto eum nesciunt optio itaque, doloremque non.
For highlighting a run of text due to its relevance in another context, use the
<mark> tag.
You can use the mark tag to highlight text.
For indicating blocks of text that have been deleted use the
<del> tag.
This line of text is meant to be treated as deleted text.
For indicating blocks of text that are no longer relevant use the <s> tag.
This line of text is meant to be treated as no longer accurate.
For indicating additions to the document use the
<ins> tag.
This line of text is meant to be treated as an addition to the document.
To underline text use the
<u> tag.
This line of text will render as underlined
For de-emphasizing inline or blocks of text, use the
<small> tag to set text at 85% the size of the parent. Heading elements receive their own
font-size for
nested <small> elements.
You may alternatively use an inline element with
.small in place of any <small>.
This line of text is meant to be treated as fine print.
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Transform text in components with text capitalization classes.
Lowercased text.
Uppercased text.
Capitalized text.
Stylized implementation of HTML's
<abbr> 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 and to
users of assistive technologies.
An abbreviation of the word attribute is attr.
Add .initialism to an abbreviation for a slightly smaller font-size.
HTML is the best thing since sliced bread.
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending
all lines with
<br>.
For quoting blocks of content from another source within your document.
Wrap <blockquote> around any
HTML
as the quote. For straight quotes, we recommend a
<p>.
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 a <footer> for identifying the source. Wrap the name of the source work in
<cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Add .blockquote-reverse for a blockquote with right-aligned content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
A list of items in which the order does not explicitly matter.
A list of items in which the order does not explicitly matter.
Remove the default list-style and left margin on list items (immediate children only).
This only applies to immediate children list items, meaning you will need to add the class for
any nested lists as
well.
Place all list items on a single line with
display: inline-block; and some light padding.
A list of terms with their associated descriptions.
Wrap inline snippets of code with
<code>.
<section> should be wrapped as inline.Use the <kbd> to indicate input that is typically entered via keyboard.
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper
rendering.
<p>Sample text here...</p>
For indicating variables use the
<var> tag.
For indicating blocks sample output from a program use the
<samp> tag.
For basic styling—light padding and only horizontal dividers—add the base class .table to any
<table>.
It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date
pickers, we've opted to
isolate our custom table styles.
| # | Application | Usage | Extensions |
|---|---|---|---|
| 1 | SketchUp | 3D | Yes |
| 2 | LayOut | 2D | Yes |
| 3 | StyleBuilder | 3D | No |
For basic styling—light padding and only horizontal dividers—add the base class .table to any
<table>.
It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date
pickers, we've opted to
isolate our custom table styles.
| # | Application | Usage | Extensions |
|---|---|---|---|
| 1 | SketchUp | 3D | Yes |
| 2 | LayOut | 2D | Yes |
| 3 | StyleBuilder | 3D | No |
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | Application | Usage | Extensions |
|---|---|---|---|
| 1 | SketchUp | 3D | Yes |
| 2 | LayOut | 2D | Yes |
| 3 | StyleBuilder | 3D | No |
Add .table-hover to enable a hover state on table rows within a <tbody>.
| # | Application | Usage | Extensions |
|---|---|---|---|
| 1 | SketchUp | 3D | Yes |
| 2 | LayOut | 2D | Yes |
| 3 | StyleBuilder | 3D | No |
Add .table-condensed to make tables more compact by cutting cell padding in half.
| # | Application | Usage | Extensions |
|---|---|---|---|
| 1 | SketchUp | 3D | Yes |
| 2 | LayOut | 2D | Yes |
| 3 | StyleBuilder | 3D | No |
Use contextual classes to color table rows or individual cells.
| Class | Description |
|---|---|
.active
|
Applies the hover color to a particular row or cell |
.success
|
Indicates a successful or positive action |
.info
|
Indicates a neutral informative change or action |
.warning
|
Indicates a warning that might need attention |
.danger
|
Indicates a dangerous or potentially negative action |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
Create responsive tables by wrapping any
.table in .table-responsive to make them scroll horizontally on small devices (under
768px). When viewing on
anything larger than 768px wide, you will not see any difference in these tables.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Individual form controls automatically receive some global styling. All textual
<input>, <textarea>, and <select> elements with
.form-control are
set to width: 100%; by default. Wrap labels and controls in .form-group for optimum
spacing.
Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned
and inline-block
controls.
This only applies to forms within viewports that are at least 768px wide.
May require custom widths
Inputs and selects have
width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to
width: auto; so multiple
controls can reside on the same line. Depending on your layout, additional custom widths may be required.
Always add labels
Screen readers will have trouble with
your forms if you
don't include a label for every input. For these inline forms, you can hide the labels using the
.sr-only class. There are
further alternative methods of providing a label for assistive technologies, such as the aria-label,
aria-labelledby or title attribute. If none of these is present, screen readers may resort
to using the
placeholder attribute, if present, but note that use of placeholder as a replacement for
other labelling
methods is not advised
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding
.form-horizontal to the form (which doesn't have to be a <form>). Doing so changes
.form-groups to behave as grid rows, so no need for .row.
Examples 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.
Type declaration required
Inputs will only be
fully styled if their
type is properly declared.
Input groups
To add integrated text or buttons before
and/or after any
text-based <input>, check out the input group component.
Form control which supports multiple lines of text. Change rows attribute as necessary.
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent
<label>,
you'll need to add the .disabled class to the parent .radio, .radio-inline,
.checkbox, or .checkbox-inline.
Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for
controls that appear
on the same line.
Should you have no text within the
<label>, the input is positioned as you'd expect.
Currently only works on non-inline checkboxes and radios.
Remember to still provide some form of label for assistive technologies (for instance, using
aria-label).
Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via
border-radius properties.
For <select> controls with the multiple attribute, multiple options are shown by
default.
When you need to place plain text next to a form label within a form, use the
.form-control-static class on a <p>.
We remove the default outline styles on some form controls and apply a box-shadow in its
place for
:focus.
Demo :focus state
The above example input uses custom
styles in our
documentation to demonstrate the :focus state on a .form-control.
Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear
lighter and add a
not-allowed cursor.
Add the disabled attribute to a <fieldset> to disable all the controls within the
<fieldset> at once.
Caveat about link functionality of
<a>
By default, browsers will treat all native form controls
(<input>, <select> and
<button> elements) inside a <fieldset disabled> as disabled, preventing both
keyboard and mouse
interactions on them. However, if your form also includes
<a ... class="btn btn-*">
elements, these will only be given a style of
pointer-events: none. As noted in the section about
disabled state for buttons
(and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully
supported in Opera
18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate
these links. So to be
safe, use custom JavaScript to disable such links.
Cross-browser compatibility
While Bootstrap will
apply these styles in
all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a
<fieldset>.
Use custom JavaScript to disable the fieldset in these browsers.
Add the disabled attribute to a <fieldset> to disable all the controls within the
<fieldset> at once.
Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only
inputs appear
lighter (just like disabled inputs), but retain the standard cursor.
Block level help text for form controls.
Associating help text with form controls
Help text should
be explicitly
associated with the form control it relates to using the aria-describedby attribute. This will ensure
that assistive
technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add
.has-warning,
.has-error, or .has-success to the parent element. Any .control-label,
.form-control, and .help-block within that element will receive the validation styles.
You can also add optional feedback icons with the addition of .has-feedback and the right icon.
Feedback icons only work with textual
<input class="form-control">
elements.
Icons, labels, and input groups
Manual positioning of
feedback icons is
required for inputs without a label and for
input groups
with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons.
If you wish to
prevent labels from being displayed, hide them with the
.sr-only class. If you must do without labels, adjust the top value of the feedback icon.
For input groups,
adjust the right value to an appropriate pixel value depending on the width of your addon.
Conveying the icon's meaning to assistive
technologies
To ensure that
assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text
should be included
with the .sr-only class and explicitly associated with the form control it relates to using
aria-describedby.
Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry
field) is conveyed in
some other form, such as changing the text of the actual <label> associated with the form
control.
Although the
following examples already mention the validation state of their respective form controls in the
<label> text itself,
the above technique (using .sr-only text and aria-describedby) has been included for
illustrative purposes.
Set heights using classes like
.input-lg, and set widths using grid column classes like .col-lg-*.
Create taller or shorter form controls that match button sizes.
Quickly size labels and form controls within
.form-horizontal by adding .form-group-lg or .form-group-sm.
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
Use the button classes on an <a>, <button>, or <input>
element.
Context-specific usage
While button classes can be used
on
<a> and <button> elements, only <button> elements are
supported within our nav
and navbar components.
Links acting as buttons
If the <a>
elements are used to
act as buttons – triggering in-page functionality, rather than navigating to another document or section within the
current page – they
should also be given an appropriate role="button".
Cross-browser rendering
As a best practice,
we highly recommend using the <button> element whenever possible
to ensure matching cross-browser rendering.
Among other things, there's
a bug in Firefox <30
that prevents us from setting the
line-height of <input>-based buttons, causing them to not exactly match the height
of other buttons on
Firefox.
Use any of the available button classes to quickly create a styled button.
Fancy larger or smaller buttons? Add
.btn-lg, .btn-sm, or .btn-xs for additional sizes.
Create block level buttons—those that span the full width of a parent— by adding
.btn-block.
Use any of the available button classes to quickly create a styled outlined button.
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For
<button> elements, this is done via :active. For <a> elements,
it's done with
.active. However, you may use .active on <button>s (and include the
aria-pressed="true" attribute) should you need to replicate the active state programmatically.
No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead
and add
.active.
Add the .active class to <a> buttons.
Make buttons look unclickable by fading them back with
opacity.
Add the disabled attribute to <button> buttons.
Link functionality caveat
This class uses
pointer-events: none to try to disable the link functionality of <a>s, but that CSS
property is not yet
standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in
browsers that do support
pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and
users of assistive
technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.
Images in Bootstrap 3 can be made responsive-friendly via the addition of the
.img-responsive class. This applies max-width: 100%;, height: auto; and
display: block; to the image so that it scales nicely to the parent element.
To center images which use the
.img-responsive class, use .center-block instead of .text-center.
See the helper classes section
for more details about
.center-block usage.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG
images with
.img-responsive are disproportionately sized. To fix this, add width: 100% \9; where
necessary. Bootstrap
doesn't apply this automatically as it causes complications to other image formats.
Add classes to an <img> element to easily style images in any project.
Cross-browser compatibility
Keep in mind that Internet Explorer 8 lacks
support for rounded
corners.
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Text muted will be coloured grey and links will also inherit styling on hover.
Text muted will be coloured blue and links will also inherit styling on hover.
Text muted will be coloured green and links will also inherit styling on hover.
Text muted will be coloured purple and links will also inherit styling on hover.
Text muted will be coloured orange and links will also inherit styling on hover
Text muted will be coloured red and links will also inherit styling on hover.
Dealing with specificity
Sometimes emphasis classes cannot
be applied due to
the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a
<span> with the
class.
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
.bg-primary will be coloured blue and links will also inherit
styling on hover
.bg-success will be coloured green and links will also inherit
styling on hover
.bg-info will be coloured purple and links will also inherit
styling on hover
.bg-warning will be coloured orange and links will also inherit
styling on hover
.bg-danger will be coloured red and links will also inherit
styling on hover
Dealing with specificity
Sometimes contextual background
classes cannot be
applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's
content in a
<div> with the class.
Use the generic close icon for dismissing content like modals and alerts.
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
Float an element to the left or right with a class.
!important is included to avoid specificity issues. Classes can also be used as mixins.
.pull-left
.pull-right
Not for use in navbars
To align components in navbars with utility classes, use
.navbar-left or .navbar-right instead.
See the navbar docs
for details.
Set an element to display: block and center via margin. Available as a mixin and class.
.center-block
Not for use in navbars
To align components in navbars with utility classes, use
.navbar-left or .navbar-right instead.
See the navbar docs
for details.
Easily clear floats by adding
.clearfix
to the parent element.
<div class="clearfix">...</div>
Force an element to be shown or hidden (including for screen readers) with the use of
.show and
.hidden classes. These classes use !important to avoid specificity conflicts, just like
the
quick floats. They are only available for block level toggling. They can also
be used as mixins.
.hide is available, but it does not always affect screen readers and is deprecated as
of v3.0.1. Use
.hidden or .sr-only instead.
Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its
display is not
modified and the element can still affect the flow of the document.
<div class="show">...</div>
<div class="hidden">...</div>