What Is The Input Groups In Bootstrap 4

admin_img Posted By Bajarangi soft , Posted On 01-10-2020

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",Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input.

Bootstrap InputGroups

1.Different Types Of Input Groups In Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
    <h3>Input Groups</h3>
    <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front (.input-group-prepend) or behind (.input-group-append) the input field as a "help text".</p>
    <p>Use the .input-group-text class to style the specified help text.</p>

    <form action="/action_page.php">
        <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" id="usr" name="username">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
            <div class="input-group-append">
                <span class="input-group-text">@example.com</span>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

</body>
</html>

2.Multiple Inputs and Helpers Input Group with Checkboxes and Radios Input Group Buttons
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
    <h3>Multiple Inputs and Addons</h3>

    <form>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">Person</span>
            </div>
            <input type="text" class="form-control" placeholder="First Name">
            <input type="text" class="form-control" placeholder="Last Name">
        </div>
    </form>

    <form>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">One</span>
                <span class="input-group-text">Two</span>
                <span class="input-group-text">Three</span>
            </div>
            <input type="text" class="form-control">
        </div>
<h3>Size of the field</h3>
        <div class="input-group mb-3 input-group-sm">
            <div class="input-group-prepend">
                <span class="input-group-text">Small</span>
            </div>
            <input type="text" class="form-control">
        </div>
<!---input group Butons--->
        <div class="container mt-3">
            <h3>Input Group Buttons</h3>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button class="btn btn-outline-primary" type="button">Basic Button</button>
                </div>
                <input type="text" class="form-control" placeholder="Some text">
            </div>

            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-append">
                    <button class="btn btn-success" type="submit">Go</button>
                </div>
            </div>

            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Something clever..">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">OK</button>
                    <button class="btn btn-danger" type="button">Cancel</button>
                </div>
            </div>
        </div>
<h3>Input Groups with Dropdown Button</h3>
        <div class="input-group mt-3 mb-3">
            <div class="input-group-prepend">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                    Dropdown button
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <a class="dropdown-item" href="#">Link 3</a>
                </div>
            </div>
            <input type="text" class="form-control" placeholder="Username">
        </div>

<!--input group labels-->
        <h3>Input Group Labels</h3>
        <label for="demo">Write your email here:</label>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
            <div class="input-group-append">
                <span class="input-group-text">@example.com</span>
            </div>
        </div>
    </form>
</div>
</body>
</html>

 

Related Post