Bootstrap Input Sizing

Form input fields play a crucial role in user interface design. In this guide from TheCodingCollege.com, you’ll learn how to control the size of form inputs in Bootstrap, ensuring your forms are functional, responsive, and visually appealing.

Bootstrap simplifies input sizing with predefined classes that adjust the width, height, and alignment of form controls. Whether you need compact inputs for a sidebar form or larger fields for better accessibility, Bootstrap has you covered.

Bootstrap Input Sizing Classes Overview

Bootstrap uses two main approaches for sizing inputs:

  1. Width-based sizing using grid classes.
  2. Height-based sizing with specific classes.

Here’s a breakdown of the tools Bootstrap provides:

  1. Input Sizing Classes:
    • form-control-lg: For large input fields.
    • form-control-sm: For small input fields.
    • Default input fields have a standard size.
  2. Grid Classes:
    • Use grid system classes like col-4 or col-6 to control the width of inputs.

Height-Based Input Sizing

Bootstrap provides utility classes for quick input size adjustments.

Example: Large and Small Inputs

<form>
    <div class="form-group">
        <label for="largeInput">Large Input:</label>
        <input type="text" class="form-control form-control-lg" id="largeInput" placeholder="Large input">
    </div>

    <div class="form-group">
        <label for="smallInput">Small Input:</label>
        <input type="text" class="form-control form-control-sm" id="smallInput" placeholder="Small input">
    </div>

    <div class="form-group">
        <label for="defaultInput">Default Input:</label>
        <input type="text" class="form-control" id="defaultInput" placeholder="Default input">
    </div>
</form>

Output:

  • Large Inputs (form-control-lg) are ideal for forms requiring high visibility or touch-friendly controls.
  • Small Inputs (form-control-sm) are perfect for compact designs like search bars or sidebar forms.

Width-Based Input Sizing

For precise width adjustments, Bootstrap’s grid system works seamlessly with form inputs. Combine col- classes with the form-control class to set widths.

Example: Grid-Based Sizing

<form>
    <div class="form-group row">
        <label for="col3Input" class="col-sm-2 col-form-label">Small Width:</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="col3Input" placeholder="3-column wide input">
        </div>
    </div>

    <div class="form-group row">
        <label for="col6Input" class="col-sm-2 col-form-label">Medium Width:</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="col6Input" placeholder="6-column wide input">
        </div>
    </div>

    <div class="form-group row">
        <label for="fullWidthInput" class="col-sm-2 col-form-label">Full Width:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="fullWidthInput" placeholder="Full width input">
        </div>
    </div>
</form>

Key Points:

  • col-sm-* classes define the column size of input fields.
  • Adjust the column size for various screen breakpoints like col-md-* or col-lg-* to ensure responsiveness.

Sizing with Input Groups

Bootstrap’s input groups make it easy to combine inputs with labels or buttons while controlling their size.

Example: Sizing Input Groups

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    </div>
    <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-lg">
</div>

<div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

Output:

  • The input-group-lg and input-group-sm classes align the input size with the group components, like buttons or labels.

Customizing Sizes with CSS

If the predefined classes don’t fit your design requirements, you can apply custom CSS for more control.

Example: Custom Input Size

<style>
    .custom-input-large {
        height: 50px;
        font-size: 18px;
    }

    .custom-input-small {
        height: 25px;
        font-size: 12px;
    }
</style>

<form>
    <div class="form-group">
        <label for="customLargeInput">Custom Large Input:</label>
        <input type="text" class="form-control custom-input-large" id="customLargeInput" placeholder="Custom large input">
    </div>

    <div class="form-group">
        <label for="customSmallInput">Custom Small Input:</label>
        <input type="text" class="form-control custom-input-small" id="customSmallInput" placeholder="Custom small input">
    </div>
</form>

Best Practices for Input Sizing

  1. Consistency is Key: Use consistent sizing for similar input fields to maintain design harmony.
  2. Responsiveness: Combine size classes with Bootstrap’s grid system to optimize for all screen sizes.
  3. Accessibility: Larger inputs improve accessibility for users with touchscreens or visual impairments.
  4. Avoid Overuse: Reserve small inputs for compact areas and large inputs for prominent sections.

Common Use Cases

  1. Large Inputs:
    • Login forms
    • Mobile-first designs
  2. Small Inputs:
    • Compact search bars
    • Sidebar widgets
  3. Grid-Based Inputs:
    • Multi-column forms
    • Complex form layouts

Conclusion

Input sizing in Bootstrap is essential for designing responsive, user-friendly forms. By leveraging height-based classes, the grid system, and custom input groups, you can create forms tailored to your application’s needs.

Leave a Comment