Open In App

Bootstrap 4 | Input Groups

Last Updated : 04 May, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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 side 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.

Example: 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Input Groups in Bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <h1 style="color:green;text-align:center;">
        GeeksforGeeks
    </h1>
    <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>
 






                        










Output: 




Sizing of the Input Groups: The input groups could be made larger or smaller by using additional classes. There are three 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 used as the default size.
    • 



Note: The sizing on individual input group elements is currently not supported.


Example:  




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


<head>


    <title>Input Groups in Bootstrap</title>


    <meta charset="utf-8">


    <meta name="viewport"


        content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


    <script src=


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">


    </script>


    <script src=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">


    </script>


</head>


<body>


    <h1 style="color:green;text-align:center;">


        GeeksforGeeks


    </h1>


    <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>



















                        







                        










Output: 




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


Example:  




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


<head>


    <title>Input Groups in Bootstrap</title>


    <meta charset="utf-8">


    <meta name="viewport"


        content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


    <script src=


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">


    </script>


    <script src=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">


    </script>


</head>


<body>


    <h1 style="color:green;text-align:center;">


        GeeksforGeeks


    </h1>


    <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>



















                        







                        










Output: 




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


Example:  




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


<head>


    <title>Input Groups in Bootstrap</title>


    <meta charset="utf-8">


    <meta name="viewport"


        content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


    <script src=


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">


    </script>


    <script src=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">


    </script>


</head>


<body>


    <h1 style="color:green;text-align:center;">


        GeeksforGeeks


    </h1>


    <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>



















                        







                        










Output: 




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


Example:  




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


<head>


    <title>Input Groups in Bootstrap</title>


    <meta charset="utf-8">


    <meta name="viewport"


        content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


    <script src=


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">


    </script>


    <script src=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">


    </script>


</head>


<body>


    <h1 style="color:green;text-align:center;">


        GeeksforGeeks


    </h1>


    <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 button -->


                <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 button -->


                <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>



















                        







                        










Output: 




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


Note: The default versions of custom select are not supported by browsers.


Example:  




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


<head>


    <title>Input Groups in Bootstrap</title>


    <meta charset="utf-8">


    <meta name="viewport"


        content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


    <script src=


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">


    </script>


    <script src=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">


    </script>


</head>


<body>


    <h1 style="color:green;text-align:center;">


        GeeksforGeeks


    </h1>


    <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>


</body>


</html>



















                        







                        










Output: 




Using Custom File Input:


Input groups could be used with custom file inputs. 


Note: 


Browser default versions of file inputs are not supported.


Example:  




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


<head>


    <title>Input Groups in Bootstrap</title>


    <meta charset="utf-8">


    <meta name="viewport"


        content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


    <script src=


"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">


    </script>


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">


    </script>


    <script src=


"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">


    </script>


</head>


<body>


    <h1 style="color:green;text-align:center;">


        GeeksforGeeks


    </h1>


    <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>


</body>


</html>



















                        







                        










Output: 




 



                            
                            
                        


                                                                              

                                        

                                                                                

                                                                

                            
                                

                                
                                        Next Article
                                        
                                    
                                    
                                    

                                        Bootstrap 4 | Jumbotron
                                    

                                

                                                        

                        

                            

                                        

                                            

                                                

                                                

                                                    
V

        

            
        

        

                                                

                                                

                                                    Vishal_Khoda                                                

                                                

                                                

            
                                            

                                            
                                        

                                        

                                            
                                            

                                                
                                                
                                            

                                            
                                                                            

                                    Improve
                                    
                                

                            
                                        

                        

                        

                                                            

                                    
Article Tags : 

                                    
                                                                    

                                                                                        

                                    
Practice Tags : 

                                    
                                                                    

                                                    

                        


                                                

                        
                                                 

                                
Similar Reads

                                

                                    
                                

                            

                        


                                                

                                

                                    
                                                                    

                            


                        

                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

                

        

            

                

                    

                    
                
 
                
                            

                                

                            


                            


            

        
  

        

                




	
	
	

	
	
	
	    

	
	

	
	



                
        

    

    

        

            

            

        

    
















	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox