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 Panels

A bootstrap panel is used to create bordered box with some padding around its content. It is created with the .panels classes, and .panel-body classes. There are following classes of the panel: Panel header Panel...

4 minutes read.

Bootstrap Protocol (BOOTP)

In the following article, we will learn about the Bootstrap Protocol and how it maintains contracts among linked devices on webwork. What is Bootstrap Protocol? The Bootstrap Protocol is a webwork contract...

3 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 4 Carousel

Bootstrap 4 Carousel Bootstrap 4 offers a carousel component, which is also known as a slider or slideshow. The carousel is used for the dynamic representation of content using images with...

7 minutes read.

Bootstrap 4 Alerts

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

1 minute read.

Bootstrap Glyphicons

Bootstrap Glyphicon is used to create different type of glyphicons It is used in the web project. It provides 260 Glyphicons from the Glyphivons Halflings set. There are various examples of...

1 minute read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap 4 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 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 Grid System

Bootstrap 4 Grid Systems Bootstrap offers a responsive and mobile-first grid system with the help of which we can divide the screen of the web browser into 12 horizontal parts. It has predefined classes...

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

Bootstrap 4 Flex Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement...

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

Text Shadows in CSS

Text shadows are created with the text-shadow CSS property. It takes a list of shadows separated by commas to be applied to the text and any of its styles. Each...

5 minutes read.

Bootstrap 4 Grid System

Bootstrap 4 Grid System The bootstrap 4 grid system is used to create a responsive website layout. The bootstrap 4 offers a mobile-first flexbox grid system that allows you to divide...

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

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Bootstrap 4 Layout

Containers Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers. Bootstrap has...

3 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.