Bootstrap 3 - SPLessons

Bootstrap Input Group

Chapter 22

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Input Group

Bootstrap Input Group

shape Description

Bootstrap features Input Groups that are mostly used in Forms. With Input group, elements can be appended or prepended using a class .input-group with an addon called .input-group-addon in a .form-control. The addon can be inserted on a single side or both sides of the input. Steps to be followed while adding Bootstrap Input Group are as follows:


shape Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Prepended and Appended Inputs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
	
	hr {
		width: 100%;
		height: 4px;
		margin-left: auto;
		margin-right: auto;
		background-color:#FF0066;
		color:#FF0066;
		border: 0 none;
	}
</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><!-- Append element using class input-group-addon -->
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
			
			<div class="col-xs-4">
				<div class="input-group">
					<span class="input-group-addon">Mr</span> <!-- Append element using class input-group-addon -->
					<input type="text" class="form-control" placeholder="Your Name">
				</div>
			</div>

			<div class="col-xs-4">
				<div class="input-group"> <!-- default sized input -->
					<span class="input-group-addon">@</span>
					<input type="text" class="form-control" placeholder="Username">
				</div>
			</div>
			
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">$</span><!-- Append element using class input-group-addon -->
                    <input type="text" class="form-control" placeholder="US Dollar">
                    <span class="input-group-addon">.00</span><!-- Prepend element using class input-group-addon -->
                </div>
            </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span><!-- Append element using class input-group-addon -->
            <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><!-- Prepend element using class input-group-addon -->
        </div>
        <br>
		<div class="input-group">
		  <input type="text" class="form-control"  placeholder="Username">
		  <span class="input-group-addon">@gmail.com</span><!-- Prepend element using class input-group-addon -->
		</div>
    </form>
</div>
</body>
</html>  

Output:

Radio and Checkbox Buttons Addons

shape Description

A text input group can be replaced with checkbox or radio button. For that, the .input-group-addon can be used.

shape Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Prepended and Appended Inputs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head>
<body>

<div style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>
               
               <input type = "text" class = "form-control" placeholder="Tick and Enter">
            </div><!-- End of input-group -->
         </div><br>
         
         <div class = "col-lg-6">
            <div class = "input-group">
               
               <span class = "input-group-addon">
                  <input type = "radio">
               </span>
               
               <input type = "text" class = "form-control" placeholder="Select and Enter">
            </div><!-- End of input-group -->
         </div>
         
      </div><!-- End of row -->
   </form>
   
</div>

</body>
</html> 

Output:

Input Groups with Buttons

shape Description

Buttons can be attached to Input groups in various ways.

Button Addons

Buttons in Bootstrap will require an extra level of nesting when inserted with input groups. So, instead of input-group-addon, input-group-btn is used to avoid overriding of default browser styles.

In input groups, buttons can be added by wrapping dropdown menu and button in .input-group-btn class.

A dropdown button can be created using .dropdown-toggle.

shape Example

Below example demonstrates all the above concepts and extended classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Prepended and Appended Inputs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head>
<body>

	<div style = "padding: 100px 100px 10px;">
		<div class="row">
			<form class = "bs-example bs-example-form" role = "form">
				<div class="col-lg-6">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="This is Input group with button Addon">
						<span class="input-group-btn"><!-- Append button addon using class input-group-lg -->
							<button class="btn btn-default" type="button">Reply</button>
						</span>
					</div>
				</div>
			</form>
		</div><!-- row -->
	</div>

	<div style = "padding: 10px 10px 10px;">
		
			<form class = "bs-example bs-example-form" role = "form">
				<div class="col-lg-6">
					<div class="input-group">
						<div class="input-group-btn">
						
							<!-- Dropdown using class dropdown-toggle-->
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Country 
								<span class="caret"></span>
							</button>
            
							<!-- dropdown list items -->
							<ul class="dropdown-menu" role="menu">
							  <li><a href="#">USA</a></li>
							  <li><a href="#">Japan</a></li>
							  <li><a href="#">India</a></li>
							  <li class="divider"></li>
							  <li><a href="#">China</a></li>
							</ul>
						
						</div>
					<input type="text" class="form-control" placeholder="This is Input group with dropdown button">
					</div>
				</div>
			</form>
	</div>

	<div style = "padding: 10px 10px 10px;">
 
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Operating System</button>
						
						<!-- Dropdown using dropdown-toggle class -->
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> 
							  <span class="caret"></span><!-- caret --> 
							  <span class="sr-only">Toggle Dropdown</span>
						</button>
						
						<!-- Dropdown list items -->
						<ul class="dropdown-menu" role="menu">
						  <li><a href="#">Windows</a></li>
						  <li><a href="#">Max OS X</a></li>
						  <li><a href="#">Ubuntu</a></li>
						  <li class="divider"></li>
						  <li><a href="#">Fedora</a></li>
						</ul>
					</div>
				<input type="text" class="form-control" placeholder="This is Input group with dropdown button segmented">
				</div>
			</div>
			</form>
		</div>
	</div>
</body>
</html>

Output:

Sizing Input Groups

shape Description

The sizing classes like large/small/extra-small can be added to input groups when working with forms. Repetition of size classes on each element is not necessary while working with form control because, the contents in .input-group will be resized automatically.

shape Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Height Sizing of Bootstrap 3 Input Groups</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 input-group-lg">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-lg">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="button">Action</button>
                        <button 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>
        <br>
		
        <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">
                </div>
            </div>
            <div class="col-xs-4">
                <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-4">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="button">Action</button>
                        <button 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>
        <br>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon">
                        <input type="checkbox">
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group input-group-sm">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="button">Action</button>
                        <button 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>
    </form>
</div>
</body>
</html>    

Output:

Summary

shape Key Points

  • Bootstrap Input group is used in forms.
  • Addons can be appended or prepended in the input-group class.
  • Sizes of input group elements will be automatically adjusted once the elements are placed in .input-group when working with forms.