JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Input Groups

June 23, 2014 by Sutha Kaliannan Leave a Comment

This tutorial explains how to add text or buttons before, after or on both side of any text based input. The Bootstrap provides the class .input-group with an .input-group-addon class to prepend or append text in a .form-control. To insert before or after elements to a form-control, we just use the class input-group within the div element and place the content inside a <span> tag by using the class input-group-addon within the same div element.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The following is an example implementing the button groups:

Bootstrap Input Groups

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Input Group</h2>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Number">
</div><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Number">
<span class="input-group-addon">#</span>
</div><br>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control">
<span class="input-group-addon">$</span>
</div>
</div>
</body>
</html>
[/code]

As shown in the script, we are using the classes .input-group and .input-group-addon within the div element to prepend or append elements to a form-control. We can add any types of elements to the user’s input. In above script, we have used # for number or anything else can be used as per user wish for the application.

  • Run Bootstrap Basic Input Group Demo

Bootstrap Basic Input Group Example

Bootstrap Sizing of Input Group

We can make input groups with different sizes like larger size, smaller size or extra smaller size by using .input-group-lg, .input-group-sm and .input-group-xs classes. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Sizing Input Group</h2>
<div class="input-group input-group-lg">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Number">
</div><br>
<div class="input-group input-group-xs">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Number">
</div><br>
<div class="input-group input-group-sm">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Number">
</div>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Sizing Input Group Demo

Bootstrap Sizing Input Group Example

Bootstrap Checkboxes and Radio Addons

We can place checkbox and radio button in the input group’s addon. We can place before or after checkbox or radio buttons instead of text as shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Checkboxes and Radio Addons</h2>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control" placeholder="This is Checkbox">
</div><br>
<div class="input-group">
<span class="input-group-addon">
<input type="radio"></span>
<input type="text" class="form-control" placeholder="This is Radio Button">
</div>
</div>
</body>
</html>
[/code]

As shown in the above script, we have used checkbox and radio types within span element which is wrapped with div class .input-group.

  • Run Bootstrap Checkbox and Radio Addons Demo

Bootstrap Checkboxes and Radio Addons Picture

Bootstrap Button Addons

Like checkbox and radio addons, it’s also possible to place button addons in input groups. To create button addons, we just need to use .input-group-btn instead of using .input-group-addon. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
div{
max-width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Checkboxes and Radio Addons</h2>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="button">MyButton</button></span>
<input type="text" class="form-control" placeholder="This is Button">
</div><br>
<div class="input-group">
<input type="text" class="form-control" placeholder="This is Button">
<span class="input-group-btn">
<button class="btn btn-warning" type="button">MyButton</button></span>
</div>
</div>
</body>
</html>
[/code]

As shown in the script, we have just wrapped the input group button by using the class .input-group-btn within div element which uses the class called .input-group.

  • Run Bootstrap Buttons Addons Demo

Bootstrap Buttons Addons Picture

Bootstrap Buttons with Dropdowns

It is also possible to create dropdown menu in input groups by just using the dropdown menu within the class .input-group-btn. The following is an example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
div{
max-width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Buttons with Dropdowns</h2>
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Country List<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="This is Dropdown Menu">
</div><br>

<div class="input-group">
<input type="text" class="form-control" placeholder="This is Dropdown Menu">
<div class="input-group-btn">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Country List<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[/code]

As shown in the above script, the dropdown menu in the first input group will get display at left side by default and the second dropdown menu will get display to the right side by using the class .pull-right which is wrapped with ul class defined under div element.

  • Run Bootstrap Buttons with Dropdowns Demo

Bootstrap Buttons with Dropdowns picture

Bootstrap Segmented Buttons

We can segment button dropdowns use the same way as used in the button dropdowns but can be used with one small change with dropdown can be shown in the following example:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
div{
max-width:800px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Segmented Buttons</h2>
<div class="input-group">
<div class="input-group-btn">

<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" tabindex="-1"><span class="caret"></span></button>
<span class="sr-only">Country List</span>
<ul class="dropdown-menu">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
<input type="text" class="form-control" placeholder="This is Dropdown Menu">
</div><br>

<div class="input-group">
<input type="text" class="form-control" placeholder="This is Dropdown Menu">
<div class="input-group-btn">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" tabindex="-1"><span class="caret"></span></button>
<span class="sr-only">Country List</span>
<ul class="dropdown-menu pull-right">
<li><a href="#">India</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Srilanka</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">New Zealand</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[/code]

Above script defines the dropdown menu as shown in the button dropdowns section, we have used with one small change with dropdown as mentioned above. The sr-only class hides information to the screen readers. After executing the script, we will get dropdown menu with down arrow without name of the dropdown menu.

  • Run Bootstrap Segmented Buttons Demo

Segmented Buttons Picture

Filed Under: Bootstrap Tagged With: Bootstrap Components

About Sutha Kaliannan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved