Bootstrap 5 Input group Sizing
Last Updated :
14 Dec, 2022
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 >
< link href =
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 >
< link href =
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...