Forms

Simple and user-friendly form validator

Basic

<form>
  <fieldset class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your email">
    <small class="text-muted">We'll never share your email with anyone else.</small>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Your password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect2">Example multiple select (hold ctrl or cmd button)</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>

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

  <div class="checkbox">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">
        Check me out
    </label>
  </div>


  <button type="submit" class="button button-primary button-rounded">Submit</button>
</form>
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Validator

<form data-toggle="validator" class="form-validator">
  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
  </div>
  <div class="form-group has-feedback">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="envato" required>
    </div>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    <span class="help-block with-errors">Hey look, this one has feedback icons!</span>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="That email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPasswordValidator" class="control-label">Password</label>
    <div class="form-inline row">
      <div class="form-group col-sm-6">
        <input type="password" data-toggle="validator" data-minlength="6" class="form-control input-fullwidth" id="inputPasswordValidator" placeholder="Password" required>
        <span class="help-block">Minimum of 6 characters</span>
      </div>
      <div class="form-group col-sm-6">
        <input type="password" class="form-control input-fullwidth" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
        <div class="help-block with-errors"></div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="radio">
      <input type="radio" name="radio2" id="radio3" value="option1">
      <label for="radio3">
        Boxers
      </label>
    </div>
    <div class="radio">
      <input type="radio" name="radio2" id="radio4" value="option2" checked="">
      <label for="radio4">
        Briefs
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
      <label for="terms">
        Check yourself
      </label>
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="button button-rounded button-primary">Submit</button>
  </div>
</form>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    $('.form-validator').validator();
  });
</script>
@
Hey look, this one has feedback icons!
Minimum of 6 characters

Inline

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name&nbsp;</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  &nbsp;
  <div class="form-group">
    <label for="exampleInputEmail2">Email&nbsp;</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  &nbsp;
  <button type="submit" class="button button-rounded button-primary">Send invitation</button>
</form>

<br><br>

<form class="form-inline">
  <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  &nbsp;
  <div class="form-group">
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">&nbsp;&nbsp;Remember me</label>
  </div>
  &nbsp;
  <button type="submit" class="button button-rounded button-primary">Sign in</button>
</form>

<br><br>

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  &nbsp;
  <button type="submit" class="button button-rounded button-primary">Transfer cash</button>
</form>
 
 


 
 


$
.00
 

Mask

<input type="text" class="form-control input-mask" data-mask="999-99-999-9999-9" placeholder="ISBN"><br>
<input type="text" class="form-control input-mask" data-mask="+9(999)999-99-99" placeholder="Phone">

Grid

<form>
  <div class="form-group row">
    <label for="inputEmailGrid3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmailGrid3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPasswordGrid3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPasswordGrid3" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 form-control-label">Radios</label>
    <div class="col-sm-10">
      <div class="radio">
        <input type="radio" name="optionsRadios" id="optionsRadiosGrid1" value="option1" checked>
        <label for="optionsRadiosGrid1">
          Option one is this and that&mdash;be sure to include why it's great
        </label>
      </div>
      <div class="radio">
        <input type="radio" name="optionsRadios" id="optionsRadiosGrid2" value="option2">
        <label for="optionsRadiosGrid2">
          Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div class="radio">
        <input type="radio" name="optionsRadios" id="optionsRadiosGrid3" value="option3" disabled>
        <label for="optionsRadiosGrid3">
          Option three is disabled
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 form-control-label">Checkbox</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <input type="checkbox" id="checkboxGrid3">
        <label for="checkboxGrid3">Check me out</label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="button button-rounded">Sign in</button>
    </div>
  </div>
</form>

Static

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

<br>

<form class="form-inline">
  <div class="form-group">
    <p class="form-control-static">email@example.com</p>
  </div>
  &nbsp;
  <div class="form-group">
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  &nbsp;
  <button type="submit" class="button button-rounded button-primary">Confirm identity</button>
</form>

email@example.com


email@example.com

 
 

Colors

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


<div class="checkbox has-success">
  <input type="checkbox" id="checkboxSuccess" value="option1">
  <label for="checkboxSuccess">Checkbox with success</label>
</div>

<div class="checkbox has-warning">
  <input type="checkbox" id="checkboxWarning" value="option1">
  <label for="checkboxWarning">Checkbox with warning</label>
</div>

<div class="checkbox has-error">
  <input type="checkbox" id="checkboxError" value="option1">
  <label for="checkboxError">Checkbox with error</label>
</div>

Form group

<form>
  <fieldset class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </fieldset>
  <fieldset class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </fieldset>
</form>

Size

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<br>
<input class="form-control" type="text" placeholder="Default input">
<br>
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<br><br>
<select class="form-control input-lg">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>
<br>
<select class="form-control">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>
<br>
<select class="form-control input-sm">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>






Col size

