Bootstrap 5 Input group Sizing

Bootstrap 5 Input group Sizing is used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs. In this article, we will learn about Input group sizing.

Input Group sizing helps us to create input groups of small, large, or default sizes.

Bootstrap 5 Input group Sizing Classes:

input-group-sm: This class is used for the smaller size of the input group.
input-group-lg: This class is used for the large size of the input group.

Syntax:

<div class="input-group input-group-sm">
    Content
</div>

Example 1: In this example, we will learn about the input group default size and small size.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <!-- Bootstrap CDN -->

    <link href= 

"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 

          rel="stylesheet"

          integrity= 

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 

          crossorigin="anonymous"> 

</head> 

<body class="m-2"> 

    <div class="container"> 

        <h1 class="text-success"> 

            GeeksforGeeks 

        </h1> 

        <h2>Bootstrap 5 Input group Sizing</h2> 

        <div class="input-group mb-3"> 

            <input type="text" 

                   class="form-control" 

                   placeholder="Default Input Group "> 

        </div> 

        <div class="input-group input-group-sm "> 

            <input type="text" 

                   class="form-control" 

                   placeholder="Small Input Group"> 

        </div> 

    </div> 

</body> 

</html>

Output:

Example 2: In this example, we will learn about default, large and small sizes together.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <!-- Bootstrap CDN -->

    <link href= 

"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 

          rel="stylesheet"

          integrity= 

"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 

          crossorigin="anonymous"> 

</head> 

<body class="m-2"> 

    <div class="container"> 

        <h1 class="text-success"> 

            GeeksforGeeks 

        </h1> 

        <h2>Bootstrap 5 Input group Sizing</h2> 

        <div class="input-group input-group-sm mb-3"> 

            <input type="text" class="form-control"

                   placeholder="Small Input Group"> 

        </div> 

        <div class="input-group mb-3"> 

            <input type="text" class="form-control"

                   placeholder="Default Input Group "> 

        </div> 

        <div class="input-group input-group-lg "> 

            <input type="text" class="form-control" 

                   placeholder="Large Input Group"> 

        </div> 

    </div> 

</body> 

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#sizing

Article Tags :

Bootstrap

Technical Scripter

Web Technologies

Technical Scripter 2022