Bootstrap Tutorial - Bootstrap Form Addon

Prepended and Appended Inputs

We can add text and icons or buttons before or after any text-based input.

Warp the text or icon within a <span> element with the class .input-group-addon and place it before or after the <input> element.

Wrap <span> and text-based <input> within a <div> and apply .input-group class.

Bootstrap can only prepend or append to text-based inputs.

<!--from  w  ww  .j a  va  2s  .com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <form>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Amount">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" placeholder="US Dollar">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Amount">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="US Dollar">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>
</body>
</html>

Click to view the demo

Example

We can place checkbox or radio button within input group's addon instead of text.

<!--  w w  w .ja  va2 s  . co  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
          <div class="col-xs-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="checkbox">
              </span>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-xs-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="radio">
              </span>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox">
            </span>
            <input type="text" class="form-control">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio">
            </span>
            <input type="text" class="form-control">
        </div>
    </form>
</div>
</body>
</html>

Click to view the demo

Example 2

We can prepend or append buttons instead of text. Wrap buttons within the <span> element and apply the class .input-group-btn, instead of .input-group-addon.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{<!--   w  w w  . ja  v a 2  s. co  m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
            <div class="col-xs-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search&amp;hellip;">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Go</button>
                    </span>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Action</button>
                        <button type="button" class="btn btn-default">Options</button>
                    </span>
                    <input type="text" class="form-control"  placeholder="Type something&amp;hellip;">
                </div>
            </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search&amp;hellip;">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">Go</button>
            </span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">Action</button>
                <button type="button" class="btn btn-default">Options</button>
            </span>
            <input type="text" class="form-control"  placeholder="Type something&amp;hellip;">
        </div>
    </form>
</div>
</body>
</html>

Click to view the demo