Bootstrap 4 Input Groups

Welcome to The Coding College! Bootstrap 4 Input Groups are a powerful feature that allows you to enhance form inputs with text, buttons, dropdowns, and more. With input groups, you can build user-friendly and interactive forms with ease.

This guide will walk you through everything you need to know about Bootstrap 4 Input Groups, complete with examples and tips for customization.

What Are Input Groups?

Input groups allow you to combine input elements with additional text, icons, or buttons to create a visually appealing form component. You can use the .input-group class along with .input-group-prepend or .input-group-append to add content before or after the input.

Basic Input Group

You can add static text or symbols to an input field using .input-group-prepend or .input-group-append.

Example: Basic Input Group

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap Input Groups</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container mt-5">  
    <h2>Basic Input Group</h2>  
    <form>  
      <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">  
      </div>  
    </form>  
  </div>  
</body>  
</html>

Key Classes:

  • .input-group: Wrapper for the entire input group.
  • .input-group-prepend: Adds content before the input.
  • .input-group-text: Styles the content added to the input.

Input Groups with Buttons

You can combine inputs with buttons to create interactive elements like search boxes.

Example: Input Group with Button

<div class="container mt-5">  
  <h2>Input Group with Button</h2>  
  <form>  
    <div class="input-group mb-3">  
      <input type="text" class="form-control" placeholder="Search">  
      <div class="input-group-append">  
        <button class="btn btn-primary" type="button">Go</button>  
      </div>  
    </div>  
  </form>  
</div>

Explanation:

  • .input-group-append: Adds a button or element after the input field.

Input Groups with Dropdowns

Input groups can include dropdown menus for advanced interactions.

Example: Input Group with Dropdown

<div class="container mt-5">  
  <h2>Input Group with Dropdown</h2>  
  <form>  
    <div class="input-group mb-3">  
      <div class="input-group-prepend">  
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Options</button>  
        <div class="dropdown-menu">  
          <a class="dropdown-item" href="#">Option 1</a>  
          <a class="dropdown-item" href="#">Option 2</a>  
          <a class="dropdown-item" href="#">Option 3</a>  
        </div>  
      </div>  
      <input type="text" class="form-control" placeholder="Enter text">  
    </div>  
  </form>  
</div>

Input Groups with Multiple Add-Ons

You can include multiple elements, such as text and buttons, within the same input group.

Example: Multiple Add-Ons

<div class="container mt-5">  
  <h2>Input Group with Multiple Add-Ons</h2>  
  <form>  
    <div class="input-group mb-3">  
      <div class="input-group-prepend">  
        <span class="input-group-text">$</span>  
        <span class="input-group-text">0.00</span>  
      </div>  
      <input type="text" class="form-control" placeholder="Enter amount">  
      <div class="input-group-append">  
        <button class="btn btn-success" type="button">Submit</button>  
      </div>  
    </div>  
  </form>  
</div>

Input Group Sizes

Adjust the size of input groups using .input-group-sm or .input-group-lg.

Example: Input Group Sizes

<div class="container mt-5">  
  <h2>Input Group Sizes</h2>  

  <div class="input-group input-group-lg mb-3">  
    <div class="input-group-prepend">  
      <span class="input-group-text">@</span>  
    </div>  
    <input type="text" class="form-control" placeholder="Large input">  
  </div>  

  <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="Default input">  
  </div>  

  <div class="input-group input-group-sm">  
    <div class="input-group-prepend">  
      <span class="input-group-text">@</span>  
    </div>  
    <input type="text" class="form-control" placeholder="Small input">  
  </div>  
</div>

Custom Inputs with Input Groups

Bootstrap 4 allows custom file inputs or checkboxes within input groups.

Example: Custom File Input

<div class="container mt-5">  
  <h2>Custom File Input</h2>  
  <form>  
    <div class="input-group mb-3">  
      <div class="input-group-prepend">  
        <span class="input-group-text">Upload</span>  
      </div>  
      <div class="custom-file">  
        <input type="file" class="custom-file-input" id="fileInput">  
        <label class="custom-file-label" for="fileInput">Choose file</label>  
      </div>  
    </div>  
  </form>  
</div>

Conclusion

Bootstrap 4 Input Groups make it simple to create advanced form elements with additional text, buttons, dropdowns, and custom inputs. These features allow you to build interactive and visually appealing forms that enhance user experience.

Leave a Comment