Deprecated!

NICE.Bootstrap is deprecated and all new front-end work should use the Design System

Basic elements

Fundamental HTML5 elements enhanced with extensible classes.

Typographic elements

Headings

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>

Create lighter, secondary text in any heading with a generic <small> tag.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
  <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
  <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
  <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
  <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
  <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
  <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body copy

NICE's global default font-size is 16px, with a line-height of 24px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of their line-height to ensure vertical rhythm is adhered to.

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.

  <p>...</p>

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Paragraphs directly following a heading

Paragraphs that follow <h1> through <h6> elements will pull up to reduce whitespace between them and the headings.

h1. Heading 1

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h2. Heading 2

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.

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

Emphasis

Make use of HTML5's default emphasis tags.

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

  <p>
    <small>This line of text is meant to be treated as fine print.</small>
  </p>

<strong>

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

  <strong>rendered as bold text</strong>

<em>

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

  <em>rendered as italicized text</em>

Feel free to also use <b> and <i>

In HTML5 <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Advanced emphasis

NICE.Bootstrap adds some additional classes that can be applied to the basic HTML5 elements to add even more emphasis in certain circumstances

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

  <p class="text-left">Left aligned text.</p>
  <p class="text-center">Center aligned text.</p>
  <p class="text-right">Right aligned text.</p>

Emphasis classes

Convey meaning through colour using these additional utility classes which can be used to highlight warnings, errors, critical or useful information as well as positive re-enforcement.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
  <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
  <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Abbreviations

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.

<abbr>

For expanded text on long hover of an abbreviation, include the title attribute.

An abbreviation of the word attribute is attr.

  <abbr title="attribute">attr</abbr>

Acronyms

Add .initialism to an abbreviation for a slightly smaller font-size that accomodates acronyms.

HTML is the best thing since sliced bread.

  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

Present contact information for the nearest ancestor or the entire body of work.

<address>

Preserve formatting by ending all lines with <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com 
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>

Quotations

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>.

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

  <blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </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>.

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

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

Right pulled quotations

Although bootstrap provides an alternate display by adding .pull-right to blockquotes NICE does not use this style.

Lists

Unordered

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Aenean sit amet erat nunc
  <ul>
    <li>...</li>
  </ul>

Alternate unordered

Change the default list-style on list items (immediate children only).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Aenean sit amet erat nunc
  <ul class="alt">
    <li>...</li>
  </ul>

Ordered

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Phasellus iaculis neque
  4. Vestibulum laoreet porttitor sem
  5. Aenean sit amet erat nunc
  <ol>
    <li>...</li>
  </ol>

Alternate Ordered

Change the default list-style on list items where the order does matter (immediate children only).

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Phasellus iaculis neque
  4. Vestibulum laoreet porttitor sem
  5. Aenean sit amet erat nunc
  <ol class="alt">
    <li>...</li>
  </ol>

Unstyled

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Aenean sit amet erat nunc
  <ul class="unstyled">
    <li>...</li>
  </ul>

Inline

Place all list items on a single line with inline-block and some light padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  <ul class="inline">
    <li>...</li>
  </ul>

Definitions and descriptions

A list of terms with their associated definitions or descriptions.

Definition lists
A definition 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.
  <dl>
    <dt>...</dt>
    <dd>...</dd>
  </dl>

Options

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

Definition lists
A definition 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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  <dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
  </dl>

Auto-truncating

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.

Typographic components

Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

    <div class="hero-unit">
      <h1>Heading</h1>
      <p>Tagline</p>
      <p>
        <a class="btn btn-primary btn-large">
          Learn more
        </a>
      </p>
    </div>

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

Example page header Subtext for header

    <div class="page-header">
      <h1>Example page header <small>Subtext for header</small></h1>
    </div>

Labels and badges

Labels

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Badges

Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

Alerts Styles for success, warning, and error messages

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Warning! Best check yo self, you're not looking too good. 
    <div class="alert">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

<a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

<button type="button" class="close" data-dismiss="alert">&times;</button>

Dismiss alerts via JavaScript

Use the alerts jQuery plugin for quick and easy dismissal of alerts.

Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    <div class="alert alert-block">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>Warning!</h4>
      Best check yo self, you're not...
    </div>

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

Oh snap! Change a few things up and try submitting again. 
    <div class="alert alert-error">
      ...
    </div>

Success

Well done! You successfully read this important alert message. 
    <div class="alert alert-success">
      ...
    </div>

Information

Heads up! This alert needs your attention, but it's not super important. 
    <div class="alert alert-info">
      ...
    </div>

Alert messages bootstrap-alert.js

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Holy guacamole! Best check yo self, you're not looking too good.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

Event Description
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed (will wait for css transitions to complete). 
    $('#my-alert').bind('closed', function () {
      // do something…
    })

Progress bars For loading, redirecting, or action status

Examples and markup

Basic

Default progress bar with a vertical gradient.

    <div class="progress">
      <div class="bar" style="width: 60%;"></div>
    </div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

    <div class="progress progress-striped">
      <div class="bar" style="width: 20%;"></div>
    </div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    <div class="progress progress-striped active">
      <div class="bar" style="width: 40%;"></div>
    </div>

Stacked

Place multiple bars into the same .progress to stack them.

    <div class="progress">
      <div class="bar bar-success" style="width: 35%;"></div>
      <div class="bar bar-warning" style="width: 20%;"></div>
      <div class="bar bar-danger" style="width: 10%;"></div>
    </div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

    <div class="progress progress-info">
      <div class="bar" style="width: 20%"></div>
    </div>
    <div class="progress progress-success">
      <div class="bar" style="width: 40%"></div>
    </div>
    <div class="progress progress-warning">
      <div class="bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-danger">
      <div class="bar" style="width: 80%"></div>
    </div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

    <div class="progress progress-info progress-striped">
      <div class="bar" style="width: 20%"></div>
    </div>
    <div class="progress progress-success progress-striped">
      <div class="bar" style="width: 40%"></div>
    </div>
    <div class="progress progress-warning progress-striped">
      <div class="bar" style="width: 60%"></div>
    </div>
    <div class="progress progress-danger progress-striped">
      <div class="bar" style="width: 80%"></div>
    </div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Tables

Basic Table

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Larry the Bird @twitter 
  <table class="table">
    ...
  </table>

Options

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

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).

# First Name Last Name Username
1 Mark Otto @mdo
2 Larry the Bird @twitter 
  <table class="table table-striped">
    ...
  </table>

.table-bordered

Add borders and rounded corners to the table.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Larry the Bird @twitter 
  <table class="table table-bordered">
    ...
  </table>

.table-hover

Enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Larry the Bird @twitter 
  <table class="table table-hover">
    ...
  </table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Larry the Bird @twitter 
  <table class="table table-condensed">
    ...
  </table>

Optional row classes

Use contextual classes to color table rows.

Class Description
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.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 
  ...
    <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.

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
<caption> Description or summary of what the table holds, especially useful for screen readers 
  <table>
    <caption>...</caption>
    <thead>
      <tr>
        <th>...</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>

Do you really need a table?

When choosing the best way to correctly markup your content you need to look at the purpose of the information conveyed by it. better ways to mark up your information could be lists which can represent either hierarchies or terms and definitions in a much more effective way than a table can.