• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Input Groups

← Previous Next →

Input groups in Bootstrap 4 allow you to combine inputs with additional elements such as text, buttons, or icons. They are useful when you want to provide context, actions, or additional functionality directly within an input field. Using input groups improves the clarity and usability of forms, making it easier for users to understand the expected input and interact with the form efficiently.

Basic Input Group

The simplest input group combines an input field with a prefix or suffix. For example, you may want to add a “@” symbol before a username input to indicate it is a handle.

<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>

Explanation:

  • input-group wraps the input and associated elements.

  • input-group-prepend places elements before the input, while input-group-append places them after.

  • input-group-text is used for static text or symbols.

Adding Buttons to Inputs

You can attach buttons to input fields, providing immediate actions such as search or submission.

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search for products">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Search</button>
  </div>
</div>

  • This combination allows users to type a query and click the button without breaking the form’s visual flow.

  • Buttons can also be prepended to inputs when an action should occur before the input, such as selecting a currency.

Multiple Inputs and Texts

Input groups support multiple prepended or appended elements, which is useful for fields requiring units, currency symbols, or additional guidance.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="number" class="form-control" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

  • Prepending the dollar sign indicates the input expects a monetary value.

  • Appending “.00” adds clarity about the expected format.

Sizing Input Groups

Bootstrap allows you to adjust the size of the input group using input-group-lg or input-group-sm, matching other input sizing options.

<div class="input-group input-group-lg mb-3">
  <input type="text" class="form-control" placeholder="Large input group">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Go</button>
  </div>
</div>

  • Large input groups make key fields more prominent, while small ones are suitable for compact areas like toolbars or modals.

Combining with Selects

Input groups are not limited to text inputs. You can combine them with dropdown selects to create more dynamic forms.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="currencySelect">Currency</label>
  </div>
  <select class="custom-select" id="currencySelect">
    <option selected>Choose...</option>
    <option value="1">USD</option>
    <option value="2">EUR</option>
    <option value="3">INR</option>
  </select>
</div>

  • Using input-group-text with a label ensures accessibility.

  • This setup clearly communicates which field the select element is associated with.

Multiple Inputs in a Single Group

You can add more than one input in a single input group. This is helpful when capturing related data together.

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="First name">
  <input type="text" class="form-control" placeholder="Last name">
</div>

  • Each input shares the same group visually but functions independently.

  • This layout keeps related fields aligned and structured.

Combining Input Groups with Validation

Input groups can also work with validation styles. Applying is-valid or is-invalid directly to the input field provides instant feedback.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control is-invalid" placeholder="Username">
  <div class="invalid-feedback">
    Please choose a valid username.
  </div>
</div>

  • Validation feedback appears correctly even within input groups.

  • It ensures that the additional text or buttons do not interfere with the user experience.

Best Practices for Input Groups

  • Use input groups to provide context, actions, or guidance for a specific input field.

  • Keep the design clear and avoid overcrowding with too many appended or prepended elements.

  • Match the input group size with other form elements for consistency.

  • Always pair input groups with proper labels for accessibility.

  • Test input groups on smaller screens to ensure the layout remains responsive.

Summary of the Tutorial

This tutorial covered Bootstrap 4 input groups and their various uses. You learned:

  • How to prepend or append text or symbols to inputs using input-group-prepend and input-group-append.

  • Adding buttons directly to input fields for immediate actions.

  • Combining multiple inputs or selects within a single group for related data.

  • Adjusting input group sizes with input-group-lg and input-group-sm.

  • Using validation feedback within input groups for better user guidance.

Input groups help create clearer, more interactive, and user-friendly forms, improving the overall user experience and form usability.

Practice Questions

  1. Create an input field with a prepended “@” symbol for a username input.

  2. Build an input group with a text input and a search button appended to it.

  3. Design an input group for entering a monetary value with a prepended “$” and appended “.00”.

  4. Create a large input group with a text field and a Go button using input-group-lg.

  5. Build a small input group for compact forms with a text input and an appended submit button using input-group-sm.

  6. Combine a select dropdown with a prepended label inside an input group to select a currency.

  7. Create an input group with two text inputs side by side for first name and last name.

  8. Build an input group with a prepended symbol and apply is-invalid feedback for validation.

  9. Design an input group with a text input and multiple appended buttons for actions like “Save” and “Clear”.

  10. Create a responsive input group that maintains its layout on smaller screens while including a prepended icon and appended button.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top