Typography

Regional font families

Regional sites use the following font families. These are defined in the regional delta stylesheets.

ChinaArial and Lato
JapanArial and Lato
Korea'Nanum Gothic' for homepage, header and footer

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

All headings use Google's Nunito Sans font family.

  • H1 element

  • H2 element

  • H3 element

  • H4 element

  • H5 element
  • H6 element
<h1>h1 element</h1> or <p class="h1">h1. class</p>
<h2>h2 element</h2> or <p class="h2">h2. class</p>
<h3>h3 element</h3> or <p class="h3">h3. class</p>
<h4>h4 element</h4> or <p class="h4">h4. class</p>
<h5>h5 element</h5> or <p class="h5">h5. class</p>
<h6>h6 element</h6> or <p class="h6">h6. class</p>

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

h1. BaseCamp heading Secondary text


h2. BaseCamp heading Secondary text


h3. BaseCamp heading Secondary text


h4. BaseCamp heading Secondary text


h5. BaseCamp heading Secondary text

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

Body copy

BaseCamp's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 10px and a top margin of 5px.

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>

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

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

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

Large text

For enlarging inline or blocks of text, use the <large> tag to set text at 115% the size of the parent.

You may alternatively use an inline element with .large in place of any <large>.

This line of text is increased to 115% of parent element.

<p class="large">This line of text is increased to 115% of parent element.</p>

      <p><large>This line of text is increased to 115% of parent element.</large></p>

Bold

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>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alternate elements

Feel free to 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.

Alignment classes

Easily realign text to components with text alignment classes.

  • Left aligned text
  • Center aligned text
  • Right aligned text
  • Justified text will align to the right side, which is different than let aligned text which has aragged right display.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Lists

Unordered

A list of items with the default style list.

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
      • Lorem ipsum dolor sit amet
      • Consectetur adipiscing elit
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul>
  <li>...</li>
</ul>

Unordered with boxes class

A list of items with boxes as the list style.

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
      • Phasellus iaculis neque
      • Purus sodales ultricies
        • Lorem ipsum dolor sit amet
        • Consectetur adipiscing elit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
<ul class="boxes">
  <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
    1. Integer molestie lorem at massa
    2. Facilisis in pretium nisl aliquet
      1. Integer molestie lorem at massa
      2. Facilisis in pretium nisl aliquet
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
<ol>
  <li>...</li>
</ol>

Inline

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

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

Definition

A list of terms with their associated descriptions.

Definition lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
Gravida
Donec id elit non mi porta at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl><dt>...</dt><dd>...</dd></dl>

Definition Horizontal

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Definition lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
Gravida
Donec id elit non mi porta at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<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 with text-overflow. In narrower viewports, they will change to the default stacked layout.

Main Color Palette

Grayscale

  • .nxp-gray-xxxlight#f6f7f8
  • .nxp-gray-xxlight#e5eaed
  • .nxp-gray-xlight#d6dce0
  • .nxp-gray-light#bfc8cf
  • .nxp-gray#98a8b4
  • .nxp-gray-dark#64798a
  • .nxp-gray-xdark#4e616e
  • .nxp-gray-xxdark#333f48
  • .nxp-gray-xxxdark#20272d

NXP Orange

  • .nxp-orange-xxxlight#fef7ec
  • .nxp-orange-xxlight#fcebcf
  • .nxp-orange-xlight#fbd89d
  • .nxp-orange-light#fdc058
  • .nxp-orange#f59b00
  • .nxp-orange-dark#c9830b
  • .nxp-orange-xdark#9b6406
  • .nxp-orange-xxdark#593a06
  • .nxp-orange-xxxdark#392401

NXP Blue

  • .nxp-blue-xxxlight#f3f7fc
  • .nxp-blue-xxlight#deecf7
  • .nxp-blue-xlight#c6def1
  • .nxp-blue-light#a6cdeb
  • .nxp-blue#6faddf
  • .nxp-blue-dark#4295d7
  • .nxp-blue-xdark#2074b6
  • .nxp-blue-xxdark#0e4e81
  • .nxp-blue-xxxdark#042b49

NXP Green

  • .nxp-green-xxxlight#f6f7e3
  • .nxp-green-xxlight#f2f5c9
  • .nxp-green-xlight#e6ec93
  • .nxp-green-light#dae35f
  • .nxp-green#c1cd23
  • .nxp-green-dark#9da904
  • .nxp-green-xdark#6b7302
  • .nxp-green-xxdark#3d4101
  • .nxp-green-xxxdark#262900

