Table of contents
1.
Introduction
2.
What is the bootstrap input group?
3.
How it works
4.
Working Example
5.
Traditional method
6.
Sizing
7.
Radio and Checkboxes
8.
Button Addons
9.
Custom file input
10.
Frequently Asked Questions
10.1.
What is a Bootstrap Input Group?
10.2.
How to create a Bootstrap Input Group?
10.3.
How to control the size of Bootstrap Input Groups?
10.4.
Are Bootstrap Input Groups responsive?
10.5.
What are some common use cases for Bootstrap Input Groups?
11.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap Input Groups

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Hey Ninjas, in this article, we will read about bootstrap input groups. The input group is a part of Form Control. Using Input Group, we can add text, icons, buttons, or button groups on either side of the input field. 

Intoduction

Input group helps implement default form controls that are used in the input fields on many websites with ease.

Also Read About, javascript replace

What is the bootstrap input group?

Bootstrap Input Group is a feature in the Bootstrap framework that allows us to add an input element along with text or buttons before, after, or on both sides of the input element. This helps to provide better context for the user on what information is required or what action they can perform. Input groups are created using the “input-group” class in HTML and are fully responsive and flexible. We can use the “input-group-prepend” or “input-group-append” classes to add text or buttons.

How it works

First of all, we need to get started with bootstrap to implement Input groups. To start using bootstrap on a website, we need to include its CSS in the <head> of the HTML code.

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

 

Many of the bootstrap components need the use of JavaScript to function to add functionality to the website. So, we have to place the below script in the HTML code just before the </body>.

<!-- Js files-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

Now, after adding bootstrap to the website. Let us see how to add input groups to the website. We do the following steps to add the Input group to our website.

  • Wrap the input element and any addons in a container with the class "input-group".
     
  • Use the class "input-group-text" on the span element to give it the appropriate styling for an addon.
     
  • After that, we make <input> tag with the class “form-control” for your input field.
     
  • That’s it. We have created a Bootstrap Input group. We rearrange or add more <span> or <input> as we need. We can add any desired classes to the input element to customize its appearance.

Working Example

Here is an example of how to use an input group.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>
</head>

<body>
    <!-- Some common examples of input groups -->
    <div class="container">
        <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>
    </div>
   

    <!--Bootstrap Js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

 

Output:

Output 1

Traditional method

Traditionally, we used the classes “input-group-prepend” and “input-group-append” for adding text before and after the input field, respectively. Here is what it looks like.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>
</head>

<body>
    <!-- Traditional method to use input groups -->
    <div class="container">
        <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>
    </div>


    <!--Bootstrap Js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

 

Output:

Output 2

Sizing

We can change the size of the input groups on our wish. We can achieve it by using classes like xs, sm, and lg. We must add them to the class “input-group” to use them.  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>
</head>

<body>
    <!-- Different sizing options to use input groups -->
    <div class="container">
        <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>
    </div>


    <!--Bootstrap Js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

 

Output:

Output 3

Radio and Checkboxes

We can also add Radio buttons and checkboxes, as shown in the example below.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>
</head>

<body>
    <!-- Checkbox and Radio-button options in input groups -->
    <div class="container">
        <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>

    </div>


    <!--Bootstrap Js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

 

Output:

Output 4

Button Addons

We can also add buttons and dropdowns, as shown in the example below.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>
</head>

<body>
    <!-- Different button addon options in input groups -->
    <div class="container">
        <!-- 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>

    </div>


    <!--Bootstrap Js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>

 

Output:

Output 5

Custom file input

Let us see an example of a custom input file option in bootstrap input groups.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>
</head>

<body>
    <!-- Custom Input file option in input groups -->
    <div class="container">
        <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>


        <!--Bootstrap Js -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
</body>

</html>

 

Output:

Output 6

Frequently Asked Questions

What is a Bootstrap Input Group?

A Bootstrap Input Group is a feature in the Bootstrap framework that allows you to add text or buttons before, after, or on both sides of an input element. It provides a better context for the user on what information is required or what action they can perform.

How to create a Bootstrap Input Group?

We can create a Bootstrap Input Group by wrapping an input element with a .input-group class and adding text or buttons.

How to control the size of Bootstrap Input Groups?

We can control the size of Bootstrap Input Groups by using Bootstrap's sizing classes, such as “input-group-lg” for large sizes and “input-group-sm” for small sizes.

Are Bootstrap Input Groups responsive?

Yes, Bootstrap Input Groups are fully responsive and flexible, and they automatically adjust to different screen sizes.

What are some common use cases for Bootstrap Input Groups?

Some common use cases for Bootstrap Input Groups include adding currency symbols, providing search functionality, adding action buttons, and formatting input elements. Bootstrap Input Groups are a useful tool for improving the user experience of your web applications.

Conclusion

In this article, we learned about the bootstrap input groups. How to insert them in codes using Bootstrap. We learned the basics of the several sub-topics through some simple examples. We also read about some special classes and their uses. Check out our articles if you think this blog has helped you enhance your knowledge and want to learn more. Visit our website to read more such blogs. 

  1. Bootstrap overview 
  2. Why Use Bootstrap? 
  3. Bootstrap Environment Setup 
  4. Bootstrap CSS Overview 
  5. Bootstrap library  
  6. Bootstrap Accordion

 

For placement preparations, you must look at the problemsinterview experiences, and interview bundles. Enrol in our courses and refer to the mock tests and problems available; look at the Problem Sheets interview experiences, and interview bundle for placement preparations. You can also book an interview session with us.  

Consider our paid courses, however, to give your career a competitive advantage!

Happy Coding!

Live masterclass