Open In App

Bootstrap 5 Input group Wrapping

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Input group Wrapping help to extend form controls by adding text, or buttons on either side of textual inputs. Input groups are wrapped by default in order to accommodate field validations within an input group. We can disable them using class flex-nowrap.

Bootstrap 5 Input group Wrapping Classes:

  • flex-wrap: To easily wrap the group but the input default wrapped up the Input group.
  • flex-nowrap: To disable wrapping of default wrapped up Input group.

Syntax Without wrap class the input group is flex-wrap.

// To Disable Wrapping
<div class="input-group flex-.nowrap">
 ...
</div>

Example 1: In this example, we will learn about Flex No Wrapping

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link href=
    rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>
<body>
    <div class="container text-center  col-8">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Input group Wrapping</h2>
        <div class="container text-center">
            <div class="card">
                <div class="input-group flex-nowrap mt-3">
                    <input type="text" 
                    class="form-control" 
                    placeholder="I am an Example of Flex-Nowrap" 
                        required>
                    <span class="input-group-text">
                        @geeksforgeeks.org
                    </span>
                </div>
                <div class="input-group flex-nowrap mt-3">
                    <input type="text" 
                    class="form-control" 
                    placeholder="I am an Example of Flex-Nowrap" 
                    required>
                    <button class="btn btn-success">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Bootstrap 5 Input group wrapping

Example 2: In this example,we will see how flex wrapping enables by default.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Load Bootstrap -->
    <link href=
rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
crossorigin="anonymous">
</head>
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Input group Wrapping</h2>
        <div class="container text-center">
            <div class="card">
  
                <div class="input-group  mt-3">
  
                    <input type="text" 
                    class="form-control" 
                    placeholder="I am an Example of Flex Enabled by default "
                        required>
                    <span class="input-group-text">@geeksforgeeks.org</span>
                </div>
                <div class="input-group  mt-3">
  
                    <input type="text" 
                    class="form-control" 
                    placeholder="I am an Example of Flex Enabled by default "
                        required>
                    <button class="btn btn-success">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Bootstrap 5 input group wrapping

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



Last Updated : 08 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads