Bootstrap Input Groups

Abhay Trivedi
Last Updated: May 13, 2022


 Source: Bootstrap 5

Introduction

Input group is a part of Form Control. Using Input Group, we can add text, icon, button, or button group on either side of the input field. Input group helps implement default form controls that are primarily used in the input fields on many websites with ease.

How it works

Include the following link in the <head> element to use bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> as well.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

 

To add the Input group to your website, you should do the following steps.

  • Create a <div> element and add class .input-group in it.
  • Then create a <span> tag and assign it with .input-group-text class. Put text which will show before the input field.
  • After that make <input> tag with class .form-control for your input field.
  • That’s it. You have created a Bootstrap Input group. Rearrange or add more <span> or <input> as you need.

Working Example

  <div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  </div>

  <div class="input-group mb-3">
    <input type="email" class="form-control" placeholder="Email" aria-label="Email">
    <span class="input-group-text">@example.com</span>
  </div>

  <label class="form-label">Enter URL:</label>
  <div class="input-group mb-3">
    <span class="input-group-text">https://example.com/public/</span>
    <input type="text" class="form-control">
  </div>

  <div class="input-group mb-3">
    <span class="input-group-text">Enter Amount:</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest rupee)">
    <span class="input-group-text">.00</span>
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Username" aria-label="Username">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Domain.com" aria-label="Domainname">
  </div>

  <div class="input-group">
    <span class="input-group-text">Input via textarea</span>
    <textarea class="form-control" aria-label="Input via textarea"></textarea>
  </div>

Output:

Traditional method

In Bootstrap 4, we use .input-group-prepend and .input-group-append for adding help text before and after the input field, respectively. Here is what it looks like.

  <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="Username">
  </div>

  <div class="input-group mb-3">
    <input type="email" class="form-control" placeholder="Email">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>

Output:

Sizing

You can change size .input-group and its contents by adding .input-group-{sm, lg}. Here is an example.

  <div class="input-group input-group-sm mb-3">
    <span class="input-group-text">small</span>
    <input type="text" class="form-control" aria-describedby="input-group-sm">
  </div>

  <div class="input-group mb-3">
    <span class="input-group-text">Default</span>
    <input type="text" class="form-control" aria-describedby="input-group-default">
  </div>

  <div class="input-group input-group-lg">
    <span class="input-group-text">LARGE</span>
    <input type="text" class="form-control" aria-describedby="input-group-lg">
  </div>

Output:

Radio & Checkboxes

You can add  Radio buttons and Checkboxes instead of text like this.

  <div class="input-group">
    <div class="input-group-text">
      <input class="form-check-input mt-0" type="radio" aria-label="Radio buttont">
    </div>
    <input type="text" class="form-control">
  </div>

  <div class="input-group mb-3">
    <div class="input-group-text">
      <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox">
    </div>
    <input type="text" class="form-control">
  </div>

Output:

Button addons

You can add buttons and buttons with dropdowns like this.

<!-- Button addon -->

  <div class="input-group mb-3">
    <button class="btn btn-outline-primary" type="button">Button</button>
    <input type="text" class="form-control" placeholder="Enter text here..." aria-label="Button addon Input group">
  </div>

  <!-- Button addon with dropdown -->
 
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Enter text here..." aria-label="Button dropdown addon Input group">
    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li><a class="dropdown-item" href="#">First Item</a></li>
      <li><a class="dropdown-item" href="#">Second Item</a></li>
      <li><a class="dropdown-item" href="#">Third Item</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Last Item</a></li>
    </ul>
  </div>

  <!-- Button addon with segmented dropdown --> 

  <div class="input-group mb-3">
    <button type="button" class="btn btn-outline-primary">Action</button>
    <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">First Item</a></li>
      <li><a class="dropdown-item" href="#">Second Item</a></li>
      <li><a class="dropdown-item" href="#">Third Item</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Last Item</a></li>
    </ul>
    <input type="text" class="form-control" aria-label="Button dropdown segmented addon Input group">
  </div>

Output:

Custom file input

<div class="input-group mb-3">
  <label class="input-group-text" for="fileInput">Upload File</label>
  <input type="file" class="form-control" id="fileInput">
</div>

Output:

Frequently Asked Questions

Q.1 What is Bootstrap?
Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more. 

Q.2 What is the Input group class?
The input group class is a container that enhances an input element by adding text, icon, button, or dropdowns in front or back of the input field as a “help text,” improving the user experience.

Q.3 What is the difference between input-group & form-group?
Bootstrap Input group extends from form group. Using input-group can be easier since append text, icon, or button to a text-based input. Whereas form groups are used for spacing between the label and the control. 

Key Takeaways

In this article, we learn how to use bootstrap input-group in our projects and make our websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.

If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Happy Learning!

By Abhay Trivedi

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think