Input group

<!-- Multiple inputs (addon on the left) -->
<div class="input-group">
<span class="input-group-text fw-bold text-dark">Full name</span>
<input class="form-control" type="text" placeholder="First name">
<input class="form-control" type="text" placeholder="Last name">
</div>

<!-- Multiple inputs (addon on the right) -->
<div class="input-group">
<input class="form-control" type="time" value="07:45">
<input class="form-control" type="time" value="09:00">
<span class="input-group-text">
<i class="fi-clock"></i>
</span>
</div>

<!-- Button addon on the left -->
<div class="input-group">
<button class="btn btn-primary" type="button">Button</button>
<input class="form-control" type="text" placeholder="Button on the left">
</div>

<!-- Button addon on the right -->
<div class="input-group">
<input class="form-control" type="text" placeholder="Button on the right">
<button class="btn btn-primary" type="button">Button</button>
</div>

<!-- Dropdown addon on the left -->
<div class="input-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu my-1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<input class="form-control" type="text" placeholder="Dropdown on the right">
</div>

<!-- Dropdown addon on the right -->
<div class="input-group">
<input class="form-control" type="text" placeholder="Dropdown on the right">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu dropdown-menu-end my-1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

<!-- Multiple icon link addons -->
<div class="input-group">
<input class="form-control" type="text" placeholder="Icon links on the right">
<div class="input-group-text p-0">
<a class="d-block text-body px-3 py-2" href="#">
<i class="fi-edit mt-n1"></i>
</a>
</div>
<div class="input-group-text p-0">
<a class="d-block text-success px-3 py-2" href="#">
<i class="fi-check mt-n1"></i>
</a>
</div>
<div class="input-group-text p-0">
<a class="d-block text-danger px-3 py-2" href="#">
<i class="fi-trash mt-n1"></i>
</a>
</div>
</div>

<!-- Input group large -->
<div class="input-group input-group-lg">
...
</div>

<!-- Input group normal -->
<div class="input-group">
...
</div>

<!-- Input group small -->
<div class="input-group input-group-sm">
...
</div>