Bootstrap 4 Input group


Basic Input group

An input group is a combination of several input elements and is a container. Any text, label, button can be added to an input through it. To use it, you need to add a .input-group class.

If you want to put a text in front of the input, you have to add the .input-group-prepend class and if you want to put a text behind the input, you have to add the .input-group-append class.

To style text using the .input-group-text class.

@
@gmail.com

Example code

<form>
<div class="input-group mb-4">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" name="">
</div>
<div class="input-group">
<input type="text" class="form-control" name="">
<div class="input-group-append">
<div class="input-group-text">@gmail.com</div>
</div>
</div>
</form>

Input group sizes

The .input-group-lg class is used to enlarge the input group and the .input-group-sm class to minimize the input group, respectively.

@
@gmail.com

Example code

<form> 
<div class="input-group mb-4 input-group-sm">
<div
class="input-group-prepend">
<div class="input-group-text"> @</div> </div>
<input type="text" class="form-control" placeholder="Small input group"
name="">
</div>
<div class="input-group input-group-lg"> <input type="text"
class="form-control" placeholder="Large input group" name="">
<div
class="input-group-append">
<div class="input-group-text"> @gmail.com</div>
</div>
</div>
</form>

Multiple input groups

@
@gmail.com

Example code

<form>
<div class="input-group mb-4">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" name="">
<div class="input-group-append">
<div class="input-group-text">@gmail.com</div>
</div>
</div>
</form>

Input group with Buttons

Example code

<form>
<div class="input-group mb-4">
<div class="input-group-prepend">
<button class="btn btn-outline-primary">Button</button>
</div>
<input type="text" class="form-control" name="">
</div>
</form>
<form>
<div class="input-group mb-4">
<input type="text" class="form-control" name="">
<div class="input-group-append">
<button class="btn btn-primary">Search</button>
</div>
</div>
</form>

Input groups with checkbox and radio buttons

Example code

<form>
<div class="input-group mb-4">
<div class="input-group-prepend ">
<div class="input-group-text">
<input type="checkbox" name="">
</div>
</div>
<input type="text" class="form-control" name="">
</div>
</form>
<form>
<div class="input-group mb-4">
<input type="text" class="form-control" name="">
<div class="input-group-append">
<div class="input-group-text">
<input type="radio" name="">
</div>
</div>
</div>
</form>

Input group with dropdown

Example code

<form>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<input type="text" class="form-control" name="">
</div>
</form>