Prev Next

BS5 Input Groups

Bootstrap 5 Input Groups allow you to add text, icons, or buttons before, after, or on both sides of an input field for enhanced functionality and aesthetics.

Key Topics

Basic Input Group

Create a basic input group by wrapping the input field and the additional content in an .input-group container.

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

Explanation: Use .input-group-text to add text or symbols as part of the input group.

Input Group with Buttons

Add buttons to input groups using .btn classes for interactivity.

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

Explanation: Place buttons inside the .input-group container to integrate them with input fields.

Input Group with Dropdowns

Add dropdowns to input groups for more complex functionality.

<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">
        <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" placeholder="Dropdown example" aria-label="Text input with dropdown button">
</div>

Explanation: Use a .dropdown-toggle button and a .dropdown-menu to create dropdown-enabled input groups.

Complete Input Group Example

Below is a complete example showcasing various input group configurations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Input Groups Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Input Groups</h2>
        <div class="input-group mb-3">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username">
            <button class="btn btn-outline-secondary" type="button">Button</button>
        </div>
        <div class="input-group mb-3">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</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" placeholder="Dropdown example">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates multiple configurations of input groups, including text, buttons, and dropdowns.

Key Takeaways

  • Use .input-group to group inputs with additional elements.
  • Add .input-group-text for static content and .btn for interactive buttons.
  • Combine dropdowns with input groups for advanced interactivity.
Prev Next