Bootstrap - Input Groups

This chapter will discuss about bootstrap input groups component. A bootstrap input group component is a an extremely versatile and effective form controls for building appealing and visually appealing form controls, however it is only compatible with text input, select, and textarea.

Users may quickly add text, buttons, or button groups to the sides of text inputs, custom selections, and custom file inputs to extend form controls.

Input groups

  • The sections that follow will show users how to add text, icons, and buttons before, after, or on either side of form controls to make the form appear more professional.

  • An icon, sampletext, or a button can be added in front of or behind the input field using the .input-group class, which is a container to enhance inputs.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>Bootstrap - Input Groups </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
 </head>
 <body>

   <div class="container mt-3">    
     <form action="/contact.php">
       <div class="input-group mb-3">
         <span class="input-group-text">@ </span>
         <input type="text" class="form-control" placeholder="Username" name="usrname">
       </div>
  
       <div class="input-group mb-3">
         <input type="text" class="form-control" placeholder="Your Email" name="email">
         <span class="input-group-text">@tutorialspoint.com </span>
       </div>
      
       <button type="submit" class="btn btn-success">Submit </button>
     </form>
   </div>  
   </body>
   </html>

Wrapping

By default, input groups wrap uses the flex-wrap: wrap class to allow for custom form field validation inside the input group. Users can disable this using .flex-nowrap class.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body> 
    <div class="container mt-3">    
      <div class="input-group flex-nowrap">
        <span class="input-group-text" id="addon-wrapping">Email address</span>
        <input type="email" class="form-control" placeholder="name@tutorialspoint.com" aria-label="email id" aria-describedby="addon-wrapping">
      </div>
  </div>  
  </body>
  </html>

Sizing

For small and large input groups, respectively, use the .input-group-sm and .input-group-lg classes.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Input Groups</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
   <div class="container mt-3">
     <div class="input-group input-group-sm mb-3">
       <span class="input-group-text">@small</span>
       <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-sm">
     </div>
     <div class="input-group mb-3">
       <span class="input-group-text">@default</span>
       <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-default">
     </div>
     <div class="input-group input-group-lg mb-3">
       <span class="input-group-text">@large</span>
       <input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-lg">
     </div>
   </div>
   </body>
   </html>

Checkboxes and radios

Insert the text inside the input group's addon using any checkbox or radio button. If there is no text next to the input, we suggest to add .mt-0 to the .form-check-input.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-3">
      <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" placeholder="Item 1">
      </div>     
      <div class="input-group">
        <div class="input-group-text">
          <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button">
        </div>
        <input type="text" class="form-control" placeholder="Item 2">
      </div>
    </div>
    </body>
    </html>

Multiple inputs

Although more than one <input> tags can be displayed visually, validation styles are only offered for input groups with a single <input> tag.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-3">
      <div class="input-group">
        <span class="input-group-text">Student email id and  password </span>
        <input type="text" aria-label=" email id " class="form-control">
        <input type="text" aria-label="password" class="form-control">
      </div>
</div>
</body>
</html>

Multiple addons

Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-3">
      <div class="input-group mb-3">
        <span class="input-group-text">
          <input type="checkbox" class="form-check-input mt-0">
      </span>
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
      <input type="text" class="form-control">
    </div>   
      <div class="input-group mb-3">        
        <input type="text" class="form-control">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
    </div>
  </div>
  </body>
  </html>

Button addons

Users can add or remove buttons from form controls like text. Easily add any number of buttons that you want to the .input-group, as shown in the example below.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
        <div class="row">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Search">
                    <button type="button" class="btn btn-primary">
                        <i class="bi-search"></i>
                    </button>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Type text">
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="clear" class="btn btn-danger">Clear</button>
              </div>
        </div>
    </div>
  </body>
  </html>

Buttons with dropdowns

Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
    <title>Bootstrap - Input Groups </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  
  <body>
    <div class="container mt-4">
      <div class="input-group mb-3">
        <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">Dropdown</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="Dropdown button">
      </div>
  
      <div class="input-group mb-3">
        <input type="text" class="form-control" aria-label="Dropdown button">
        <button class="btn btn-outline-dark 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="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>>
      </div>
  
      <div class="input-group  mb-3">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
          aria-expanded="false">Dropdown</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
        <button class="btn btn-outline-secondary 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="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Others</a></li>
        </ul>
      </div>
    </div>
  </body>
  </html>

Segmented buttons

The same common style that defines a dropdown button is used by segmented buttons to segment dropdowns in input groups. The .btn class is used to create buttons, and the .dropdown-menu class is used to create dropdown menus.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <div class="input-group mb-3">
        <button type="button" class="btn btn-outline-dark">Home</button>
        <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
        <input type="text" class="form-control" aria-label="Segmented dropdown button">
      </div>
      
      <div class="input-group">
        <input type="text" class="form-control" aria-label="Segmented dropdown button">
        <button type="button" class="btn btn-outline-dark">Home</button>
        <button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="#">Home</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Services</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </body>
  </html>

Custom forms

Custom forms are expanded form controls used to gather certain data from website visitors. There are restrictions on the number of different forms you can create using custom forms. There are two types of custom forms:

  • Custom select

  • Custom file input

Users can select or pick from a predefined option using the custom select menu, which is a dropdown menu.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Input Groups </title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container mt-4">
      <div class="input-group mb-3">
        <label class="input-group-text" for="customSelect1">Options</label>
        <select class="form-select" id="customSelect1">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
      </div>
      
      <div class="input-group mb-3">
        <select class="form-select" id="customSelect2">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
        <label class="input-group-text" for="customSelect2">Options</label>
      </div>
      
      <div class="input-group mb-3">
        <button class="btn btn-outline-dark" type="button">Button</button>
        <select class="form-select" id="customSelect3" aria-label="Button addon">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
      </div>
      
      <div class="input-group">
        <select class="form-select" id="customSelect4" aria-label="Button addon">
          <option selected>Select the Subject</option>
          <option value="1">English</option>
          <option value="2">Mathematics</option>
          <option value="3">Science</option>
        </select>
        <button class="btn btn-outline-dark" type="button">Button</button>
      </div>
      </div>
  </body>
  </html>

Custom file input

In custom file input users can choose a file by clicking a button that opens a file to select from your personal computer or server.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html >
  <html lang="en" >
  <head >
     <title >Bootstrap - Input Groups  </title >
     <meta charset="UTF-8" >
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
     <meta name="viewport" content="width=device-width, initial-scale=1.0" >
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" >  </script >
  </head >
  <body >
    <div class="container mt-4" >
      <div class="input-group mb-3" >
        <label class="input-group-text" for="customFileInput1" >Upload </label >
        <input type="file" class="form-control" id="customFileInput1" >
      </div >
     
      <div class="input-group mb-3" >
        <input type="file" class="form-control" id="customFileInput2" >
        <label class="input-group-text" for="customFileInput2" >Upload </label >
      </div >
     
      <div class="input-group mb-3" >
        <button class="btn btn-outline-primary" type="button" id="customFileInput3" >Option Button </button >
        <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="customFileInput3" aria-label="Upload" >
      </div >
     
      <div class="input-group" >
        <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="customFileInput4" aria-label="Upload" >
        <button class="btn btn-outline-primary" type="button" id="customFileInput4" >Option Button </button >
      </div >
      </div >
  </body >
  </html >
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements