Deprecated!

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

Form elements

Fundamental HTML5 form elements enhanced with extensible classes.

Forms

Default styles

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.

Legend Example block-level help text here. 
  <form>
    <fieldset>
      <legend>Legend</legend>
      <label>Label name</label>
      <input type="text" placeholder="Type something…">
      <span class="help-block">Example block-level help text here.</span>
      <label class="checkbox">
        <input type="checkbox"> Check me out
      </label>
      <button type="submit" class="btn">Submit</button>
    </fieldset>
  </form>

Layout Options

Included with NICE.Bootstrap are three optional form layouts for common use cases.

Search form

Add .form-search to the form for a special search icon button.

  <form class="form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>
  </form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

  <form class="form-inline">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
    <label class="checkbox">
      <input type="checkbox"> Remember me
    </label>
    <button type="submit" class="btn">Sign in</button>
  </form>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment
  <form class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="inputEmail">Email</label>
      <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="inputPassword">Password</label>
      <div class="controls">
        <input type="password" id="inputPassword" placeholder="Password">
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <label class="checkbox">
          <input type="checkbox"> Remember me
        </label>
        <button type="submit" class="btn">Sign in</button>
      </div>
    </div>
  </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.

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

Use the default option or specify a multiple="multiple" to show multiple options at once.


  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>

  <select multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>

Extending 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 one of two classes to prepend or append text to an input.

@

.00 
  <div class="input-prepend">
    <span class="add-on">@</span>
    <input class="span2" id="prependedInput" type="text" placeholder="Username">
  </div>
  <div class="input-append">
    <input class="span2" id="appendedInput" type="text">
    <span class="add-on">.00</span>
  </div>

Combined

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

$ .00 
  <div class="input-prepend input-append">
    <span class="add-on">$</span>
    <input class="span2" id="appendedPrependedInput" type="text">
    <span class="add-on">.00</span>
  </div>

Buttons instead of text

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

  <div class="input-append">
    <input class="span2" id="appendedInputButton" type="text">
    <button class="btn" type="button">Go!</button>
  </div>  
  <div class="input-append">
    <input class="span2" id="appendedInputButtons" type="text">
    <button class="btn" type="button">Search</button>
    <button class="btn" type="button">Options</button>
  </div>

Button dropdowns

  <div class="input-append">
    <input class="span2" id="appendedDropdownButton" type="text">
    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
  </div>  
  <div class="input-prepend">
    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    <input class="span2" id="prependedDropdownButton" type="text">
  </div>  
  <div class="input-prepend input-append">
    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
    <input class="span2" id="appendedPrependedDropdownButton" type="text">
    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        Action
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        ...
      </ul>
    </div>
  </div>

Segmented dropdown groups

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

Search form

  <form class="form-search">
    <div class="input-append">
      <input type="text" class="span2 search-query">
      <button type="submit" class="btn">Search</button>
    </div>
    <div class="input-prepend">
      <button type="submit" class="btn">Search</button>
      <input type="text" class="span2 search-query">
    </div>
  </form>

Control sizing

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

Block level inputs

Make any <input> or <textarea> element behave like a block level element.

  <input class="input-block-level" type="text" placeholder=".input-block-level">

Relative sizing

  <input class="input-mini" type="text" placeholder=".input-mini">
  <input class="input-small" type="text" placeholder=".input-small">
  <input class="input-medium" type="text" placeholder=".input-medium">
  <input class="input-large" type="text" placeholder=".input-large">
  <input class="input-xlarge" type="text" placeholder=".input-xlarge">
  <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

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

Uneditable inputs

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

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

Form actions

End a form with a group of actions (buttons). When placed within a .form-actions, the buttons will automatically indent to line up with the form controls.

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

Help text

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

Inline help

Inline help text 
  <input type="text"><span class="help-inline">Inline help text</span>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line. 
  <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 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 class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.

  <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 class="input-xlarge" id="disabledInput" 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.

Something may have gone wrong
Please correct the error
Username is taken
Woohoo! 
  <div class="control-group warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <div class="controls">
      <input type="text" id="inputWarning">
      <span class="help-inline">Something may have gone wrong</span>
    </div>
  </div>

  <div class="control-group error">
    <label class="control-label" for="inputError">Input with error</label>
    <div class="controls">
      <input type="text" id="inputError">
      <span class="help-inline">Please correct the error</span>
    </div>
  </div>

  <div class="control-group info">
    <label class="control-label" for="inputInfo">Input with info</label>
    <div class="controls">
      <input type="text" id="inputInfo">
      <span class="help-inline">Username is already taken</span>
    </div>
  </div>

  <div class="control-group success">
    <label class="control-label" for="inputSuccess">Input with success</label>
    <div class="controls">
      <input type="text" id="inputSuccess">
      <span class="help-inline">Woohoo!</span>
    </div>
  </div>

Buttons

Default buttons

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

Button class="" Description
btn Standard gray button with gradient
btn diabled or [disabled="disabled"] displays the button in a disabled state, beware JavaScript events may still function
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-off Similar to disabled except it still has the mouse pointer enabled
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

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.

Button sizes

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

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

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

  <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
  <button class="btn btn-large btn-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.

Primary link Link 

  <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  <a href="#" class="btn btn-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="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  <button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

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

Link 
  <a class="btn" href="">Link</a>
  <button class="btn" type="submit">Button</button>
  <input class="btn" type="button" value="Input">
  <input class="btn" 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.

Buttons bootstrap-button.js

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Single toggle

Add data-toggle="button" to activate toggling on a single button.

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

    <div class="btn-group" data-toggle="buttons-checkbox">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>

Usage

Enable buttons via JavaScript:

$('.nav-tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Heads up! You can enable auto toggling of a button by using the data-toggle attribute. 
<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text. 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
    <script>
      $('.btn').button('complete')
    </script>

Button groups

Examples

Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group.

    <div class="btn-group">
      <button class="btn">Left</button>
      <button class="btn">Middle</button>
      <button class="btn">Right</button>
    </div>

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

    <div class="btn-toolbar">
      <div class="btn-group">
        ...
      </div>
    </div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

    <div class="btn-group btn-group-vertical">
      ...
    </div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the JavaScript docs for that.

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

Button dropdown menus

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

Works with all button sizes

Button dropdowns work at any size: .btn-xl, .btn-large, .btn-small, or .btn-mini.

Requires JavaScript

Button dropdowns require the Bootstrap dropdown plugin to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

    <div class="btn-group">
      <button class="btn">Action</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

Sizes

Utilize the extra button classes .btn-mini, .btn-small, .btn-large, or .btn-xl for sizing.

    <div class="btn-group">
      <button class="btn btn-mini">Action</button>
      <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

    <div class="btn-group dropup">
      <button class="btn">Dropup</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>

Typeahead bootstrap-typeahead.js

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

<input type="text" data-provide="typeahead">

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Name type default description
source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
items number 8 The max number of items to display in the dropdown.
minLength number 1 The minimum character length needed before triggering autocomplete suggestions
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive		 Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Methods

.typeahead(options)

Initializes an input with a typeahead.

Advanced form components

A collection of advanced JavaScript plugins that provide application like capabilites for forms such as File Input, Submit Confirmations, hypermedia interactivity, HTML5 validation, and more.

List of components

This part of the guide will walk through these components individually in more detail.