Logo

Bootstrap Input groups

Bootstrap 4 Input groups

The input group is a component of Bootstrap 4, which is used to create interactive and stylish form controls. With the help of input groups, you can easily customize the input fields. It provides style to the form control by adding icon, text, buttons, and button groups at both ends of the input field.

Bootstrap offers two predefined classes that are used to add the styling components at both sides of the input fields; these classes are :

  • .input-group-prepend class
  • .input-group-append class

Steps for Creating Prepended and Appended Inputs

  • Add the .input-group class to the <div> element. This class acts as a container and enhance the input field by adding icons, text, buttons, etc.
  • Add the .input-group-prepend class to the <div> element to put the add-ons at the beginning of the input field.

OR

  • Add the .input-group-append class to the <div> element to put the add-ons at the end of the input field.
  • Add the .input-group-text class to the <span> element to provide the style.

Note: If you want to provide a proper bottom margin to the input groups, then use mb-3 utility.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css">
 </head>
 <body> 
 <div class="container mt-3">
   <h3>Input Groups</h3>
   <form action="/action_page.php">
     <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" id="usr" name="username">
     </div>
     <div class="input-group mb-3">
       <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
       <div class="input-group-append"> 
         <span class="input-group-text">@example.com</span>
       </div>
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Input groups

Input Group Sizing - You can also customize the size of the input groups as per the requirement. Bootstrap 4 offers two classes that are used to resize the input groups. These classes are .input-group-sm class and .input-group-lg class.

To resize the input groups,

  • Add the .input-group-sm class along with the .input-group class to the <div> element to create small input groups.
  • Add the .input-group-lg class along with the .input-group class to the <div> element to create large input groups.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container mt-3">
   <h1>Input Group Size</h1>
   <form>
     <div class="input-group mb-3 input-group-sm">
       <div class="input-group-prepend">
         <span class="input-group-text">Small</span> 
       </div>
       <input type="text" class="form-control">
     </div>
   </form>
   <form>
     <div class="input-group mb-3">
       <div class="input-group-prepend"> 
         <span class="input-group-text">Default</span>
       </div>
       <input type="text" class="form-control">
     </div>
   </form>
   <form>
     <div class="input-group mb-3 input-group-lg"> 
       <div class="input-group-prepend">
         <span class="input-group-text">Large</span>
       </div>
       <input type="text" class="form-control">
     </div>
   </form>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Input groups

Input groups with Checkboxes and Radio Buttons – You can also place the checkboxes and radio buttons instead of icons and text at the beginning and end of the input group.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container mt-3">
   <h3>Input Group with Checkboxes and Radios</h3>
   <form>
     <div class="input-group mb-3">
       <div class="input-group-prepend">
         <div class="input-group-text"> 
           <input type="checkbox"> 
         </div>
       </div>
       <input type="text" class="form-control" placeholder="Some text">
     </div>
   </form>
   <form>
     <div class="input-group mb-3">
       <div class="input-group-prepend"> 
         <div class="input-group-text">
           <input type="radio"> 
         </div>
       </div>
       <input type="text" class="form-control" placeholder="Some text">
     </div>
   </form>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Input groups

Input Group Buttons – You can also add buttons instead of text and icons at the beginning and end of the input groups as per the need.

To create the input group buttons at the beginning of the input field, you need to add the .input-group-prepend class to the <div> element. Add the .btn class along with the contextual button class to the <button> element.

To create the input group buttons at the end of the input field, you need to add the .input-group-append class to the <div> element. Add the .btn class along with the contextual button class to the <button> element.

Note:  You can create more than one button at a time by just adding the <button> element along with its classes.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container mt-3">
   <h1>Input Group Buttons</h1>
   <div class="input-group mb-3">
     <div class="input-group-prepend">
       <button class="btn btn-outline-primary" type="button">Button</button>  
     </div> 
   <div class="input-group mb-3">
     <input type="text" class="form-control" placeholder="OK/Cancel">
     <div class="input-group-append">
       <button class="btn btn-primary" type="button">OK</button>  
       <button class="btn btn-danger" type="button">Cancel</button>  
      </div>
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Input groups

Input Group with Dropdown Button – Dropdowns buttons can also be added at any side of the input field. The dropdown is used within the input field in case you want to give option/choice to the user or you want to perform more than one task by using the button.

To create a input group with dropdown button, firstly create a button by adding the <button> element along with the .btn class and contextual button class. Then add the .dropdown-menu class to the <div> element. And add the .dropdown-item class to the <a> element for creating dropdown links.

