Online Styleguide

Typography

Font Family

Visual impact takes many forms and in this case, it’s our type fonts. This is another way we build consistency and awareness for our brand, letter by letter. Heavy, bold, light, italic, book style – all the fonts are here in one place.

Primary Font

Mr Eaves XL Modern is a clean, modern, simple sans serif typeface that is highly readable and is therefore the preferred font for Digital River communications.

Mr. Eaves XL Modern

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890/?!@#$%&

Mr Eaves XL Modern – The quick brown fox jumps over the lazy dog.

Secondary Font

For other applications such as presentations, word processing and web-based communications, use Arial.

Headings

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

Visual Hierarchy

To ensure visual hierarchy, use .h1 through .h6 classes to adjust the size of headings when needed.

<h6 class="h1"> h6 Heading <small>with h1 class</small></h6>

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Secondary Text in Headings

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

h1 Heading Secondary text

h2 Heading Secondary text

h3 Heading Secondary text

<h1>h1 Heading <small>Secondary text</small></h1>
<h2>h2 Heading <small>Secondary text</small></h2>
<h3>h3 Heading <small>Secondary text</small></h3>

Body copy

This is a sample paragraph. mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

<p>This is a sample paragraph. mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>

Text Transform

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Colors

Brand Colors

Color is one of the primary ways we set our brand apart. This palette gives us our personality, character and style. We want to own these particular colors for all our communication materials. There’s a range of colors that can be used online or in print to create different expressions of our brand.

Naming Conventions

Color names use camelCasing. Main colors in a color set do not have a prefixed adjective. Variations of main colors are prefixed with an adjective (ie. light and dark). Remembering this will make things easier when using contextual color classes.

Primary Colors

Blue *-blue
Light Blue *-lightBlue
Alt Blue *-altBlue

Neutral Colors

The neutral palette may be used for backgrounds, text, etc. They may not be used as leading colors.

Gray *-gray
Alt Gray *-altGray
Light Gray *-lightGray

Accent Colors

The accent colors are limited to use only as highlight colors within applications and key elements for text, such as on a web page. Do not use large areas of accent colors on communications.

DR Purple *-purple
DR Violet *-violet
DR Green *-green

Contextual classes

Text Colors

Color text in components with branded and common text colors. Text color classes are prefixed with .txt- followed by the color of your choice. Use color text on white, gray or blue backgrounds.

Blue text.

Gray text.

Light Blue text.

<p class="txt-blue">Blue text.</p>
<p class="txt-gray">Gray text.</p>
<p class="txt-lightBlue">Light Blue text.</p>

Background Colors

Color background in components with branded and common background colors. Background color classes are prefixed with .bg- followed by the color of your choice. When possible, use the default text color that the background class provides.

Blue background.

Example paragraph text

Light blue background.

Example paragraph text

Alt blue background.

Example paragraph text

Light gray background.

Example paragraph text

White background.

Example paragraph text

<div class="bg-blue">
  <h1>Blue background.</h1>
  <p>Example paragraph text</p>
</div>
<div class="bg-lightBlue">
  <h1>Light blue background.</h1>
  <p>Example paragraph text</p>
</div>
<div class="bg-altBlue">
  <h1>Alt blue background.</h1>
  <p>Example paragraph text</p>
</div>
<div class="bg-lightGray">
  <h1>Light gray background.</h1>
  <p>Example paragraph text</p>
</div>
<div class="bg-white">
  <h1>White background.</h1>
  <p>Example paragraph text</p>
</div>
Tables

Basic example

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.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Bordered table

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Hover rows

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

Class Description
.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
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table> 

Conveying meaning to assistive technologies

Using color to add meaning to a table row or individual cell 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 visible text in the relevant table row/cell), or is included through alternative means, such as additional text hidden with the .sr-only class.

Responsive tables

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.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we don't provide in Bootstrap:

For more information, read this Stack Overflow answer.

# 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
# 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
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="table-responsive">
  <table class="table table-bordered">
  <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>
Forms

Basic example

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.

Format: example@yourdomain.com

Minimum 10 Characters

Accepted formats: JPG, PNG, SVG

<form id="validation" style="max-width:400px;">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <i class="icon-help" data-toggle="tooltip" title="Your email is used as the username for your account."></i>
    <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="off" > 
    <span class="form-control-feedback" aria-hidden="true"></span>
    <p class="help-block format-block">Format: example@yourdomain.com</p>
    <p class="help-block error-block has-error" style="display:none;">Error message here</p>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" autocomplete="off" >
    <span class="form-control-feedback" aria-hidden="true"></span>
    <p class="help-block">Minimum 10 Characters</p>
    <p class="help-block error-block" style="display:none;"></p>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Product File</label>
    <i class="icon-help" data-toggle="tooltip" title="The product file will download when purchasing your product."></i>
    <div>
      <input type="file" id="exampleInputFile" class="inputfile">
      <label for="exampleInputFile" class="btn btn-opposite"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path  fill="#003058" d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg> <span>Choose a file...</span></label>
    </div>
    <p class="help-block">Accepted formats: JPG, PNG, SVG</p>
    <p class="help-block error-block" style="display:none;"></p>
  </div>
  <div class="form-group">
    <div class="checkbox-wrapper">
      <input id="formExampleCheckbox" class="checkbox" type="checkbox" />
      <label for="formExampleCheckbox" class="checkmark">Check me out</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline form

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.

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.

$
.00
<form class="form-inline marg-b-xxs-2">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input placeholder="10" size="8" type="text" class="form-control text-right" id="exampleInputAmount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

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

Type declaration required

Inputs will only be fully styled if their type is properly declared.

<form>
  <div class="form-group">
    <input type="text" class="form-control" value="Value">
  </div>
  <div class="form-group">
    <label>Disabled</label>
    <input type="text" class="form-control" value="Disabled Value" disabled="">
  </div>
  <div class="form-group">
    <label>Read Only</label>
    <input type="text" class="form-control" value="Read Only Value" readonly="">
  </div>
</form>

Input groups

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Textarea

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

<form>
  <div class="form-group">              
    <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
  </div>
  <div class="form-group">
    <label>Disabled</label>               
    <textarea class="form-control" rows="3" placeholder="Textarea" disabled=""></textarea>
  </div>
</form>

Checkboxes & Radio Buttons

Custom checkboxes radio buttons can be achieved by simply adding the class .inputcheckbox and .inputradio, respectfully to the appropriate input type.

Checkboxes
Radios
Disabled Radios
<form class="marg-b-xxs-2">
  <h5>Checkboxes</h5>
  <div class="form-group">
    <div class="checkbox-wrapper">
      <input class="checkbox" id="checkbox1" type="checkbox" checked>
      <label class="checkmark" for="checkbox1">Upgrade Offers</label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox-wrapper">
      <input class="checkbox" id="checkbox2" type="checkbox" />
      <label class="checkmark" for="checkbox2">Exclusive Deals</label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox-wrapper">
      <input class="checkbox" id="checkbox3" type="checkbox" disabled>
      <label class="checkmark" for="checkbox3">Disabled Checkbox</label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox-wrapper">
      <input class="checkbox" id="checkbox4" type="checkbox" disabled checked>
      <label class="checkmark" for="checkbox4">Disabled Checkbox Checked</label>
    </div>
  </div>
  <h5 class="marg-t-xxs-2">Radios</h5>
  <div class="form-group">
    <div class="radio-wrapper">
      <input class="radio" id="radio1" value="upgrade" type="radio" name="sendMe2" checked>
      <label class="checkmark" for="radio1">Upgrade Offers</label>
    </div>
    <div class="radio-wrapper">
      <input class="radio" id="radio2" value="exclusive" type="radio" name="sendMe2">
      <label class="checkmark" for="radio2">Exclusive Deals</label>
    </div>
  </div>
  <h5 class="marg-t-xxs-2">Disabled Radios</h5>
  <div class="form-group">
    <div class="radio-wrapper">
      <input class="radio" id="radio3" value="upgrade" type="radio" name="sendMe3" checked disabled>
      <label class="checkmark" for="radio3">Upgrade Offers</label>
    </div>
    <div class="radio-wrapper">
      <input class="radio" id="radio4" value="exclusive" type="radio" name="sendMe3" disabled>
      <label class="checkmark" for="radio4">Exclusive Deals</label>
    </div>
  </div>
</form>

Inline checkboxes and radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

<form>
  <div class="checkbox-wrapper checkbox-inline">
    <input id="inlineCheckbox1" class="checkbox" value="1" type="checkbox" value="1" name="inlineCheckbox[]" />
    <label for="inlineCheckbox1" class="checkmark">1</label> 
  </div>
  <div class="checkbox-wrapper checkbox-inline">
    <input id="inlineCheckbox2" class="checkbox" value="2" type="checkbox" value="2" name="inlineCheckbox[]" />
    <label for="inlineCheckbox2" class="checkmark">2</label>
  </div>
  <div class="checkbox-wrapper checkbox-inline">
    <input id="inlineCheckbox3" class="checkbox" value="3" type="checkbox" value="3" name="inlineCheckbox[]" />
    <label for="inlineCheckbox3" class="checkmark">3</label>
  </div>
