Menu
Bootstrap 5 Input Groups
Input Groups
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a “help text”.
To style the specified help text, use the .input-group-text class:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Input Group</h2>
<p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a “help text”.</p>
<p>Use the .input-group-text class to style the specified help text.</p>
<form action=”/action_page.php”>
<div>
<span>@</span>
<input type=”text” placeholder=”Username” name=”usrname”>
</div>
<div>
<input type=”text” placeholder=”Your Email” name=”email”>
<span>@example.com</span>
</div>
<button type=”submit”>Submit</button>
</form>
</div>
</body>
</html>
Input Group Size
Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Input Group Size</h2>
<p>Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:</p>
<div>
<span>Small</span>
<input type=”text”>
</div>
<div>
<span>Default</span>
<input type=”text”>
</div>
<div>
<span>Large</span>
<input type=”text”>
</div>
</div>
</body>
</html>
Multiple Inputs and Helpers
Add multiple inputs or addons:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Multiple Inputs and Helpers</h2>
<p>Add multiple inputs or addons:</p>
<!– Multiple inputs –>
<div>
<span>Person</span>
<input type=”text” placeholder=”First Name”>
<input type=”text” placeholder=”Last Name”>
</div>
<!– Multiple addons / help text –>
<div>
<span>One</span>
<span>Two</span>
<span>Three</span>
<input type=”text”>
</div>
</div>
</body>
</html>
Input Group with Checkboxes and Radios
You can also use checkboxes or radio buttons instead of text:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Input Group with Checkboxes and Radios</h3>
<p>You can also use checkboxes or radio buttons instead of text:</p>
<!– Multiple inputs –>
<div>
<div>
<input type=”checkbox”>
</div>
<input type=”text” placeholder=”Some text”>
</div>
<div>
<div>
<input type=”radio”>
</div>
<input type=”text” placeholder=”Some text”>
</div>
</div>
</body>
</html>
Input Group Buttons
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Input Group Buttons</h3>
<div>
<button type=”button”>Basic Button</button>
<input type=”text” placeholder=”Some text”>
</div>
<div>
<input type=”text” placeholder=”Search”>
<button type=”submit”>Go</button>
</div>
<div>
<input type=”text” placeholder=”Something clever..”>
<button type=”button”>OK</button>
<button type=”button”>Cancel</button>
</div>
</div>
</body>
</html>
Input Group with Dropdown Button
Add a dropdown button in the input group. Note that you don’t need the .dropdown wrapper, as you normally would.
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Input Groups with Dropdown Button</h3>
<p>Add a dropdown button in the input group. Note that you don’t need the .dropdown wrapper, as you normally would.</p>
<div>
<button type=”button” data-bs-toggle=”dropdown”>
Dropdown button
</button>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
<input type=”text” placeholder=”Username”>
</div>
</div>
</body>
</html>