Bootstrap 5 Input group Wrapping
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
Please Login to comment...