WEB DEVELOPER SITE
htmlCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Input Group


Group shape controls and textual content collectively on a unmarried line.

Input companies enable you to mix form controls and text at the same line. They are similar to button groups in the sense that, they will let you align the factors flush in opposition to each different.

Basic Input Group

You can create an input institution by way of adding .Input-institution class within <div> element. Add the text in the front of the enter by using the use of .Enter-institution-prepend and use .Input-institution-append elegance to add the textual content behind the input. Style the specified textual content through adding .Input-organization-text elegance.

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content = "width = tool-width, initial-scale = 1, decrease-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <hyperlink rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "nameless">
      
      <name>Bootstrap 4 Example</identify>
   </head>
   
   <frame>
      <div class = "field">
         <h2>Input Group</h2>
         <div class = "input-group mb-3">
            <div magnificence = "input-institution-prepend">
               <span elegance = "input-institution-text" id = "simple-addon1">Username@</span>
            </div>
            <input kind = "textual content" class = "form-manage" placeholder = "Username" 
               aria-label = "Username" aria-describedby = "simple-addon1">
         </div>
         
         <div class = "input-organization mb-3">
            <enter type = "textual content" elegance = "form-manage" 
               placeholder = "Recipient's username" aria-label = "Recipient's username" 
               aria-describedby = "primary-addon2">
            <div magnificence = "enter-institution-append">
               <span magnificence = "input-group-text" id = "basic-addon2">@tutorialspoint.Com</span>
            </div>
         </div>
         
         <div magnificence = "enter-institution mb-three">
            <div elegance = "enter-institution-prepend">
               <span elegance = "enter-organization-textual content">Price in $</span>
            </div>
            <input type = "text" magnificence = "form-manage" 
               aria-label = "Amount (to the nearest dollar)">
            
            <div elegance = "enter-group-append">
               <span magnificence = "input-organization-text">.00</span>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-three.Three.1.Slender.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.3/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </frame>
</html>

It will produce the following result −

Output

Input Group Sizing

You can create small input agencies via using .Enter-institution-sm magnificence and big inputs businesses via using .Input-institution-lg elegance as proven in the instance below −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content = "width = tool-width, preliminary-scale = 1, shrink-to-suit = no">
      
      <!-- Bootstrap CSS -->
      <hyperlink rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "nameless">
      
      <title>Bootstrap four Example</name>
   </head>
   
   <frame>
      <div class = "field">
         <h2>Input Group Sizing</h2>
         <div class = "input-group input-institution-lg">
            <div elegance = "enter-group-prepend">
               <span elegance = "input-organization-text" identification = "inputGroup-sizing-lg">@</span>
            </div>
            <enter type = "text" magnificence = "shape-manipulate" aria-label = "Sizing example input" 
               aria-describedby = "inputGroup-sizing-lg" placeholder = "Large Input Group">
         </div>
         <br>
         
         <div elegance = "enter-group mb-3">
            <div class = "input-institution-prepend">
               <span elegance = "input-group-textual content" id = "inputGroup-sizing-default">@</span>
            </div>
            <enter type = "textual content" class = "form-manipulate" aria-label = "Sizing example enter" 
               aria-describedby = "inputGroup-sizing-default" placeholder = "Default Input Group">
         </div>
         
         <div elegance = "input-group input-group-sm mb-3">
            <div magnificence = "input-group-prepend">
               <span magnificence = "enter-organization-text" identity = "inputGroup-sizing-sm">@</span>
            </div>
            <input type = "textual content" class = "shape-manipulate" aria-label = "Sizing instance input" 
               aria-describedby = "inputGroup-sizing-sm" placeholder = "Small Input Group">
         </div>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-3.Three.1.Slender.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </frame>
</html>

It will produce the following result −

Output

Checkbox and Radio Button

