In Bootstrap 4 Input Group Tutorial With Example, you will learn to use the Bootstrap input group component. You can add text, icons or buttons before or after any text-based input. You can also add radio button and checkbox.
Bootstrap 4 Input Group Tutorial With Example
Bootstrap input group component is a flexible and powerful component for creating an interactive form controls. But, it is limited to textual input only. Input groups enable you to combine form controls and text on the same line. They are similar to button groups in a sense that, they allow you to align the elements flush opposite each other.
#1: Bootstrap 4 Input Group
The .input-group class is a container to enhance an input by adding text, icon or a button in front of or behind the input field as help text.
Use .input-group-prepend to add the help text in front of the input, and to .input-group-append add it behind the input.
Last, you can add the .input-group-text class to style the specified help text.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Input Group Tutorial With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group</h2>
<form action="">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Enter Username" id="username" name="username">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Your Email" id="mail" name="email">
<div class="input-group-append">
<span class="input-group-text">@investmentnovel.com</span>
</div>
</div>
<br>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</div>
</body>
</html>
The example of a Bootstrap input group will look like below screenshot.
#2: Bootstrap 4 Input Group Sizing
You can use class .input-group-sm for the small input groups and class .input-group-lg for the large inputs groups.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Input Group Tutorial With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group Sizing</h2>
<form action="">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control" placeholder="Investmentnovel">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text" class="form-control" placeholder="Investmentnovel">
</div>
<br>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text" class="form-control" placeholder="Investmentnovel">
</div>
</form>
</div>
</body>
</html>
The example of a Bootstrap input group sizing will look like below screenshot.
#3: Bootstrap 4 Multiple Inputs and Helpers
You can add multiple input and addons.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Input Group Tutorial With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Multiple Input and Addons</h2>
<form action="">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Person</span>
</div>
<input type="text" class="form-control" placeholder="Enter Name">
<input type="text" class="form-control" placeholder="Enter Email ID">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">A</span>
<span class="input-group-text">B</span>
<span class="input-group-text">C</span>
</div>
<input type="text" class="form-control">
</div>
</form>
</div>
</body>
</html>
The example of a Bootstrap multiple inputs and helpers will look like below screenshot.
#4: Bootstrap 4 Input Group with Checkbox and Radio Button
You can also use checkboxes and radio buttons instead of text.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Input Group Tutorial With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Checkbox and RadioButton</h2>
<form action="">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control">
</div>
</form>
</div>
</body>
</html>
The example of a Bootstrap multiple input groups with checkbox and radio button will look like below screenshot.
#6: Bootstrap 4 Input Group with Dropdown Button
You can also add dropdown menus to the input group.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Input Group Tutorial With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group with Dropdown Button</h2>
<form action="">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Enter Text">
</div>
</form>
</div>
</body>
</html>
The example of a Bootstrap input group with dropdown button will look like below screenshot.
#7: Bootstrap 4 Input Group Labels
Put labels outside of an input group, and remember that a value of the for attribute should match the id of the input.
You can click on the label and it will take focus to the input.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Input Group Tutorial With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group with Labels</h2>
<form action="">
<label for="demo">Please Enter your email here:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@investmentnovel.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
The example of a Bootstrap input group labels button will look like below screenshot.
At last, our Bootstrap 4 Input Group Tutorial With Example is over.
Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.