Text Color

There are several classes defined to change the color of the text when needed. These are as follows:

.nxp-orange-text For Orange Text

.nxp-black-text For Black Text

.nxp-blue-text For Blue Text

.nxp-white-text For White Text

.nxp-gray-text For Grey Text

.nxp-gray-light-text For Grey Light Text

.nxp-green-text For Green Text

Background Colors

Primary Background

Here is a primary background with a link.

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.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table">...</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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table table-striped">...</table>

Bordered table

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

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBaseCamp
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-bordered">...</table>

Centered table

Add .table-centered for all text to be centered.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table table-centered">...</table>

Table Head Light

Add .table-head-light for the table header to have a white background color and thicker bottom border.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table-head-light">...</table>

Hover rows

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-hover">...</table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell top and bottom padding in half and removing bottom margin from p elements.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-condensed">...</table>

Combined table classes

You can combine table classes to change the the table style. For example, the table below combines .table-head-light, table-striped, and table-bordered.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table table-head-light table-striped table-bordered">...</table>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<div class="table-responsive"><table class="table">...</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.

Example block-level help text here.

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

Don't mix form groups with input groups

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Inline form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in BaseCamp. To use the inline form, you'll have to set a width on the form controls used within.

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.

<form class="form-inline" role="form">
<div class="form-group">
  <label class="sr-only" for="exampleInputEmail2">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
  <label class="sr-only" for="exampleInputPassword2">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
  <label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>

Horizontal form

Use BaseCamp's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">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.

Type declaration required

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

<input type="text" class="form-control" placeholder="Text input">

Textarea

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

<textarea class="form-control" 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)

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

Inline checkboxes

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that 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 add multiple to show multiple options at once.


<!-- Simple select -->
<div className='form-group'>
  <label for='select'>...</label>
  <select className='form-control' id='select'>
    <option>...</option>
    <option>...</option>
    <option>...</option>
    <option>...</option>
  </select>
</div>

<!-- Select with Groups -->
<div className='form-group'>
  <label for='selectGroup'>...</label>
  <select className='form-control' id='selectGroup'>
    <optgroup label='...'>
      <option>...</option>
      <option>...</option>
      <option>...</option>
    </optgroup>
    <optgroup label='...'>
      <option>...</option>
      <option>...</option>
      <option>...</option>
    </optgroup>
  </select>
</div>

<!-- Multiple Select: set number of rows with the 'size' attribute -->
<div className='form-group'>
  <label for='selectMultiple'>....</label>
  <select multiple size='4' className='form-control'>
    <option>...</option>
    <option>...</option>
    <option>...</option>
  </select>
</div>

Input Groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

Textual <input>s only

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.

Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: `body` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Don't mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

HTML Markup: Left button

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

HTML Markup: Right button

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

Sizing

Add the relative form sizing classes input-group-sm or input-group-lg to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element. No need to add a class for the default size.



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

Buttons with dropdowns

HTML Markup: Left button

<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 dropdown-menu-right">
      <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="Text input with dropdown button">
</div>

HTML Markup: Right button

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <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 dropdown-menu-right">
      <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>
</div>

Segmented buttons

HTML Markup: Left button

<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 type="text" class="form-control" aria-label="Text input with segmented button dropdown">
</div>

HTML Markup: Right button

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
  <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 dropdown-menu-right">
      <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>
</div>

Static control

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

email@example.com

<form class="form-horizontal" role="form">
  <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">
    </div>
  </div>
</form>

Input focus

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

Demo :focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Disabled inputs

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

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Link functionality of <a> not impacted

This class will only change the appearance of <a class=“btn btn-*”> buttons, not their functionality. Use custom JavaScript to disable links here.

Cross-browser compatibility

While BaseCamp will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn ">Submit</button>
  </fieldset>
</form>

Validation states

BaseCamp includes validation styles for error, warning, 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.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

With optional icons

You can also add optional feedback icons with the addition of an extra class and the right icon.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the topvalue. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="icon-checkmark form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="icon-warning form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="icon-close form-control-feedback"></span>
</div>

Optional icons also work on horizontal and inline forms.

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id=