</form>
<form>
  <div class="radio-wrapper radio-inline">
    <input class="radio" type="radio" name="inlineRadio" id="inlineRadio1" checked>
    <label class="checkmark" for="inlineRadio1">1</label>
  </div>
  <div class="radio-wrapper radio-inline">
    <input class="radio" type="radio" name="inlineRadio" id="inlineRadio2">
    <label class="checkmark" for="inlineRadio2">2</label>
  </div>
  <div class="radio-wrapper radio-inline">
    <input class="radio" type="radio" name="inlineRadio" id="inlineRadio3">
    <label class="checkmark" for="inlineRadio3">3</label>
  </div>
</form>

Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

<form>
  <div class="form-group">
    <select class="form-control" >
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label>Disabled</label>
    <select class="form-control" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

Mutliple Select

For <select> controls with the multiple attribute, multiple options are shown by default.

<form>
  <div class="form-group">          
    <select multiple="multiple" class="form-control" >
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label>Disabled</label>           
    <select multiple="multiple" class="form-control" disabled>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

Static control

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password" autocomplete="off" >
    </div>
  </div>
</form>

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<form>
  <div class="row">
    <div class="col-xs-2">
      <input type="text" class="form-control" placeholder=".col-xs-2" >
    </div>
    <div class="col-xs-3">
      <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
      <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
  </div>
</form>

Toggle Inputs

These toggle input buttons allow you to toggle between the active and inactive states.

Inactive
Active
Disabled
Disabled Active
<h5>Inactive</h5>
<label role="switch" class="switch">
  <input type="checkbox" class="inputdemo">
  <div class="slider round"></div>   
</label>
<h5>Active</h5>
<label role="switch" class="switch">
  <input type="checkbox" checked class="inputdemo">
  <div class="slider round"></div>
</label>
<h5>Disabled</h5>
<label role="switch" class="switch">
  <input type="checkbox" class="inputdemo" disabled>
  <div class="slider round"></div>   
</label>
<h5>Disabled Active</h5>
<label role="switch" class="switch">
  <input type="checkbox" class="inputdemo" checked disabled>
  <div class="slider round"></div>   
</label>

Sliders

Sliders are a great way to promote user activity and to show progress. The examples shown are using jQuery UI. Notice between the 2 sliders below, there are multiple options that can be configured.

<div class="marg-b-xxs-9">
  <div id="slider1" class="ui-slider-pips ui-slider-float"></div>
</div>
<div class="marg-b-xxs-9">
  <div id="slider2" class="ui-slider-pips ui-slider-float"></div>
</div>

Help Text

Help Text is block level text that provides context for form controls.

Example help text that breaks onto a new line and may extend beyond one line.
<form>
  <div class="form-group">
    <label class="sr-only" for="inputHelpBlock">Input with help text</label>
    <input id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
    <span class="help-block" id="helpBlock">Example help text that breaks onto a new line and may extend beyond one line.</span>
  </div>
</form>

Validation States

Validation styles include errors, warnings, 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.

A block of help text that breaks onto a new line and may extend beyond one line.
<form> 
  <div class="form-group has-success has-feedback"> 
    <label class="control-label" for="inputSuccess1">Input with success</label> 
    <input class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
    <span class="form-control-feedback success-sign" aria-hidden="true"></span>
    <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 
  </div> 
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">Input with error</label> 
    <input class="form-control" id="inputError1"> 
    <span class="form-control-feedback error-sign" aria-hidden="true"></span>
  </div> 
</form>

File Upload

Input types of "file" can be styled by simply adding the class .inputfile to the input.

label placement matters

The markup must match the example below. The input[type="file"].inputfile must be immediately before the label tag.

Single File
Multiple Files
<h5>Single File</h5>
<form class="marg-b-xxs-2">
  <input type="file" id="exampleSingleInputFile" class="inputfile">
  <label for="exampleSingleInputFile" class="btn btn-opposite"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path fill="#003058" d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg> <span>Choose a file...</span></label>
</form>
<h5>Multiple Files</h5>
<form>
  <input type="file" id="exampleMultiInputFile" class="inputfile" data-multiple-caption="{count} files selected" multiple>
  <label for="exampleMultiInputFile" class="btn btn-opposite"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path fill="#003058" d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg> <span>Choose multiple files...</span></label>
</form>
Buttons

Button tags

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

Link
<button class="btn btn-primary" >Button</button>
<a href="javascript:void(0)" style="padding:30px;">Link</a>
<input class="btn btn-primary" type="submit" value="Submit">

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.

Options

Use any of the available button classes to quickly create a styled button.

Primary Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-opposite">Opposite</button>

Disabled Primary Buttons

<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-opposite" disabled>Opposite</button>

Button Sizes

Buttons can have different sizes other than the standard size in order for visual hierarchy purposes.

<p><button type="button" class="btn btn-primary btn-xs">Extra Small Size Button</button></p>
<p><button type="button" class="btn btn-primary btn-sm">Small Size Button</button></p>
<p><button type="button" class="btn btn-primary">Standard Size Button</button></p>
<p><button type="button" class="btn btn-primary btn-lg">Large Size Button</button></p>

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

<div class="center-block" style="max-width:400px">
  <button type="button" class="btn btn-primary btn-block">Block level button</button>
  <button type="button" class="btn btn-secondary btn-block">Block level button</button>
</div>
Tooltips
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li><a href="javascript:void(0)">Home</a></li>
    <li><a href="javascript:void(0)">Category</a></li>
    <li class="active">Sub-Category</li>
  </ol>
</nav>
Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Inbox 42

<p><a href="javascript:void(0)">Inbox <span class="badge">42</span></a></p>
<p><button class="btn btn-primary" type="button"> Messages <span class="badge">4</span></button></p>
Panels

Panels are a great component when you need to enclose content in a box.

Basic Example

In it's most basic form, all the .panel class does is add a border and padding around it's content.

Basic panel example
<div class="panel panel-default">
  <div class="panel-body"> Basic panel example </div>
</div>

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

Panel content
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body"> Panel content </div>
</div>

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
<div class="panel panel-default">
  <div class="panel-body"> Panel content </div>
  <div class="panel-footer">Panel footer</div>
</div>

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Collapsible Panels

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="panel panel-default">
  <div class="panel-heading">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
      <h5 class="panel-title">Product Information</h5>
      <span class="caret"></span>
    </a>
  </div>
  <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
              <label for="exampleInputEmail1">Product Name</label>
              <i class="icon-help" data-toggle="tooltip" title="Product name will display in the storefront and cart"></i>
              <input class="form-control" autocomplete="off" type="email" value="Product Title #1"> 
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
              <label for="exampleInputEmail1">Product Category</label>
              <i class="icon-help" data-toggle="tooltip" title="Product category will place your product under its corresponding category"></i>
              <select name="category" class="form-control">
                <option value="category 1">Category 1</option>
                <option value="category 2">Category 2</option>
                <option value="category 3">Category 3</option>
              </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-heading">
    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
      <h5 class="panel-title">Pricing</h5>
      <span class="caret"></span>
    </a>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</p>
    </div>
  </div>
  <div class="panel-heading">
    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
      <h5 class="panel-title">Delivery</h5>
      <span class="caret"></span>
    </a>
  </div>
  <div id="collapse3" class="panel-collapse collapse">
    <div class="panel-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</p>
    </div>
  </div>
</div>
Components

Tabs

Via data attributes:

data-toggle="tab"

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Profile

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Option 1

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Option 2

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<ul class="nav nav-tabs" id="myTabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
  <li role="presentation" class=""><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">Profile</a></li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
      <li class=""><a href="#option1" role="tab" id="option1-tab" data-toggle="tab" aria-controls="option1" aria-expanded="false">Option 1</a></li>
      <li class=""><a href="#option2" role="tab" id="option2-tab" data-toggle="tab" aria-controls="option2" aria-expanded="false">Option 2</a></li>
    </ul>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active in" role="tabpanel" id="home" aria-labelledby="home-tab">
    <h4>Home</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="tab-pane fade" role="tabpanel" id="profile" aria-labelledby="profile-tab">
    <h4>Profile</h4>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="tab-pane fade" role="tabpanel" id="option1" aria-labelledby="option1-tab">
    <h4>Option 1</h4>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="tab-pane fade" role="tabpanel" id="option2" aria-labelledby="option2-tab">
    <h4>Option 2</h4>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

Via Javascript::

$(this).tab('show')

Events

show.bs.tab shown.bs.tab

Content #3: What is 1-1?

Content #4: Rugby Poll!!

<ul id="myTabs" class="nav nav-tabs">
  <li class="active">
    <a href="#tab-pane-three">Tab 3</a>
  </li>
  <li>
    <a href="#tab-pane-four">Tab 4</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="tab-pane-three">
    <p>Content #3: What is 1-1?</p>
  </div>
  <div class="tab-pane fade" id="tab-pane-four">
    <p>Content #4: Rugby Poll!!</p>
  </div>
