All HTML headings,
<h6>, are available.
.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.
Bootstrap's global default font-size is 14px, with a line-height of 1.428. 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).
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. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
No wrap text.
A list of items in which the order does not explicitly matter.
Individual form controls automatically receive some global styling. All textual
.form-control are set to
width: 100%; by default. Wrap labels and controls in
.form-group for optimum spacing.
Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding
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
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
.disabled class to the parent
.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).
This dropdown uses the formstone dropdown library. Found here.
There is a z-index issue where the dropdowns appear through each other when opened. To fix that add a style tag with the z-index starting at 100 then decrease each consecutive select by 1.
When you need to place plain text next to a form label within a form, use the
.form-control-static class on a
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
.container for a responsive fixed width container.
.container-fluid for a full width container, spanning the entire width of your viewport.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|Extra small devices Phones (<768px)||Small devices Tablets (≥768px)||Medium devices Desktops (≥992px)||Large devices Desktops (≥1200px)|
|Grid behavior||Horizontal at all times||Collapsed to start, horizontal above breakpoints|
|Container width||None (auto)||750px||970px||1170px|
|# of columns||12|
|Gutter width||30px (15px on each side of a column)|
Using a single set of
.col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices
and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any
Shows all sizes based on screen resizing. Note on mobile the first row has no padding due to the content so they will stay on the one line.
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and the bootstrap responsive utility classes.
Easily change the order of our built-in grid columns with
.col-md-pull-* modifier classes.
Images in Bootstrap 3 can be made responsive-friendly via the addition of the
.img-responsive class. This applies
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
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.
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.
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.
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies - such as screen readers.
Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that
is already present in the text/markup), or is included through alternative means, such as additional text hidden with the
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.
Use the generic close icon for dismissing content like modals and alerts.
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.
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.
Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use
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
.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.
Hide an element to all devices except screen readers with
.sr-only-focusable to show the element again when
it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
.text-hide class or mixin to help replace an element's text content with a background image.