Bootstrap Input Group - Input Groups in Bootstrap with Examples


Bootstrap Input Group

  • The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".
  • To style the specified help text, use the .input-group-text class.
how-to-create-input-group-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
      <span class="input-group-text" id="basic-addon2">@gmail.com</span>
    </div>
    
    <label for="basic-url" class="form-label">Your vanity URL</label>
    <div class="input-group mb-3">
      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
    
    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-text">.00</span>
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Username" aria-label="Username">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="Server" aria-label="Server">
    </div>
    
    <div class="input-group">
      <span class="input-group-text">With textarea</span>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
  </body>
</html>

Output

bootstrap-input-group

Bootstrap Input Group Wrapping

  • Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group flex-nowrap">
      <span class="input-group-text" id="addon-wrapping">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
    </div>
  </body>
</html>

Output

bootstrap-input-group-wrapping

Bootstrap Input Group Sizing

  • Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
      <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
    </div>
    
    <div class="input-group mb-3">
      <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
      <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
    </div>
    
    <div class="input-group input-group-lg">
      <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
      <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
    </div>
  </body>
</html>

Output

bootstrap-input-group-size

Bootstrap Input Group Checkboxes and Radios

  • Checkbox or radio option within an input group’s addon instead of text. We recommend adding .mt-0 to the .form-check-input when there’s no visible text next to the input.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
      </div>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
    
    <div class="input-group">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
      </div>
      <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
  </body>
</html>

Output

bootstrap-input-group-checkbox-radio

Bootstrap Multiple inputs Group

  • While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group">
      <span class="input-group-text">First and last name</span>
      <input type="text" aria-label="First name" class="form-control">
      <input type="text" aria-label="Last name" class="form-control">
    </div>
  </body>
</html>

Output

bootstrap-multiple-input-group-inline

Bootstrap Multiple Addons Group

  • Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
      <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
    </div>
  </body>
</html>

Output

bootstrap-addon

Bootstrap Button addons

  • Bootstrap provides several options for styling and adding functionality to buttons. One such option is button addons. Button addons allow you to add icons or text before or after a button, creating a more flexible and visually appealing interface.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
      <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
      <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
    </div>
    
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </body>
</html>

Output

bootstrap-addon-button

Bootstrap Buttons with dropdowns

  • Bootstrap provides a way to create buttons with dropdowns, allowing you to add a list of options or actions to a button. This can be a useful feature for creating dropdown menus or selecting options from a list.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
      <ul class="dropdown-menu" style="">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
      </ul>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
  </body>
</html>

Output

bootstrap-button-with-dropdown

Bootstrap Segmented buttons

  • Bootstrap segmented buttons are a type of button group in the Bootstrap framework that allows you to group a set of buttons together and display them as a segmented control. Segmented buttons are often used for navigation or filtering purposes.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <button type="button" class="btn btn-outline-secondary">Action</button>
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
      </ul>
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
    </div>
    
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
      <button type="button" class="btn btn-outline-secondary">Action</button>
      <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
      </ul>
    </div>
  </body>
</html>

Output

bootstrap-segmented-button

Bootstrap Custom Select

  • Bootstrap provides a customizable select dropdown component that you can use to create a dropdown list with various options.
  • The Bootstrap custom select is built on top of the standard HTML <select> element, and it allows you to add styles, icons, and custom behavior to the dropdown menu.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupSelect01">Options</label>
      <select class="form-select" id="inputGroupSelect01">
        <option selected="">Choose...</option>
        <option value="1">Kaashiv</option>
        <option value="2">Wikitechy</option>
        <option value="3">KaashivInfotech</option>
      </select>
    </div>
    
    <div class="input-group mb-3">
      <select class="form-select" id="inputGroupSelect02">
        <option selected="">Choose...</option>
        <option value="1">Kaashiv</option>
        <option value="2">Wikitechy</option>
        <option value="3">KaashivInfotech</option>
      </select>
      <label class="input-group-text" for="inputGroupSelect02">Options</label>
    </div>
    
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button">Button</button>
      <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
        <option selected="">Choose...</option>
        <option value="1">Kaashiv</option>
        <option value="2">Wikitechy</option>
        <option value="3">KaashivInfotech</option>
      </select>
    </div>
    
    <div class="input-group">
      <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
        <option selected="">Choose...</option>
        <option value="1">Kaashiv</option>
        <option value="2">Wikitechy</option>
        <option value="3">KaashivInfotech</option>
      </select>
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </body>
</html>

Output

custom-select-form-bootstrap

Bootstrap Custom file input

  • The Bootstrap custom file input allows you to style the file input field, add custom text and icons, and provide feedback to the user when a file is selected.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupFile01">Upload</label>
      <input type="file" class="form-control" id="inputGroupFile01">
    </div>
    
    <div class="input-group mb-3">
      <input type="file" class="form-control" id="inputGroupFile02">
      <label class="input-group-text" for="inputGroupFile02">Upload</label>
    </div>
    
    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
      <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
    </div>
    
    <div class="input-group">
      <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
      <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
    </div>
  </body>
</html>

Output

bootstrap-custom-input-file

Related Searches to Bootstrap Input Group - Input Groups in Bootstrap with Examples

bootstrap 3 input group bootstrap 5 input group input group bootstrap 4 react bootstrap input group bootstrap form control bootstrap input group rounded corners bootstrap form input group html bootstrap 3 input-group bootstrap 5 input-group input-group bootstrap 4 input-group-addon bootstrap input-group width input-group-prepend bootstrap input group width bootstrap input group inline bootstrap input group with floating label bootstrap input group space between bootstrap input group color bootstrap input group not working bootstrap input group vertical bootstrap input group center vue bootstrap input group

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2025 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai