Input Groups
Input Groups in Bootstrap are used to combine form controls with text, buttons, or other elements using input groups. Useful for search bars, currency inputs, and more.
Class | Description | Syntax |
---|---|---|
Prepend | Adds group to the front of the input. | .input-group-prepend |
Append | Add group behind the input. | .input-group-append |
Text | Styles the text that is displayed inside the group. | .input-group-text |
Small | Makes input groups smaller. | .input-group-sm |
Large | Makes input groups larger. | .input-group-lg |
Group | Makes size of the input group default. | .input-group |
Example Code:
<!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">
<h5>Sizing</h5>
<div class="input-group input-group-sm mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<span class="input-group-text" id="small">Small</span>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<span class="input-group-text" id="medium">Default</span>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-lg">
<!-- Prepend the following content to the input box -->
<div class="input-group-prepend">
<span class="input-group-text" id="large">Large</span>
</div>
<input type="text" class="form-control">
</div>
<br>
<h5>Prepend Group Example</h5>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="username">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<h5>Append Group Example</h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email">
<!-- Prepend the following content to the input box -->
<div class="input-group-append">
<span class="input-group-text" id="email">@example.com</span>
</div>
</div>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us