Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Media queries

We use the following media queries to create the key breakpoints in our grid system.

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Example: Stacked-to-horizontal

Using a single set of .col-medium-* 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.

<div class="row">
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
  <div class="col-medium-1">.col-medium-1</div>
</div>
<div class="row">
  <div class="col-medium-8">.col-medium-8</div>
  <div class="col-medium-4">.col-medium-4</div>
</div>
<div class="row">
  <div class="col-medium-4">.col-medium-4</div>
  <div class="col-medium-4">.col-medium-4</div>
  <div class="col-medium-4">.col-medium-4</div>
</div>
<div class="row">
  <div class="col-medium-6">.col-medium-6</div>
  <div class="col-medium-6">.col-medium-6</div>
</div>

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-mini-* .col-medium-* to your columns. See the example below for a better idea of how it all works.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-mini-12 col-medium-8">.col-mini-12 col-medium-8</div>
  <div class="col-mini-6 col-medium-4">.col-mini-6 .col-medium-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-mini-6 col-medium-4">.col-mini-6 .col-medium-4</div>
  <div class="col-mini-6 col-medium-4">.col-mini-6 .col-medium-4</div>
  <div class="col-mini-6 col-medium-4">.col-mini-6 .col-medium-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-mini-6">.col-mini-6</div>
  <div class="col-mini-6">.col-mini-6</div>
</div>

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-small-* classes.

<div class="row">
  <div class="col-mini-12 col-small-6 col-medium-8">.col-mini-12 .col-small-6 .col-medium-8</div>
  <div class="col-mini-6 col-small-6 col-medium-4">.col-mini-6 .col-small-6 .col-medium-4</div>
</div>
<div class="row">
  <div class="col-mini-6 col-small-4 col-medium-4">.col-mini-6 .col-small-4 .col-medium-4</div>
  <div class="col-mini-6 col-small-4 col-medium-4">.col-mini-6 .col-small-4 .col-medium-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-mini-6 col-small-4 col-medium-4">.col-mini-6 .col-small-4 .col-medium-4</div>
</div>

Responsive column resets

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 our responsive utility classes.

<div class="row">
  <div class="col-mini-6 col-small-3">.col-mini-6 .col-small-3</div>
  <div class="col-mini-6 col-small-3">.col-mini-6 .col-small-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-mini-6 col-small-3">.col-mini-6 .col-small-3</div>
  <div class="col-mini-6 col-small-3">.col-mini-6 .col-small-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.

<div class="row">
  <div class="col-small-5 col-medium-6">.col-small-5 .col-medium-6</div>
  <div class="col-small-5 col-small-offset-2 col-medium-6 col-medium-offset-0">.col-small-5 .col-small-offset-2 .col-medium-6 .col-medium-offset-0</div>
</div>

<div class="row">
  <div class="col-small-6 col-medium-5 col-large-6">.col-small-6 .col-medium-5 .col-large-6</div>
  <div class="col-small-6 col-medium-5 col-medium-offset-2 col-large-6 col-large-offset-0">.col-small-6 .col-medium-5 .col-medium-offset-2 .col-large-6 .col-large-offset-0</div>
</div>

Offsetting columns

Move columns to the right using .col-medium-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-medium-offset-4 moves .col-medium-4 over four columns.

<div class="row">
  <div class="col-medium-4">.col-medium-4</div>
  <div class="col-medium-4 col-medium-offset-4">.col-medium-4 .col-medium-offset-4</div>
</div>
<div class="row">
  <div class="col-medium-3 col-medium-offset-3">.col-medium-3 .col-medium-offset-3</div>
  <div class="col-medium-3 col-medium-offset-3">.col-medium-3 .col-medium-offset-3</div>
</div>
<div class="row">
  <div class="col-medium-6 col-medium-offset-3">.col-medium-6 .col-medium-offset-3</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-medium-* columns within an existing .col-medium-* column. Nested rows should include a set of columns that add up to 12.

<div class="row">
  <div class="col-medium-9">
    Level 1: .col-medium-9
    <div class="row">
      <div class="col-medium-6">
        Level 2: .col-medium-6
      </div>
      <div class="col-medium-6">
        Level 2: .col-medium-6
      </div>
    </div>
  </div>
</div>

Column ordering

Easily change the order of our built-in grid columns with .col-medium-push-* and .col-medium-pull-* modifier classes.

<div class="row">
  <div class="col-medium-9 col-medium-push-3">.col-medium-9 .col-medium-push-3</div>
  <div class="col-medium-3 col-medium-pull-9">.col-medium-3 .col-medium-pull-9</div>
</div>

LESS mixins and variables

In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.

Variables

Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-small) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-small) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-small) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-small) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-small) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-medium) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-medium) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-medium) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-medium) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-large) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-large) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-large) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-large) {
    right: percentage((@columns / @grid-columns));
  }
}

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Test cases

