Input Groups in Bootstrap with Examples

Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors or custom inputs.

Basic input groups: The following classes are the base classes that are used to add the groups to either sides of the input boxes.

  • The .input-group-prepend class is used to add groups to the front of the input.
  • The .input-group-append class is used to add it behind the input.
  • The .input-group-text class is used to style the text that is displayed inside the group.

The following example demonstrate these input groups:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <div class="container">
        <h3>Prepend Group Example</h3>
  
        <!-- Declare an input group -->
        <div class="input-group">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text" id="username">@</span>
            </div>
  
            <!-- Declare an input box -->
            <input type="text" class="form-control" placeholder="Username">
        </div>
  
        <h3>Append Group Example</h3>
  
        <!-- Declare an input group -->
        <div class="input-group">
  
        <!-- Declare an input group -->
            <input type="text" class="form-control" placeholder="Email">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-append">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text" id="email">@example.com</span>
            </div>
        </div>
  
        <h3>Prepend and Append Together</h3>
  
        <!-- Declare an input group -->
        <div class="input-group">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text">https://</span>
            </div>
  
            <!-- Declare an input group -->
            <input type="text" class="form-control" placeholder="Your domain name here">
  
            <!-- Append the following content to the input box -->
            <div class="input-group-append">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text">.com</span>
            </div>
        </div>
    </div>
</body>
</html>

chevron_right


Output:
Prepend and Append

Sizing of the Input Groups

The input groups could be made larger or smaller by additional classes. There are 3 possible sizes of input groups:

  • The .input-group-sm class is used for a smaller size.
  • The .input-group-lg class is used for a larger size.
  • The .input-group class is the default size.

Note: Sizing on the individual input group elements isn’t currently supported.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <div class="container">
        <h1>Sizing</h1>
  
        <!-- Declare the small input group -->
        <div class="input-group input-group-sm mb-3">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text" id="small">Small</span>
            </div>
  
            <!-- Declare an input box -->
            <input type="text" class="form-control">
        </div>
  
        <!-- Declare the normal input group -->
        <div class="input-group mb-3">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text" id="medium">Default</span>
            </div>
  
            <!-- Declare an input box -->
            <input type="text" class="form-control">
        </div>
  
        <!-- Declare the large input group -->
        <div class="input-group input-group-lg">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text" id="large">Large</span>
            </div>
  
            <!-- Declare an input box -->
            <input type="text" class="form-control">
        </div>
    </div>
</body>
</html>

chevron_right


Output:
Sizing of input groups

Using Multiple Inputs: Multiple inputs could be used with input groups.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
<head>
    <!-- Include Bootstrap CSS -->
  
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <div class="container">
        <h3>Multiple inputs</h3>
  
        <!-- Declare an input group -->
        <div class="input-group">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Define the text content of the group -->
                <span class="input-group-text" id="">First & Last name</span>
            </div>
  
            <!-- Declare two input boxes -->
            <input type="text" class="form-control">
            <input type="text" class="form-control">
        </div>
    </div>
</body>
</html>

chevron_right


Output:
Multiple Inputs

Using Multiple Addons: Multiple addons could be stacked or mixed together with other types, including checkboxes and radio buttons.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
<head>
    <!-- Include Bootstrap CSS -->
  
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <div class="container">
        <h1>Multiple addons</h1>
  
        <!-- Declare an input group -->
        <div class="input-group mb-3">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Declare two input groups -->
                <span class="input-group-text">$</span>
                <span class="input-group-text">0.00</span>
  
            </div>
            <!-- Declare an input box -->
            <input type="text" class="form-control">
        </div>
  
        <!-- Declare an input group -->
        <div class="input-group">
  
            <!-- Declare an input box -->
            <input type="text" class="form-control">
  
            <!-- Append the following content to the input box -->
            <div class="input-group-append">
  
                <!-- Declare two input texts -->
                <span class="input-group-text">$</span>
                <span class="input-group-text">0.00</span>
            </div>
        </div>
    </div>
</body>
</html>

chevron_right


Output:
Multiple Addons

Using Button Addons: Buttons could also be appended or prepended to the input box.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
<head>
    <!-- Include Bootstrap CSS -->
  
    <title>Input Groups in Bootstrap</title>
</head>
<body>
    <div class="container">
        <h1>Button addons</h1>
  
        <!-- Declare an input group -->
        <div class="input-group mb-3">
  
            <!-- Prepend the following content to the input box -->
            <div class="input-group-prepend">
  
                <!-- Declare a buttom -->
                <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
  
            <!-- Declare an input box -->
            <input type="text" class="form-control">
        </div>
  
        <!-- Declare an input group -->
        <div class="input-group mb-3">
  
            <!-- Declare an input box -->            
            <input type="text" class="form-control">
  
            <!-- Append the following content to the input box -->
            <div class="input-group-append">
  
                <!-- Declare a buttom -->
                <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
        </div>
  
        <!-- Declare an input group -->        
        <div class="input-group mb-3">
  
            <!-- Prepend the following content to the input box -->            
            <div class="input-group-prepend">
  
                <!-- Declare two buttons -->
                <button class="btn btn-outline-secondary" type="button">Button 1</button>
                <button class="btn btn-outline-secondary" type="button">Button 2</button>
            </div>
  
            <!-- Declare an input box -->
            <input type="text" class="form-control">
        </div>
  
        <!-- Declare an input group -->             
        <div class="input-group mb-3">
  
            <!-- Declare an input box -->            
            <input type="text" class="form-control">
  
            <!-- Append the following content to the input box -->       
            <div class="input-group-append">
  
                <!-- Declare two buttons -->
                <button class="btn btn-outline-secondary" type="button">Button 1</button>
                <button class="btn btn-outline-secondary" type="button">Button 2</button>
            </div>
        </div>
    </div>
</body>
</html>

chevron_right


Output:
Multiple Buttons

Using Custom Select: Input groups could be used with custom select.

Note: Browser default versions of custom select are not supported.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Include Bootstrap CSS -->
    <title>Input Groups in Bootstrap</title>
</head>
  
<body>
    <div class="container">
        <h3>Custom select</h3>
  
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="select01">Options</label>
            </div>
            <select class="custom-select" id="select01">
                <option selected>Choose...</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </div>
  
        <div class="input-group mb-3">
            <select class="custom-select" id="select02">
                <option selected>Choose...</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
            <div class="input-group-append">
                <label class="input-group-text" for="select02">Options</label>
            </div>
        </div>
    </div>
  
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</body>
</html>

chevron_right


Output:
Custom Select

Using Custom File Input: Input groups could be used with custom file inputs.

Note: Browser default versions of file inputs are not supported.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Include Bootstrap CSS -->
    <title>Input Groups in Bootstrap</title>
</head>
  
<body>
    <div class="container">
        <h3>Custom file input</h3>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Upload</span>
            </div>
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="file01">
                <label class="custom-file-label" for="file01">Choose file</label>
            </div>
        </div>
  
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="file02">
                <label class="custom-file-label" for="file02">Choose file</label>
            </div>
            <div class="input-group-append">
                <span class="input-group-text" id="">Upload</span>
            </div>
        </div>
    </div>
  
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</body>
</html>

chevron_right


Output:
Custom File



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.