<div class="row">
  <div class="col-xs-6 m-b">
    <input type="text" class="form-control" placeholder=".col-xs-6">
  </div>
  <div class="col-xs-4 m-b">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
  <div class="col-xs-2 m-b">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-5 m-b">
    <input type="text" class="form-control" placeholder=".col-xs-5">
  </div>
  <div class="col-xs-2 m-b">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-2 m-b">
    <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>

Disabled & Readonly

<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>
    <br>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <br>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <br>
    <button type="submit" class="button button-rounded button-primary">Submit</button>
  </fieldset>
</form>

<br><br>

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>





File

<form action="/file-upload" class="dropzone">
  <div class="dz-message needsclick">
    Drop files here or click to upload.<br />
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
  </div>
</form>

<br>

<div class="fileinput fileinput-new input-group" data-provides="fileinput">
  <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
  <span class="input-group-addon btn button-primary btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
  <a href="#" class="input-group-addon btn button-primary fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>

<br>

<div class="fileinput fileinput-new" data-provides="fileinput">
  <span class="button button-rounded button-primary btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput">&times;</a>
</div>

<br><br>

<label class="file">
  <input type="file">
  <span class="file-custom"></span>
</label>
Drop files here or click to upload.
(This is just a demo dropzone. Selected files are not actually uploaded.)

Select fileChange Remove

Select fileChange ×


Typeahead

<div class="form-demo text-center-alt">
  <input class="form-control typeahead" type="text" placeholder="Countries">
</div>

Image

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="button button-primary button-rounded btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="button button-rounded button-primary fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>
Select imageChange Remove

Editable

<table class="table table-bordered table-striped bt-editable">
  <tbody>
    <tr>
      <td style="width:35%">Simple text field</td>
      <td style="width:65%"><a href="#" class="editable-username" data-type="text" data-title="Enter username">superuser</a></td>
    </tr>
    <tr>
      <td>Empty text field, required</td>
      <td><a href="#" class="editable-firstname" data-type="text" data-placement="right" data-placeholder="Required" data-title="Enter your firstname"></a></td>
    </tr>
    <tr>
      <td>Select, local array, custom display</td>
      <td><a href="#" class="editable-sex" data-type="select" data-value="" data-title="Select sex"></a></td>
    </tr>
    <tr>
      <td>Combodate (date)</td>
      <td><a href="#" class="editable-dob" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY"  data-title="Select Date of birth"></a></td>
    </tr>
    <tr>
      <td>Combodate (datetime)</td>
      <td><a href="#" class="editable-event" data-type="combodate" data-template="D MMM YYYY  HH:mm" data-format="YYYY-MM-DD HH:mm" data-viewformat="MMM D, YYYY, HH:mm"  data-title="Setup event date and time"></a></td>
    </tr>
    <tr>
      <td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
      <td><a href="#" class="editable-comments" data-type="textarea" data-placeholder="Your comments here..." data-title="Enter comments">awesome
user!</a></td>
    </tr>
    <tr>
      <td>Checklist</td>
      <td><a href="#" class="editable-fruits" data-type="checklist" data-value="2,3" data-title="Select fruits"></a></td>
    </tr>
  </tbody>
</table>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    $(function(){

      // defaults
      $.fn.editable.defaults.url = 'inline';

      // editables
      $('.editable-username').editable();

      $('.editable-firstname').editable({
        validate: function(value) {
          if($.trim(value) == '') return 'This field is required';
        }
      });

      $('.editable-sex').editable({
        prepend: "not selected",
        source: [
          {value: 1, text: 'Male'},
          {value: 2, text: 'Female'}
        ],
        display: function(value, sourceData) {
          var colors = {"": "gray", 1: "green", 2: "blue"},
              elem = $.grep(sourceData, function(o){return o.value == value;});

          if(elem.length) {
            $(this).text(elem[0].text).css("color", colors[value]);
          } else {
            $(this).empty();
          }
        }
      });

      $('.editable-dob').editable();

      $('.editable-event').editable({
        placement: 'right',
        combodate: {
          firstItem: 'name'
        }
      });


      $('.editable-comments').editable({
        showbuttons: 'bottom'
      });

      $('.editable-fruits').editable({
        limit: 3,
        source: [
          {value: 1, text: 'banana'},
          {value: 2, text: 'peach'},
          {value: 3, text: 'apple'},
          {value: 4, text: 'watermelon'},
          {value: 5, text: 'orange'}
        ]
      });
    });
  });
</script>
Simple text fieldsuperuser
Empty text field, required
Select, local array, custom display
Combodate (date)
Combodate (datetime)
Textarea, buttons below. Submit by ctrl+enterawesome user!
Checklist

Datepicker

Basic

<input type="text" class="form-control datepicker">

Icon

<div class="input-group date datepicker">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Inline