Resize your browser or load on different devices to test the responsive utility classes.

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

Hidden on...

Here, green checkmarks indicate the element is hidden in your current viewport.

Colors

Typography

Headings

All HTML headings, <h1> through <h5> are available.

<h1>...</h1>
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>

Body copy

The global default font-size is 13px, with a line-height of 22px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 15px by default.

<p>...</p>

Lead Body copy

Make a paragraph stand out by adding .lead.

<p class="lead">...</p>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

<address>
  <strong>H1 Studios</strong><br>
  116 Bedford Ave., 4R<br>
  Brooklyn, NY 11249<br>
  <abbr title="Phone">P:</abbr> (904) 728-5230
</address>

<address>
  <strong>John Ashenden</strong><br>
  <a href="mailto:#">first.lastname@example.com</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

<blockquote class="pull-right">
  ...
</blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

<ol>
  <li>...</li>
</ol>

Unstyled

Remove the default list-style and left padding on list items (immediate children only).

<ol>
  <li>...</li>
</ol>

Description

A list of terms with their associated descriptions.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal Description

Make terms and descriptions in <dl> line up side-by-side.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Vertical Margins

Alternatively, you may apply classes to individual typographic tags to adjust the amount of relative margin beneath each element. This is useful when creating vertical flow. The following classes are available for all headings <h1> through <h5> and paragraphs <p> tags.

Code

Inline

Wrap inline snippets of code with <code>.

For example, <code><section></code> should be wrapped as inline.

Basic block

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>

<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Heads up! Be sure to keep code within <pre> 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.

Tables

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
  …
</table>

Optional classes

Add any of the following classes to the .table base class.

Striped Table

Use .table-striped to add zebra-striping to any table row within the via the :nth-child CSS selector (not available in IE7-IE8).

<table class="table table-striped">
  …
</table>

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered">
  …
</table>

Hover Rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

<table class="table table-hover">
  …
</table>

Condensed Table

Add .table-condensed to make tables more compact by cutting cell padding in half.

<table class="table table-condensed">
  …
</table>

Contextual Table Classes

Use contextual classes to color table rows or individual cells.

...
  <tr class="success">
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Buttons

Button Styles

Button styles can be applied to anything with the .button class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Link Button Styles

You can de-emphasize a button by making it look like a link while maintaining button behavior by adding the class .button-link to the button.

<button type="button" class="button button-default button-link">Default</button>
<button type="button" class="button button-primary button-link">Primary</button>
<button type="button" class="button button-success button-link">Success</button>
<button type="button" class="button button-warning button-link">Warning</button>
<button type="button" class="button button-danger button-link">Danger</button>

Inverse Button Styles

Similar to text and tables, buttons offer an inverted state. Apply the class .inverse to the button to take advantage of the inverse state styling.

<button type="button" class="button button-default inverse">Default</button>
<button type="button" class="button button-primary inverse">Primary</button>
<button type="button" class="button button-success inverse">Success</button>
<button type="button" class="button button-warning inverse">Warning</button>
<button type="button" class="button button-danger inverse">Danger</button>

Button sizes

Fancy larger or smaller buttons? Add .button-large, .button-small, or .button-mini for additional sizes.

<p>
  <button class="button button-large button-primary" type="button">Large button</button>
  <button class="button button-large" type="button">Large button</button>
</p>
<p>
  <button class="button button-primary" type="button">Default button</button>
  <button class="button" type="button">Default button</button>
</p>
<p>
  <button class="button button-small button-primary" type="button">Small button</button>
  <button class="button button-small" type="button">Small button</button>
</p>
<p>
  <button class="button button-mini button-primary" type="button">Mini button</button>
  <button class="button button-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .button-block.

<button class="button button-large button-block button-primary" type="button">Block level button</button>
<button class="button button-large button-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

<a href="#" class="button button-large button-primary disabled">Primary link</a>
<a href="#" class="button button-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="button button-large button-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="button button-large" disabled>Button</button>

Using multiple tags

Use the .button class on an <a>, <button>, or <input> element.

<a class="button" href="">Link</a>
<button class="button" type="submit">Button</button>
<input class="button" type="button" value="Input">
<input class="button" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Forms

Default Form Styling

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

<form>
  <fieldset>
    <legend>Legend</legend>
    <div class="form-group">
      <label for="exampleInputEmail">Email address</label>
      <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </div>
    <button type="submit" class="button button-default">Submit</button>
  </fieldset>
</form>

Supported form controls

Examples of standard form controls supported in an example form layout.

Inputs

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.

<input type="text" placeholder="Text input">

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

<textarea rows="3"></textarea>

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

<label class="checkbox">
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

Inline checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Selects

Wrap select boxes in <div class="select-wrapper"></div> to take advantage of styling.