Note: There is no need to add the .dropdown class as a wrapper class. 

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container mt-3">
   <h3>Input Groups with Dropdown Button</h3>
   <form>
     <div class="input-group mt-3 mb-3">
       <div class="input-group-prepend">
         <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"> 
           Dropdown button
         </button>
         <div class="dropdown-menu">
           <a class="dropdown-item" href="#">Link 1</a>
           <a class="dropdown-item" href="#">Link 2</a>
           <a class="dropdown-item" href="#">Link 3</a>
         </div> 
       </div>
       <input type="text" class="form-control" placeholder="Username">
     </div>
     <div class="input-group mb-3">
       <input type="text" class="form-control" placeholder="Search">
         <div class="input-group-append">
           <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"> 
           Dropdown button
           </button>
           <div class="dropdown-menu">
             <a class="dropdown-item" href="#">Link 1</a>
             <a class="dropdown-item" href="#">Link 2</a>
             <a class="dropdown-item" href="#">Link 3</a>
           </div>  
         </div> 
     </div>
   </form>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Input groups

Input Group Labels – Bootstrap provides the class that helps you to add the label outside the input groups. These labels specify what the user is desired to enter in the input field.

To create the labels outside the input field, you have to add the <label> element with the for attribute.

Note: The value of the for attribute within the <label> element and the value of the id attribute within the <input> element must be the same.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css">
 </head>
 <body> 
         <span class="input-group-text">@xyz.com</span>
       </div>
     </div>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>
Bootstrap Input groups

Output

Multiple Inputs – You can also add multiple inputs (side-by-side) in a single line along with the add-ons like text, icon, button, etc.

Example

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Input Groups Example</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.4.1/css/bootstrap.min.css">
 </head>
 <body> 
 <div class="container mt-3">
   <h3>Multiple Inputs and Addons</h3>
   <form>
     <div class="input-group mb-3">
       <div class="input-group-prepend">
         <span class="input-group-text">Person</span>
       </div>
       <input type="text" class="form-control" placeholder="First Name"> 
       <input type="text" class="form-control" placeholder="Last Name">
     </div>  
   </form>
   <form>
     <div class="input-group mb-3">
       <div class="input-group-prepend">
         <span class="input-group-text">Text 1</span>
         <span class="input-group-text">Text 2</span> 
         <span class="input-group-text">Text 3</span>
       </div>
       <input type="text" class="form-control" placeholder="Type here...">
     </div>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap Input groups

Related Topics

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.

Bootstrap Buttons Groups

Bootstrap 4 Button Group Bootstrap 4 provides a feature button group that helps in creating a series of buttons together in a group. Basic Button Group  The .btn-group class is used within the <div> tag to create a...

6 minutes read.

Bootstrap 4 Modal

Bootstrap 4 Modal The Modal is a component of Bootstrap 4, which is a dialog box or pop-up window. The modals are used to provide information or warning to the user, such as...

18 minutes read.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap Images

Bootstrap 4 Images Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images. Image Shapes Rounded Corners Bootstrap 4 offers .rounded class that makes the corners...

5 minutes read.

Bootstrap 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

13 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.

Bootstrap 4 Toast

Bootstrap 4 Toast Bootstrap 4 offers a Toast component, which is quite similar to the alert box and pushes notifications. The toast is visible on the screen for a few seconds when any...

5 minutes read.

Bootstrap 4 Content

Typography Typography is used for styling and formatting the content. It also helps in creating customized headings, sub-headings, lists, paragraphs, etc. Headings Bootstrap 4 offers HTML heading <h1> to <h6> that has bolder...

8 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes read.

Bootstrap 4 Form

Bootstrap 4 Forms Bootstrap 4 provides forms, which are one of the essential components for web pages and web applications. It is an input-based component, used to collect user data with the help of...

8 minutes read.

Difference between bootstrap.css and bootstrap-theme.css

The "bootstrap.css" uses to create a website with pre-existing designs and context. It uses basic Bootstrap classes like rows and columns with a CSS styling tool. The website is styled...

5 minutes read.

Bootstrap 4 Scrollspy

Bootstrap 4 Scrollspy Bootstrap 4 offers a scrollspy component that is used to make the website more attractive and eye-catching. Basically, the scrollspy is used on the single-page website. The scrollspy highlights the nav...

5 minutes read.

Bootstrap 4 Pagination

Bootstrap 4 Pagination Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website. In pagination, there is a block...

9 minutes read.

Bootstrap Toast Example

What are toasts? Toasts are similar to notifications, and they are lightweight and act as push notifications from mobile and desktop operating systems. They’re built using flexbox in Bootstrap. They can...

4 minutes read.

Bootstrap 4 Progress Bar

Bootstrap Progress Bar Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the...

9 minutes read.

Bootstrap 4 Dropdowns

Bootstrap Dropdowns Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown...

15 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap 4 Grid Classes

Bootstrap 4 Grid Classes Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on...

8 minutes read.