Bootstrap 5 Input Group Button Addons

Last Updated : 14 Dec, 2022

Bootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs. Input Group Button Addons are used to extend form controls by adding buttons or button groups.

Bootstrap 5 Input group Button Addons Classes: There is no specific class used to create button addons. To create a button, we use .btn class and to create a button group, we use .btn-group class.

Syntax:

<div class="input-group">
    <button class="btn ..." type="button">...</button>
    <input type="text" class="form-control" 
        placeholder="..." aria-label="..."/>
    ...
</div>

Example 1: This example illustrates how to add buttons on the left and right of a text input.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Input group Button Addons</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity= 
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="mt-1"> 
            <h1 class="text-success">GeeksforGeeks</h1> 
            <strong> 
                Bootstrap 5 Input group Button Addons 
            </strong> 
        </div> 
  
        <div class="w-50 mt-5"> 
            <div class="input-group"> 
                <button class="btn btn-danger"> 
                    Check Availability 
                </button> 
                <input type="text" class="form-control" 
                    placeholder="Enter Username" /> 
            </div> 
              
            <div class="input-group mt-4"> 
                <input type="text" class="form-control" 
                    placeholder="Enter Address" /> 
                <button class="btn btn-success"> 
                    Detect Location 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we show how to add continuous buttons on both sides of a text input on the left or right of the inputs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Input group Button Addons</title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity= 
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="container"> 
        <div class="mt-4"> 
            <h1 class="text-success">GeeksforGeeks</h1> 
            <strong>Bootstrap 5 Input group Button Addons</strong> 
        </div> 
        <div class="w-45 mt-5"> 
            <div class="input-group">               
                <button class="btn btn-success"> 
                    Left Button  
                </button> 
                <input type="text" class="form-control" 
                    placeholder="Enter Username"/> 
                <button class="btn btn-danger"> 
                    Right Button 
                </button> 
            </div> 
  
            <div class="input-group mt-3"> 
                <button class="btn btn-success"> 
                    First name 
                </button> 
                <button class="btn btn-danger"> 
                    Middle name 
                </button> 
                <input type="text" class="form-control" 
                    placeholder="Enter Username"/> 
                <button class="btn btn-success"> 
                    Last name 
                </button>                 
            </div>           
        </div> 
    </div> 
</body> 
</html>