<div class="select-wrapper">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Extending Form Controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Prepended and appended inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Default options

Wrap an .add-on and an input with the class .input-group to prepend or append text to an input. Add the class .add-on-prepend or .add-on-append to prepend and append the add-on respectively. You will need to manually define the input padding to prevent the add-on from covering user input.

<div class="input-group">
  <input type="text" placeholder="Username" style="padding-left: 60px;">
  <span class="add-on add-on-prepend">@</span>
</div>
<div class="input-group">
  <input type="text" style="padding-right: 65px;">
  <span class="add-on add-on-append">.00</span>
</div>

Combined

Use both classes and two instances of .add-on to prepend and append an input.

<div class="input-group">
  <input type="text" style="padding-left: 60px; padding-right: 65px;">
  <span class="add-on add-on-prepend">$</span>
  <span class="add-on add-on-append">.00</span>
</div>

Buttons instead of text

Instead of a <span> with text, use a .button to attach a button (or two) to an input.

<div class="input-append">
  <input type="text">
  <button class="button" type="button">Go!</button>
</div>

<div class="input-group">
  <input type="text">
  <div class="add-on-group add-on-prepend">
    <button class="button" type="button">Search</button>
    <button class="button" type="button">Options</button>
  </div>
</div>
<div class="input-group">
  <input type="text">
  <div class="add-on-group add-on-append">
    <button class="button" type="button">Search</button>
    <button class="button" type="button">Options</button>
  </div>
</div>

Button dropdowns

<div class="input-group">
  <input type="text">
  <div class="add-on-group add-on-prepend">
    <div class="button-group">
      <button class="button dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
  </div>
</div>

<div class="input-group">
  <input type="text">
  <div class="add-on-group add-on-append">
    <div class="button-group">
      <button class="button dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
  </div>
</div>

<div class="input-prepend input-append">
  <input type="text">
  <div class="add-on-group add-on-prepend">
    <div class="button-group">
      <button class="button dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
  </div>
  <div class="add-on-group add-on-append">
    <div class="button-group">
      <button class="button dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
  </div>
</div>

Segmented dropdown groups

<form>
  <input type="text">
  <div class="add-on-group add-on-prepend">
    <div class="button-group">...</div>
  </div>
  <div class="add-on-group add-on-append">
    <div class="button-group">...</div>
  </div>
</form>

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

<span class="uneditable-input">Some value here</span>

Form actions

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.

<div class="form-actions">
  <button type="submit" class="button button-primary">Save changes</button>
  <button type="button" class="button">Cancel</button>
</div>

Help text

Inline and block level support for help text that appears around form controls.

<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Control sizing

Use sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Input sizing

<input type="text">
<input class="input-large" type="text" placeholder=".input-large">

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

<input type="text" value="This is focused...">

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

<input class="span3" type="email" required>

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

<input type="text" placeholder="Disabled input here" disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

<div class="control-group success">
  <label class="control-label">Input with success</label>
  <div class="controls">
    <input type="text">
    <span class="help-block">Woohoo!</span>
  </div>
</div>
<div class="control-group warning">
  <label class="control-label">Input with warning</label>
  <div class="controls">
    <input type="text">
    <span class="help-block">Something may have gone wrong</span>
  </div>
</div>
<div class="control-group error">
  <label class="control-label">Input with error</label>
  <div class="controls">
    <input type="text">
    <span class="help-block">Please correct the error</span>
  </div>
</div>

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-large-*.

Height sizing

Create larger or smaller form controls that match button sizes.

<input class="form-control input-large" type="text" placeholder=".input-large">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-small" type="text" placeholder=".input-small">

<select class="form-control input-large">...</select>
<select class="form-control">...</select>
<select class="form-control input-small">...</select>

Images

Add classes to an <img> element to easily style images in any project.

<img src="..." class="image-rounded">
<img src="..." class="image-circle">
<img src="..." class="image-framed">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Image Groups

Group a series a images together using .image-group

<div class="image-group">
  <a href="#">
    <img src="..." class="image-framed">
  </a>
  ...
  <a href="#">
    <img src="..." class="image-framed">
  </a>
</div>

Image Links

Wrap a stylized image in an anchor tag and conditional styling will be applied.

<img src="..." class="img-responsive" alt="Responsive image">

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src="..." class="img-responsive" alt="Responsive image">

Icons

Icon sizes

Icons are available in a variety of industry-expected sizes. Furthermore, each set of icons is offered up at double the resolution for higher-resolution (retina) displays.

Icon glyphs

The most common icon size used is 16x16, denoted by the class .icon-16. There are a number of available glyphs for the 16x16 icon. The table below illustrates each of these glyphs.

Icon Styles

Icons are available in a variety of styles. By default, they appear as an opaque black as shown above. However, you can add additional classes to adjust the presentation of the icon glyph.