VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-input-group-sizing/

⇱ Bootstrap 5 Input group Sizing - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

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.

Output:

👁 Image
 

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

Output:

👁 Image
 

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

Comment

Explore