Bootstrap

Bootstrap 4 Input Group Tutorial With Example

18 — 22 min read
+1
Share
Tweet
Share
Pin
0 Shares

In Bootstrap 4 Input Group Tutorial With Example, you will learn to use the Bootstrap input group component. You can add text, icons or buttons before or after any text-based input. You can also add radio button and checkbox.

Bootstrap 4 Input Group Tutorial With Example

Bootstrap input group component is a flexible and powerful component for creating an interactive form controls. But, it is limited to textual input only. Input groups enable you to combine form controls and text on the same line. They are similar to button groups in a sense that, they allow you to align the elements flush opposite each other.

#1: Bootstrap 4 Input Group

The .input-group class is a container to enhance an input by adding text, icon or a button in front of or behind the input field as help text.

Use .input-group-prepend to add the help text in front of the input, and to .input-group-append add it behind the input.

Last, you can add the .input-group-text class to style the specified help text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group</h2>
  <form action="">
  <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Enter Username" id="username" name="username">
    </div>
    <br>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Enter Your Email" id="mail" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@investmentnovel.com</span>
      </div>
    </div>
    <br>  
    <button type="submit" class="btn btn-info">Submit</button>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input group will look like below screenshot.

Bootstrap 4 Input Group Example

#2: Bootstrap 4 Input Group Sizing

You can use class .input-group-sm for the small input groups and class .input-group-lg for the large inputs groups.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group Sizing</h2>
  <form action="">
    <div class="input-group input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">Small</span>
      </div>
      <input type="text" class="form-control" placeholder="Investmentnovel">
    </div>
    <br>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Default</span>
      </div>
      <input type="text" class="form-control" placeholder="Investmentnovel">
    </div>
    <br>
    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text">Large</span>
      </div>
      <input type="text" class="form-control" placeholder="Investmentnovel">
    </div>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input group sizing will look like below screenshot.

Bootstrap 4 Input Group Tutorial

 #3: Bootstrap 4 Multiple Inputs and Helpers

You can add multiple input and addons.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Multiple Input and Addons</h2>
  <form action="">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">Person</span>
      </div>
      <input type="text" class="form-control" placeholder="Enter Name">
      <input type="text" class="form-control" placeholder="Enter Email ID">
    </div>  
    <br>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">A</span>
        <span class="input-group-text">B</span>
        <span class="input-group-text">C</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>
</body>
</html>

The example of a Bootstrap multiple inputs and helpers will look like below screenshot.

Bootstrap 4 Multiple Input and Addons Example

#4: Bootstrap 4 Input Group with Checkbox and Radio Button

You can also use checkboxes and radio buttons instead of text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Checkbox and RadioButton</h2>
  <form action="">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox"> 
        </div>
      </div>
      <input type="text" class="form-control">
    </div>  
    <br>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="radio"> 
        </div>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>
</body>
</html>

The example of a Bootstrap multiple input groups with checkbox and radio button will look like below screenshot.

Bootstrap 4 Input Group With Checkbox and Radiobutton Example

#5: Bootstrap 4 Input Group Buttons

You can add buttons to the form control instead of text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group Button</h2>
  <form action="">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Enter Email">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">SignIn</button>  
     </div>
  </div>  
  </form>
</div>
</body>
</html>

The example of a Bootstrap input group button will look like below screenshot.

Bootstrap 4 Input Group Button Example

#6: Bootstrap 4 Input Group with Dropdown Button

You can also add dropdown menus to the input group.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group with Dropdown Button</h2>
  <form action="">
    <div class="input-group">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">A</a>
          <a class="dropdown-item" href="#">B</a>
          <a class="dropdown-item" href="#">C</a>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Enter Text">
    </div>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input group with dropdown button will look like below screenshot.

Bootstrap 4 Input Group with Dropdown Button Example

#7: Bootstrap 4 Input Group Labels

Put labels outside of an input group, and remember that a value of the for attribute should match the id of the input.

You can click on the label and it will take focus to the input.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Input Group Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Input Group with Labels</h2>
  <form action="">
  <label for="demo">Please Enter your email here:</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@investmentnovel.com</span>
      </div>
    </div>
  </form>
</div>
</body>
</html>

The example of a Bootstrap input group labels button will look like below screenshot.

Bootstrap 4 Input Group Label Example

At last, our Bootstrap 4 Input Group Tutorial With Example is over.

Related Posts

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.