</div>
$("#myTabs a").click(function(e) {
                e.preventDefault();
                $(this).tab("show");
              });

Alerts

<div class="alert alert-success" role="alert">
  <strong>Success!</strong> This alert box indicates a successful or positive action.
</div>
<div class="alert alert-info" role="alert">
  <strong>Info!</strong> This alert box indicates a neutral informative change or action.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> This alert box indicates a warning that might need attention.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Danger!</strong> This alert box indicates a dangerous or potentially negative action.
</div>

Dismissible alerts

<div class="alert alert-success alert-dismissible" role="alert">
  <strong>Success!</strong> This alert box indicates a successful or positive action.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
  <strong>Info!</strong> This alert box indicates a neutral informative change or action.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
  <strong>Warning!</strong> This alert box indicates a warning that might need attention.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
  <strong>Danger!</strong> This alert box indicates a dangerous or potentially negative action.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Pagination

<ul class="pagination">
  <li><a href="javascript:void(0)">&laquo;</a></li>
  <li><a href="javascript:void(0)">li a</a></li>
  <li class="active"><a href="javascript:void(0)">li.active a</a></li>
  <li class="disabled"><a href="javascript:void(0)">li.disabled a</a></li>
  <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>

Active

<ul class="pagination pagination-lg">
  <li><a href="javascript:void(0)">&laquo;</a></li>
  <li><a href="javascript:void(0)">1</a></li>
  <li class="active"><a href="javascript:void(0)">2</a></li>
  <li><a href="javascript:void(0)">3</a></li>
  <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>

Sizing



<ul class="pagination pagination-lg">
  <li><a href="javascript:void(0)">&laquo;</a></li>
  <li><a href="javascript:void(0)">1</a></li>
  <li class="active"><a href="javascript:void(0)">2</a></li>
  <li><a href="javascript:void(0)">3</a></li>
  <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>
<br>
<ul class="pagination pagination">
  <li><a href="javascript:void(0)">&laquo;</a></li>
  <li><a href="javascript:void(0)">1</a></li>
  <li class="active"><a href="javascript:void(0)">2</a></li>
  <li><a href="javascript:void(0)">3</a></li>
  <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>
<br>
<ul class="pagination pagination-sm">
  <li><a href="javascript:void(0)">&laquo;</a></li>
  <li><a href="javascript:void(0)">1</a></li>
  <li class="active"><a href="javascript:void(0)">2</a></li>
  <li><a href="javascript:void(0)">3</a></li>
  <li><a href="javascript:void(0)">&raquo;</a></li>
</ul>

Pager

<ul class="pager">
  <li><a href="javascript:void(0)">Previous</a></li>
  <li><a href="javascript:void(0)">Next</a></li>
</ul>

Alignment

<ul class="pager">
  <li class="previous"><a href="javascript:void(0)">Older</a></li>
  <li class="next"><a href="javascript:void(0)">Newer</a></li>
</ul>

Input Groups

Input with Button

<div class="form-group">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div>
</div>
<div class="form-group">
  <div class="input-group">
    <span class="input-group-btn">
      <button class="btn btn-primary" type="button">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="Search for...">
  </div>
</div>

Input with dropdowns

<div class="form-group">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <input type="text" class="form-control" aria-label="...">
  </div>
</div>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default">Action</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <input class="form-control" aria-label="Text input with segmented button dropdown">
  </div>
</div>

Input with Checkbox

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">
      <div class="checkbox-wrapper">
        <input type="checkbox" name="inlineCheckbox" id="checkboxAddOn">
        <label for="checkboxAddOn" class="checkmark"></label>
      </div>
    </span>
    <input class="form-control" type="text" placeholder="input.form-control">
  </div>
</div>

Input with Radio

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon">
      <div class="radio-wrapper">
        <input type="radio" name="inlineRadio" id="radioAddOn">
        <label for="radioAddOn" class="checkmark"></label>
      </div>
    </span>
    <input class="form-control" type="text" placeholder="input.form-control">
  </div>
</div>

Button Groups

Single button dropdowns

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split button dropdowns

<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Loader

<div class="loader"></div>

Progress Bar

60% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

With Label

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Contextual alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animated

45% Complete
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>
<button type="button" class="btn btn-default"  data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Date Picker

<div id="datepicker"></div>
$("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                showAnim: ""
              });
©2024 Digital River, Inc., Digital River® is a registered trademark of Digital River, Inc.