You can use checkboxes and radio buttons as opposed to text inside an enter institution as shown within the under example −

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content material = "width = device-width, initial-scale = 1, decrease-to-in shape = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <identify>Bootstrap four Example</title>
   </head>
   
   <frame>
      <div magnificence = "field">
         <h2>Input Group with Checkbox and Radio Button</h2>
         <div class = "input-group mb-3">
            <div magnificence = "input-institution-prepend">
               <div elegance = "input-group-text">
                  <enter kind = "checkbox" aria-label = "Checkbox for following textual content enter">
               </div>
            </div>
            <input kind = "textual content" elegance = "shape-manipulate" 
               aria-label = "Text input with checkbox" placeholder = "Checkbox">
         </div>
         
         <div elegance = "input-group">
            <div magnificence = "input-group-prepend">
               <div magnificence = "enter-organization-text">
                  <enter type = "radio" aria-label = "Radio button for following textual content input">
               </div>
            </div>
            <input type = "text" magnificence = "shape-manipulate" 
               aria-label = "Text input with radio button" placeholder = "Radio button">
         </div>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-three.Three.1.Narrow.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
p>It will produce the subsequent result −

Output

Multiple Inputs

You can add more than one inputs to an enter institution as proven in the example below −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content material = "width = device-width, initial-scale = 1, cut back-to-suit = no">
      
      <!-- Bootstrap CSS -->
      <hyperlink rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <name>Bootstrap four Example</name>
   </head>
   
   <frame>
      <div elegance = "box">
         <h2>Multiple Inputs</h2>
         <div elegance = "enter-group">
            <div elegance = "input-institution-prepend">
               <span magnificence = "input-institution-textual content">User Name and Password</span>
            </div>
            <enter kind = "email" aria-label = "User Name" magnificence = "form-manage">
            <input kind = "password" aria-label = "Password" class = "form-manage">
         </div>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-three.3.1.Narrow.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "nameless">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "nameless">
      </script>
      
   </body>
</html>

It will produce the following end result −

Output

Input Group Buttons and with Dropdown Button

You can upload button in an input organization by using including .Btn elegance within the .Input-group magnificence and additionally you may upload dropdowns in the .Input-group elegance.

The following instance demonstrates adding of enter Group buttons and along with dropdown button −

Example

You can upload button in an input institution by means of adding .Btn elegance inside the .Input-institution magnificence and additionally you may upload dropdowns within the .Input-institution class. The following instance demonstrates including of input Group buttons and along side dropdown button −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta call = "viewport" content = "width = tool-width, initial-scale = 1, reduce-to-suit = no">
      
      <!-- Bootstrap CSS -->
      <hyperlink rel = "stylesheet" 
         href = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/css/bootstrap.Min.Css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "nameless">
      
      <name>Bootstrap 4 Example</identify>
   </head>
   
   <body>
      <div magnificence = "box">
         <h2>Input Group Button</h2>
         <div class = "enter-institution mb-3">
            <div magnificence = "input-group-prepend">
               <button magnificence = "btn btn-define-info" type = "button" 
                  identity = "button-addon1">Button</button>
            </div>
            <enter type = "text" elegance = "form-manipulate" 
               placeholder = "Button in Input Group" 
               aria-label = "Example textual content with button addon" aria-describedby = "button-addon1">
         </div>
         
         <h2>Input Group with Dropdown Button</h2>
         <div elegance = "enter-organization mb-3">
            <div magnificence = "input-organization-prepend">
               <button class = "btn btn-define-data dropdown-toggle" 
                  kind = "button" records-toggle = "dropdown" 
                  aria-haspopup = "authentic" aria-extended = "false">Dropdown</button>
               <div elegance = "dropdown-menu">
                  <a elegance = "dropdown-object" href = "#">Option #1</a>
                  <a class = "dropdown-object" href = "#">Option #2</a>
                  <a elegance = "dropdown-item" href = "#">Option #three</a>
                  <div position = "separator" elegance = "dropdown-divider"></div>
                  <a magnificence = "dropdown-object" href = "#">Option #4</a>
               </div>
            </div>
            <input kind = "textual content" elegance = "shape-control" 
               aria-label = "Text input with dropdown button" 
               placeholder = "Dropdown in Input Group">
         </div>
      </div>
      
      <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
      <script src = "https://code.Jquery.Com/jquery-three.3.1.Slender.Min.Js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.Three/umd/popper.Min.Js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/4.1.Three/js/bootstrap.Min.Js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "nameless">
      </script>
      
   </body>
</html>

It will produce the following result −

Output