Bootstrap Form Input Groups, Full details of Bootstrap Form Input Groups

Bootstrap Tutorial

Bootstrap Form Input Groups

Bootstrap input group component is very flexible and powerful component for creating the interactive form controls.

By adding prepended and appended content to an input field, you can add common elements to the user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your application interface.

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

2. Wrap both the <span> and text-based <input> element within a <div> element and apply the class .input-group on it.

Basic Input Group :

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Basic Input Group</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
 <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>
 
</body>
</html>

Output :

Checkbox and Radio Button Addons :

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Checkboxes and Radio Addons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
   <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>
 
</body>
</html>

Output :

Button Addons :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Button Addons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search Here">
        <span class="input-group-btn">
            <button type="button" class="btn btn-primary">Search</button>
        </span>
    </div>
    <br>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-info">Search</button>
        </span>
        <input type="text" class="form-control"  placeholder="Search Here">
    </div>
</form>
 
</body>
</html>

Output :

Input Form Button with Dropdowns :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Buttons with Dropdowns</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
<div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Sample Text - 1</a></li>
            <li><a href="#">Sample Text - 2</a></li>
            <li><a href="#">SSample Text - 3</a></li>
            <li class="divider"></li>
            <li><a href="#">Sample Text - 4</a></li>
            <li><a href="#">Sample Text - 5</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>
<br>
<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
         Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
            <li><a href="#">Sample Text - 1</a></li>
            <li><a href="#">Sample Text - 2</a></li>
            <li><a href="#">SSample Text - 3</a></li>
            <li class="divider"></li>
            <li><a href="#">Sample Text - 4</a></li>
            <li><a href="#">Sample Text - 5</a></li>
        </ul>
    </div>
</div>
</form>
 
</body>
</html>

Output :

Segmented Dropdown Buttons :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Segmented Dropdown Buttons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
<div class="input-group">
<div class="input-group-btn">
    <button tabindex="-1" class="btn btn-default" type="button">Action</button>
    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Sample Text - 1</a></li>
        <li><a href="#">Sample Text - 2</a></li>
        <li><a href="#">Sample Text - 3</a></li>
        <li class="divider"></li>
        <li><a href="#">Sample Text - 4</a></li>
        <li><a href="#">Sample Text - 5</a></li>
    </ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
    <button tabindex="-1" class="btn btn-default" type="button">Action</button>
    <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu pull-right">
        <li><a href="#">Sample Text - 1</a></li>
        <li><a href="#">Sample Text - 2</a></li>
        <li><a href="#">Sample Text - 3</a></li>
        <li class="divider"></li>
        <li><a href="#">Sample Text - 4</a></li>
        <li><a href="#">Sample Text - 5</a></li>
    </ul>
</div>
</div>
</form>
 
</body>
</html>

Output :

Bootstrap Tutorial