Input Groups in Bootstrap with Examples
Last Updated :
03 Aug, 2023
Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs.
Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes.
- The .input-group-prepend class is used to add groups to the front of the input.
- The .input-group-append class is used to add it behind the input.
- The .input-group-text class is used to style the text that is displayed inside the group.
The following example demonstrates these input groups:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h3>Prepend Group Example</h3>
<!-- Declare an input group -->
<div class="input-group">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text"
id="username">
@
</span>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control"
placeholder="Username">
</div>
<h3>Append Group Example</h3>
<!-- Declare an input group -->
<div class="input-group">
<!-- Declare an input group -->
<input type="text"
class="form-control"
placeholder="Email">
<!-- Prepend the following content to the input box -->
<div class="input-group-append">
<!-- Define the text content of the group -->
<span class="input-group-text"
id="email">
@example.com
</span>
</div>
</div>
<h3>Prepend and Append Together</h3>
<!-- Declare an input group -->
<div class="input-group">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text">
https://
</span>
</div>
<!-- Declare an input group -->
<input type="text"
class="form-control"
placeholder="Your domain name here">
<!-- Append the following content to the input box -->
<div class="input-group-append">
<!-- Define the text content of the group -->
<span class="input-group-text">
.com
</span>
</div>
</div>
</div>
</body>
</html>
Output:
Sizing of the Input Groups
The input groups could be made larger or smaller by additional classes. There are 3 possible sizes of input groups:
- The .input-group-sm class is used for a smaller size.
- The .input-group-lg class is used for a larger size.
- The .input-group class is the default size.
Note: Sizing on the individual input group elements isn’t currently supported.
Example:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h1>Sizing</h1>
<!-- Declare the small input group -->
<div class="input-group input-group-sm mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text"
id="small">
Small
</span>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control">
</div>
<!-- Declare the normal input group -->
<div class="input-group mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text"
id="medium">
Default
</span>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control">
</div>
<!-- Declare the large input group -->
<div class="input-group input-group-lg">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text"
id="large">
Large
</span>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control">
</div>
</div>
</body>
</html>
Output:
Using Multiple Inputs: Multiple inputs could be used with input groups.
Example:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h3>Multiple inputs</h3>
<!-- Declare an input group -->
<div class="input-group">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Define the text content of the group -->
<span class="input-group-text"
id="">
First & Last name
</span>
</div>
<!-- Declare two input boxes -->
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</body>
</html>
Output:
Using Multiple Addons: Multiple addons could be stacked or mixed together with other types, including checkboxes and radio buttons.
Example:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h1>Multiple addons</h1>
<!-- Declare an input group -->
<div class="input-group mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Declare two input groups -->
<span class="input-group-text">
$
</span>
<span class="input-group-text">
0.00
</span>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control">
</div>
<!-- Declare an input group -->
<div class="input-group">
<!-- Declare an input box -->
<input type="text"
class="form-control">
<!-- Append the following content to the input box -->
<div class="input-group-append">
<!-- Declare two input texts -->
<span class="input-group-text">
$
</span>
<span class="input-group-text">
0.00
</span>
</div>
</div>
</div>
</body>
</html>
Output:
Using Button Addons: Buttons could also be appended or prepended to the input box.
Example:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h1>Button addons</h1>
<!-- Declare an input group -->
<div class="input-group mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Declare a button-->
<button class="btn btn-outline-secondary"
type="button">
Button
</button>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control">
</div>
<!-- Declare an input group -->
<div class="input-group mb-3">
<!-- Declare an input box -->
<input type="text"
class="form-control">
<!-- Append the following content to the input box -->
<div class="input-group-append">
<!-- Declare a button -->
<button class="btn btn-outline-secondary"
type="button">
Button
</button>
</div>
</div>
<!-- Declare an input group -->
<div class="input-group mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<!-- Declare two buttons -->
<button class="btn btn-outline-secondary"
type="button">
Button 1
</button>
<button class="btn btn-outline-secondary"
type="button">
Button 2
</button>
</div>
<!-- Declare an input box -->
<input type="text"
class="form-control">
</div>
<!-- Declare an input group -->
<div class="input-group mb-3">
<!-- Declare an input box -->
<input type="text" class="form-control">
<!-- Append the following content to the input box -->
<div class="input-group-append">
<!-- Declare two buttons -->
<button class="btn btn-outline-secondary"
type="button">
Button 1
</button>
<button class="btn btn-outline-secondary"
type="button">
Button 2
</button>
</div>
</div>
</div>
</body>
</html>
Output:
Using Custom Select: Input groups could be used with custom select.
Note: Browser default versions of custom select are not supported.
Example:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h3>Custom select</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text"
for="select01">
Options
</label>
</div>
<select class="custom-select"
id="select01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select"
id="select02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<label class="input-group-text"
for="select02">
Options
</label>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
Output:
Using Custom File Input: Input groups could be used with custom file inputs.
Note: Browser default versions of file inputs are not supported.
Example:
html
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>Input Groups in Bootstrap</title>
</head>
<body>
<div class="container">
<h3>Custom file input</h3>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
Upload
</span>
</div>
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="file01">
<label class="custom-file-label"
for="file01">
Choose file
</label>
</div>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file"
class="custom-file-input"
id="file02">
<label class="custom-file-label"
for="file02">
Choose file
</label>
</div>
<div class="input-group-append">
<span class="input-group-text"
id="">
Upload
</span>
</div>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
Output:
Similar Reads
Clearfix in Bootstrap
One of the major problems with the structure of HTML is that if you have a child div inside parent div, the child div automatically flows around the parent div. The solution to this problem is using clear property of CSS. Bootstrap allows us to use a class named clearfix which is used to clear the f
2 min read
Image Replacement in Bootstrap using text-hide Class
Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax: <element class = "text-hide" style = "background-image: url('Speci
1 min read
Typography in Bootstrap
Bootstrap Typography provides a standardized and flexible approach to text styling, offering various classes for headings, paragraphs, and inline text elements. It ensures consistent typography across different devices and screen sizes, enhancing readability and aesthetics. Typography can be used to
2 min read
Popovers in bootstrap with examples
A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element. In the popover, if you click on any element th
4 min read
Bootstrap | Spinners Set-2
Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Buttons with border spinner: We can place the border spinner within th
4 min read
Bootstrap | Spinners Set-1
Bootstrap provides us with various classes for creating different styles of the spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the classes provided by Bootstrap. Types of Spinners: Border spinner: We can create a lightweight bordere
4 min read
Differences between Bootstrap and JQuery UI
Bootstrap: Bootstrap is a framework for front-end web development.it makes web development faster and easier. It contains HTML and CSS based design templates for various responsive front-end designing, as well as optional JavaScript plugins. JQuery UI: JQuery UI is a collection of GUI widgets and th
3 min read
Flexbox utilities in bootstrap with examples
The Flexible Box Layout Module in bootstrap is used for designing the flexible and responsive layout structure. It is used in Bootstrap 4. The d-flex class is used to create a simple flexbox container Syntax: <div class="d-flex p-2"></div>The d-inline-flex class is used to create an inli
11 min read
Spacing in Bootstrap with Examples
Spacing in Bootstrap refers to the system of predefined margin and padding utility classes that enable developers to add space around elements easily. These classes facilitate layout control and improve visual presentation in web applications.The following Syntax are used in the Various Classes for
3 min read
Media Objects in Bootstrap with Examples
The Bootstrap Media Objects like images or videos can be aligned to the left or to the right of some content in an easy and efficient manner.The Bootstrap Media Objects are used where some data is positioned alongside content to build up complicated and recursive components of the content.The media
5 min read