Bootstrap

Bootstrap Input Sizing

Bootstrap Input Sizing

✅ 1. Default Input Size

By default, inputs using the .form-control class will take up the full width of their container.

html
<input type="text" class="form-control" placeholder="Default input">

2. Small Input (.form-control-sm)

Use this class for a more compact input field.

html
<input type="text" class="form-control form-control-sm" placeholder="Small input">

3. Large Input (.form-control-lg)

Use this class for a larger, more prominent input field.

html
<input type="text" class="form-control form-control-lg" placeholder="Large input">

4. Custom Width Using Grid or Utilities

If you want to control the width, not just the height (size), you can use:

  • Bootstrap’s grid system

  • Utility classes like .w-50, .w-75, .w-100, or inline styles

Example using grid:

html
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="50% width input">
</div>
</div>

Example using utility:

html
<input type="text" class="form-control w-75" placeholder="75% width input">

5. Sizing in Input Groups

When using .input-group, apply the size class to both .form-control and .input-group.

html
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Small input group">
</div>

<div class="input-group input-group-lg mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Large input group">
</div>

Summary Table

Class Size Height
.form-control Default Standard
.form-control-sm Small Reduced
.form-control-lg Large Increased

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *