Please enable JavaScript.

Coggle requires JavaScript to display documents.

6.3: Input Groups - Coggle Diagram

6.3: Input Groups

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Enter a price">
</div>

sizing

<div class="input-group input-group-lg mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Enter a price">
</div>

button addons

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success">Go</button>
  </div>
</div>

icons

using Font Awesome

link to CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="fas fa-user"></i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>