<div class="datepicker"></div>

Range

<div class="input-daterange input-group datepicker">
  <input type="text" class="input-sm form-control" name="start" />
  <span class="input-group-addon">to</span>
  <input type="text" class="input-sm form-control" name="end" />
</div>
to

Input Groups

Basic

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<br>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
@

@example.com

$ .00

example.com/users/

Size

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<br>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<br>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
@

@

@

Checkboxes and radio buttons

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttons

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <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><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Buttons with dropdowns

<div class="row">
  <div class="col-lg-6">
    <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><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <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><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmented buttons

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-default" type="button">Action</button> <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><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 class="divider" role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><input aria-label="Text input with segmented button dropdown" class="form-control" type="text">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input aria-label="Text input with segmented button dropdown" class="form-control" type="text">
      <div class="input-group-btn">
        <button class="btn btn-default" type="button">Action</button> <button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><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 class="divider" role="separator"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Multiple buttons

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button aria-label="Bold" class="btn btn-default" type="button"><span class="glyphicon glyphicon-bold"></span></button> <button aria-label="Italic" class="btn btn-default" type="button"><span class="glyphicon glyphicon-italic"></span></button>
      </div><input aria-label="Text input with multiple buttons" class="form-control" type="text">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input aria-label="Text input with multiple buttons" class="form-control" type="text">
      <div class="input-group-btn">
        <button aria-label="Help" class="btn btn-default" type="button"><span class="glyphicon glyphicon-question-sign"></span></button> <button class="btn btn-default" type="button">Action</button>
      </div>
    </div>
  </div>
</div>

Mailchimp Subscribe

Default

<div class="subscribe margin-medium text-center">
  <div class="container">
    <h4 class="subscribe-title">Subscribe to our special newsletter</h4>
    <div class="input-group input-group-lg text-center-alt">
      <form action="//text.us11.list-manage.com/subscribe/post?u=72d9cf635dce2f7ac4f2f9c21&amp;id=652dd083ca" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
        <input type="email" value="" name="EMAIL" placeholder="Enter your email" class="form-control required email">
        <span class="input-group-btn">
          <input type="submit" class="btn button button-theme" value="Subscribe!" name="subscribe">
        </span>
      </form>
    </div>
  </div>
</div>

Border

<div class="subscribe margin-medium text-center">
  <div class="container">
    <h4 class="subscribe-title">Be in touch</h4>
    <div class="input-group input-group-lg text-center-alt">
      <form action="//text.us11.list-manage.com/subscribe/post?u=72d9cf635dce2f7ac4f2f9c21&amp;id=652dd083ca" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
        <input type="email" value="" name="EMAIL" placeholder="Enter your email" class="form-control required email">
        <span class="input-group-btn">
          <input type="submit" class="btn button button-theme button-border" value="Subscribe!" name="subscribe">
        </span>
      </form>
    </div>
  </div>
</div>

Green color

<div class="subscribe margin-medium text-center">
  <div class="container">
    <h4 class="subscribe-title">Read latest news instantly</h4>
    <div class="input-group input-group-lg text-center-alt has-success">
      <form action="//text.us11.list-manage.com/subscribe/post?u=72d9cf635dce2f7ac4f2f9c21&amp;id=652dd083ca" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
        <input type="email" value="" name="EMAIL" placeholder="Enter your email" class="form-control required email">
        <span class="input-group-btn">
          <input type="submit" class="btn button button-action" value="Subscribe!" name="subscribe">
        </span>
      </form>
    </div>
  </div>
</div>

Orange color

<div class="subscribe margin-medium text-center">
  <div class="container">
    <h4 class="subscribe-title">Get cool stuff right into your inbox</h4>
    <div class="input-group input-group-lg text-center-alt has-warning">
      <form action="//text.us11.list-manage.com/subscribe/post?u=72d9cf635dce2f7ac4f2f9c21&amp;id=652dd083ca" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
        <input type="email" value="" name="EMAIL" placeholder="Enter your email" class="form-control required email">
        <span class="input-group-btn">
          <input type="submit" class="btn button button-highlight" value="Subscribe!" name="subscribe">
        </span>
      </form>
    </div>
  </div>
</div>

Red color

<div class="subscribe margin-medium text-center">
  <div class="container">
    <h4 class="subscribe-title">We hate spam!</h4>
    <div class="input-group input-group-lg text-center-alt has-error">
      <form action="//text.us11.list-manage.com/subscribe/post?u=72d9cf635dce2f7ac4f2f9c21&amp;id=652dd083ca" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
        <input type="email" value="" name="EMAIL" placeholder="Enter your email" class="form-control required email">
        <span class="input-group-btn">
          <input type="submit" class="btn button button-caution" value="Subscribe!" name="subscribe">
        </span>
      </form>
    </div>
  </div>
</div>