0
0
Bootsrapmarkup~5 mins

Input groups in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Input groups help you add extra things like buttons or text next to input boxes. This makes forms easier to use and understand.

When you want to add a unit like $ or % next to a number input.
When you want a button right next to a text box for quick actions.
When you want to show a fixed prefix or suffix inside an input field.
When you want to group multiple inputs or buttons together neatly.
When you want to improve form layout and user experience.
Syntax
Bootsrap
<div class="input-group">
  <span class="input-group-text">Text or symbol</span>
  <input type="text" class="form-control" placeholder="Your input">
</div>
Use input-group as the container for grouping inputs and addons.
Use input-group-text for static text or symbols next to inputs.
Examples
Adds an '@' symbol before the input box for username.
Bootsrap
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>
Adds a dollar sign after the input box for money amounts.
Bootsrap
<div class="input-group">
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">$</span>
</div>
Places a button before the input box for quick search action.
Bootsrap
<div class="input-group">
  <button class="btn btn-primary" type="button">Go</button>
  <input type="text" class="form-control" placeholder="Search">
</div>
Sample Program

This example shows three input groups: one with '@' before the username input, one with '$' after the amount input, and one with a 'Go' button before the search input. It uses Bootstrap 5.3 for styling and accessibility features like labels and aria attributes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Input Groups Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-5">
    <h1>Input Groups Demo</h1>
    <form>
      <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <div class="input-group">
          <span class="input-group-text" id="basic-addon1">@</span>
          <input type="text" class="form-control" id="username" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>
      </div>
      <div class="mb-3">
        <label for="amount" class="form-label">Amount</label>
        <div class="input-group">
          <input type="text" class="form-control" id="amount" placeholder="Amount" aria-label="Amount">
          <span class="input-group-text">$</span>
        </div>
      </div>
      <div class="mb-3">
        <label for="search" class="form-label">Search</label>
        <div class="input-group">
          <button class="btn btn-primary" type="button">Go</button>
          <input type="text" class="form-control" id="search" placeholder="Search" aria-label="Search">
        </div>
      </div>
    </form>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Always use aria-label or aria-describedby for better accessibility.

Input groups work well with buttons, text, or icons to improve user experience.

Use Bootstrap's spacing classes like mb-3 to add space between form groups.

Summary

Input groups let you add text, symbols, or buttons next to inputs.

They improve form clarity and user interaction.

Bootstrap makes it easy to create input groups with simple classes.