Header borders

You can add borders under any header by adding the .bordered class.

Example body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat diam vitae enim semper ac cursus nunc consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mattis facilisis eleifend. Nulla fringilla, neque ac egestas condimentum, massa sapien molestie magna, facilisis suscipit ipsum risus ut ligula. Mauris faucibus elit quis mauris egestas commodo consectetur turpis facilisis.

Preventing wrapping

Use the .nowrap utility class when you want to keep content grouped together on one line regardless of screen size or available width.

Adjust the screen size and watch the example below. The icon will stay grouped together with the text instead of being broken across multiple lines.

A lot of bad things might happen. Things are swell. Rut roh Shaggy. Now you've done it.

Using emphasis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat diam vitae enim semper ac cursus nunc consequat.

Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example addresses

Here are two examples of how the <address> tag can be used:

Scripps Networks Interactive
9721 Sherrill Blvd
Knoxville TN 37932
P: (123) 456-7890

Full Name
first.last@gmail.com

Example abbreviations

Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.

HTML is the best thing since sliced bread.

An abbreviation of the word attribute is attr.

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.

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

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="pullRight":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

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>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Description

<dl>

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

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>

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

Google Prettify

Take the same <pre> element and add two optional classes for enhanced rendering.

  <p>Sample text here...</p>

<pre class="prettyprint linenums">
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Download google-code-prettify and view the readme for how to use.

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

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

Tables are automatically styled headers and padding.

<table class="table">
  ...
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Add alternating rows by adding the .table-alternatingRow class to the <table>. Note that this is not supported on IE8 due to lack of CSS selector support.

<table class="table table-alternatingRow">
  ...
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Add borders around the entire table and rounded corners for aesthetic purposes.

<table class="table table-border">
  ...
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Add borders between columns with the .table-columnBorder class.

<table class="table table-columnBorder">
   ...
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Add borders between rows with the .table-rowBorder class.

<table class="table table-rowBorder">
  ...
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

<table class="table table-alternatingRow table-border table-columnBorder table-rowBorder">
  ...
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

All of the standard controls included in Bootstrap are displayed.

Text

Stacked check boxes Option 1 Option 2 Option 3

Inline check boxes Option 1 Option 2 Option 3

Stacked radio controls Option 1 Option 2 Option 3

Inline radio controls Option 1 Option 2 Option 3

Drop down Option 1 Option 2 Option 3

Multi-select Option 1 Option 2 Option 3 Option 4 Option 5 Option 6

File

Textarea

Secondary

Additional markup is used to group controls, provide inline feedback and show validation styles for errors, warnings and success.

You can indicate a required field by just adding the .required class to the label.

Text

Drop down One Two Three

<form class="form">
  <div class="form-group">
    <label class="required">Text</label>
    <input class="input-large" type="text" />
  </div>
  <div class="form-group">
    <label>Drop down</label>
    <select class="input-medium">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </div>
  <div class="form-actions">
    <input class="button button-primary" type="submit" value="Submit" />
  </div>
</form>     

Control states

Bootstrap features styles for browser-supported disabled states and adds classes for creating read-only inputs.

Read only input Some value here

Disabled input

Disabled checkbox Option 1

Disabled select Option 1 Option 1 Option 1

Readonly textarea

Control sizes

Inputs can be sized by using a set of pre-built classes like .input-mini, .input-medium and .input-xlarge.

Mini

Small

Medium

Large

1X

Validation

Bootstrap also includes validation styles for errors, warnings and success. To use, add the .error class to the surrounding .form-group.

Input with warning This is the warning that the user should be aware of.

Checkbox with warning Option A Option B Option C

Input with error This is the error that the user should fix.

Input with success

Select with success Option 1 Option 2 Option 3

You can display form groups horizontally by adding the .inline class.

TODO: Need to formalize the sizes for controls, taking into account this use case.

First name

Last name

Email address

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Primary button Button

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

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

Link Button

<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 you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

• icon12-closedRow
• icon12-expandedRow
• icon12-seekNext
• icon12-seekPrevious
• icon12-pause
• icon12-stop
• icon12-t
• icon12-t (disabled)
• icon12-pot
• icon12-pot (disabled)
• icon12-yield
• icon12-yield (disabled)

• icon12-next
• icon12-last
• icon12-first
• icon12-previous
• icon12-sortDown
• icon12-sortUp
• icon12-indexCard
• icon12-indexCard (disabled)
• icon12-tree-collapse
• icon12-tree-expand
• icon12-calendar-next
• icon12-calendar-back

• icon12-close
• icon12-plus
• icon12-plus2
• icon12-minus
• icon12-question
• icon12-info
• icon12-audio
• icon12-measuringCup
• icon12-measuringCup (disabled)
• icon12-facet-collapse
• icon12-facet-expand

• icon16-newWindow
• icon16-expand
• icon16-restore
• icon16-close
• icon16-filter
• icon16-zoomFill
• icon16-zoomOut
• icon16-zoomIn
• icon16-magnify
• icon16-magnifySmall
• icon16-view
• icon16-view2
• icon16-search
• icon16-home
• icon16-homeWhite
• icon16-calendarMonth
• icon16-calendarDay
• icon16-edit
• icon16-trash
• icon16-trash (disabled)
• icon16-print
• icon16-download
• icon16-check
• icon16-check (disabled)
• icon16-square
• icon16-squareFilled
• icon16-square-checked
• icon16-deliverableIncomplete
• icon16-deliverableComplete
• icon16-deliverableRejected
• icon16-deliverableReview
• icon16-deliverableUploaded
• icon16-deliverableNeedApproval
• icon16-deliverableError
• icon16-undo
• icon16-processing
• icon16-pending
• icon16-folder
• icon16-rejectOne
• icon16-videoAdd
• icon16-videosApprove
• icon16-videosDelete

• icon16-arrow4DiagOut
• icon16-arrow4DiagIn
• icon16-arrowNESW
• icon16-arrowEW
• icon16-arrow4
• icon16-arrowStopW
• icon16-arrowStopE
• icon16-resizeEW
• icon16-gripDiagSE
• icon16-cartAdd
• icon16-cartRemove
• icon16-commentAdd
• icon16-commentRemove
• icon16-contactAdd
• icon16-contactRemove
• icon16-tabAdd
• icon16-tabRemove
• icon16-pageAdd
• icon16-pageRemove
• icon16-userAdd
• icon16-userRemove
• icon16-userRemove (disabled)
• icon16-approve
• icon16-approve (disabled)
• icon16-scheduled
• icon16-reconcile
• icon16-comment
• icon16-new
• icon16-pin
• icon16-pin (disabled)
• icon16-mark
• icon16-mark (disabled)
• icon16-comment
• icon16-comment (disabled)
• icon16-server-down
• icon16-server-up
• icon16-acceptOne
• icon16-rejectAll
• icon16-videoRemove
• icon16-videosAdd

• icon16-gridLarge
• icon16-gripSmall
• icon16-tree
• icon16-list
• icon16-bullets
• icon16-layers
• icon16-hierarchy
• icon16-camera
• icon16-video
• icon16-picture
• icon16-email
• icon16-film
• icon16-filmFilled
• icon16-question
• icon16-info
• icon16-warning
• icon16-success
• icon16-error
• icon16-flag-orange
• icon16-flag-red
• icon16-flag-blue
• icon16-flag-green
• icon16-flag-purple
• icon16-showColLeft
• icon16-showColRight
• icon16-hideColLeft
• icon16-hideColRight
• icon16-msexcel
• icon16-flash
• icon16-msppoint
• icon16-msword
• icon16-txtdoc
• icon16-xml
• icon16-msvisio
• icon16-document
• icon16-ticket
• icon16-acceptAll
• icon16-videoApprove
• icon16-videoDelete
• icon16-videosRemove

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.

Icons are prefixed with .icon12- for 12x12 icons and .icon16- for 16x16 icons for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Initialization

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:

<i class="icon16-search"></i>

Disabled icons

For icons that support "disabled" appearances, simply add a .disabled class to the icon.

<i class="icon12-pot disabled"></i>

Inline icons

Often icons need to be displayed inline in a hyperlink. To create seperation between the icon and the hyperlink text, add the .inline class to the <i>.

Approve

Calendar

Collapse