< Bootstrap Tutorial

Bootstrap input

← Previous Next →


Bootstrap Inputs

Using input groups we can easily prepend and append text or buttons to the text-based inputs. Bootstrap input group component is very flexible and powerful component for creating the interactive form controls, however it is limited to textual input only. We'll see how to extend the text based <input> by adding the text or buttons before, after, or on both sides of it to make our form more attractive.

By adding prepended and appended content to an input field, we can add common elements to the user’s input. We can add text and icons or buttons before or after any text-based input.

To prepend or append text and icons to an input:

  • Wrap the text or icon within a <span> element having the class .input-group-addon and place it before or after the <input> element.
  • Wrap both the <span> and text-based <input> element within a <div> element and apply the class .input-group on it.

The following code demonstrates how to prepend and append inputs:

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

The output produced wil be like this:

Adding Radio Buttons and Checkboxes

The following code will insert a radio button and a checkbox:

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

The result will be like this:

Adding Buttons for Text Input

We can also 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.

The following gives the results:

<form>
    <div class="row">
        <div class="col-xs-5">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search&hellip;">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default">Go</button>
                </span>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="input-group">
                <input type="text" class="form-control"  placeholder="Type something&hellip;">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default">Action</button>
                    <button type="button" class="btn btn-default">Options</button>
                </span>
            </div>
        </div>
    </div>
</form>

The output will look like this:

Input Group Sizing

We can change the size of the input groups, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.

The following example demonstrates how this happens:

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
		
      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>
   
</div>

The result of the above code will be:

Adding Button Dropdowns to Text Inputs

We can also create dropdown buttons if we want to do more than one action from a button.

The following code demonstrates how to do this:

<form>
    <div class="row">
        <div class="col-xs-6">
            <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="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-xs-6">
            <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="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

The output looks like this:

Adding Segmented Dropdown Button Groups

 Similarly, we can define the segmented dropdown button group where dropdown button is placed besides the other buttons.

The following code demonstrates how to do this:

<form>
    <div class="row">
        <div class="col-xs-6">
            <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="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-xs-6">
            <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="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>

The result produced looks like this:

 

← Previous Next →