Explain Input groups in Bootstrap Development
Last Updated :
31 Oct, 2021
Input groups play an important role in collecting user information, their likes, and dislikes, feedback, and more. In this era of online business, it has become an integral part of any website to deal with customers. Normal forms are cool but adding customized input groups to it makes it cooler, interactive, and more user-friendly.
In this article, we will learn about input groups in bootstrap. It extends the form controls component of bootstrap by adding more features to it like text, button groups, etc. It gives us the ability to easily prepend or append buttons or text to the user’s input field. Its class container boosts the frontend by adding text, buttons, and button groups to it.
Approach: Basic steps to prepend or append input group elements to form control are as follows.
- Wrap the child components inside the .input-group class.
- Apply one button or add-on button on one or both sides of an input.
- Wrap the buttons or add-on button inside a .input-group-prepend class if it’s placed before input and use .input-group-append class if it is to be placed at the end.
Step 1: Include Bootstrap CSS in the HTML <head> section to load the stylesheet.
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” integrity=”sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS” crossorigin=”anonymous”>
Add the Bootstrap JavaScript plugin and dependency.
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js” integrity=”sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js” integrity=”sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k” crossorigin=”anonymous”></script>
Step 2: We can directly copy the Bootstrap starter template as given in the official Bootstrap documentation.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
|
Step 3: Add the .input-group class within the HTML <body> in the code. Inside this HTML <div> section, we can add addons and input field as per our choice.
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Recipient's email"
aria-label="Recipient's username"
aria-describedby="2nd-addon">
<div class="input-group-append">
<span class="input-group-text"
id="2nd-addon">@gamil.com
</span>
</div>
</div>
Note: Add all the input-group contents inside the <body> tag.
Example 1: The following example shows how we add a basic add-on button on either side of the input. It demonstrates the use of .input-group-prepend and .input-group-append classes inside .input-group class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"
id="first-addon1">
Username
</span>
</div>
<input type="text" class="form-control"
placeholder="Write your username"
aria-label="Username"
aria-describedby="first-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Recipient's email"
aria-label="Recipient's username"
aria-describedby="2nd-addon">
<div class="input-group-append">
<span class="input-group-text" id="2nd-addon">
@gamil.com
</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"
id="3rd-addon">
Prepend
</span>
</div>
<input type="text" class="form-control"
aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text"
id="4th-addon">
Append
</span>
</div>
</div>
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Example 2: We can add the relative form sizing classes of bootstrap to the .input-group class like .input-group-lg, input-group-sm, etc, to resize the contents automatically. The .input-group class returns the default size.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text"
id="Small-Size">
Small
</span>
</div>
<input type="text" class="form-control"
aria-label="Small"
aria-describedby="Small-Size">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"
id="Default-Size">
Default
</span>
</div>
<input type="text" class="form-control"
aria-label="Default"
aria-describedby="Default-Size">
</div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text"
id="Large-Size">
Large
</span>
</div>
<input type="text" class="form-control"
aria-label="Large"
aria-describedby="Large-Size">
</div>
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Example 3: The following code shows the Input Group with Checkboxes and Radios. Instead of text, we can also add radio buttons or checkboxes inside an addon of the .input-group class just by using input type as ‘checkbox’ or ‘radio’.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox"
aria-label="Checkbox Option">
</div>
</div>
<input type="text" class="form-control"
aria-label="Text input field for checkbox">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio"
aria-label="Radio button Option">
</div>
</div>
<input type="text" class="form-control"
aria-label="Text input field for radio button">
</div>
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Example 4: The following code shows multiple addons. We can add multiple add-ons just by placing them inside <span> tag under .input-group class.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="input-group mb-3">
<span class="input-group-text">addon1</span>
<span class="input-group-text">addon2</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-text">addon2</span>
<span class="input-group-text">addon2</span>
</div>
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Example 5: The following code shows multiple inputs. We can add several input fields just by placing them inside .input-group class.
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">
Enter your first and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</body>
</html>
|
Output:
Example 6: The following code shows the add-on button. Adding button addons are similar to adding multiple addons. We need to mention the .btn class and type=”button” for adding add-ons.
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Username of Recipient">
<div class="input-group-append">
<button class="btn btn-outline-primary"
type="button">
Button
</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary"
type="button">
Button
</button>
</div>
<input type="text" class="form-control">
</div>
</body>
</html>
|
Output:
Example 7: The following example shows buttons with a drop-down menu. We can also add buttons to input groups with a dropdown menu by giving the references inside the .dropdown-menu class. For the button, we need to mention data-toggle=”dropdown” and assign the .dropdown-toggle class to the button element.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary
dropdown-toggle" type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown Menu
</button>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Home</a>
<a class="dropdown-item"
href="#">Contacts</a>
<a class="dropdown-item"
href="#">Services</a>
</div>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary
dropdown-toggle" type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Dropdown Menu
</button>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Home</a>
<a class="dropdown-item"
href="#">Contacts</a>
<a class="dropdown-item"
href="#">Services</a>
</div>
</div>
</div>
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
|
Output:
Example 8: The following example shows custom file input. To add custom file input, we need to mention the input as “file” with the .form-control class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="input-group mb-3">
<input type="file" class="form-control">
<label class="input-group-text">
Upload File
</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text">
Upload File
</label>
<input type="file" class="form-control">
</div>
</body>
</html>
|
Output:
All these are different ways to make our forms more attractive. There are several ways to add labels and we should always add appropriate labels as those are keys to assist technology and increase user engagement.
Move ahead to the Bootstrap tutorial to learn the concepts in a more detailed fashion.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...