Bootstrap Input Sizing

21 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Size Your Form Inputs

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Form Sizing classes to adjust the size of form inputs and controls for better usability and design. We’ll pair forms with images for a vibrant look.

What You’ll Learn

Using default input sizes
Applying large and small input sizes
Sizing other form controls
Combining sized forms with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Form Sizing

Bootstrap Form Sizing uses classes like form-control-lg and form-control-sm to adjust the height and padding of inputs, selects, and other controls. These classes ensure responsive, consistent styling across form elements.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Use Default Input Sizes

Start with a form using default-sized inputs. Use this code:

<div class="container">
    <h3>Default Input Size</h3>
    <form>
        <div class="mb-3">
            <label for="defaultInput" class="form-label">Name</label>
            <input type="text" class="form-control" id="defaultInput" placeholder="Enter name">
        </div>
        <div class="mb-3">
            <label for="defaultSelect" class="form-label">Category</label>
            <select class="form-select" id="defaultSelect">
                <option selected>Choose...</option>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
    </form>
</div>

Explanation:

container: Centers and constrains content.
form: Wraps the form elements.
form-control: Styles the input with default size.
form-select: Styles the select dropdown with default size.
mb-3: Adds margin-bottom for spacing.

This creates a form with standard-sized inputs.

Step 3: Apply Large and Small Input Sizes

Adjust input sizes with form-control-lg and form-control-sm. Try this:

<div class="container">
    <h3>Large and Small Inputs</h3>
    <form>
        <div class="mb-3">
            <label for="largeInput" class="form-label">Large Input</label>
            <input type="text" class="form-control form-control-lg" id="largeInput" placeholder="Large input">
        </div>
        <div class="mb-3">
            <label for="smallInput" class="form-label">Small Input</label>
            <input type="text" class="form-control form-control-sm" id="smallInput" placeholder="Small input">
        </div>
    </form>
</div>

Explanation:

form-control-lg: Increases input height and padding.
form-control-sm: Decreases input height and padding.
form-control: Base class for styling inputs.
mb-3: Spaces inputs vertically.

This shows how to scale inputs up or down.

Step 4: Size Other Form Controls

Apply sizing to selects and textareas. Add this:

<div class="container">
    <h3>Sized Form Controls</h3>
    <form>
        <div class="mb-3">
            <label for="largeSelect" class="form-label">Large Select</label>
            <select class="form-select form-select-lg" id="largeSelect">
                <option selected>Choose...</option>
                <option>Option A</option>
                <option>Option B</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="smallTextarea" class="form-label">Small Textarea</label>
            <textarea class="form-control form-control-sm" id="smallTextarea" rows="3" placeholder="Enter text"></textarea>
        </div>
    </form>
</div>

Explanation:

form-select-lg: Enlarges the select dropdown.
form-control-sm on textarea: Shrinks the textarea.
rows="3": Sets textarea height.
mb-3: Adds spacing between controls.

This demonstrates sizing for non-input controls.

Step 5: Combine with an Image

Pair a sized form with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Profile Form</h3>
            <p>Update your details.</p>
            <form>
                <div class="mb-3">
                    <label for="profileInput" class="form-label">Username</label>
                    <input type="text" class="form-control form-control-lg" id="profileInput" placeholder="Enter username">
                </div>
                <div class="mb-3">
                    <label for="profileBio" class="form-label">Bio</label>
                    <textarea class="form-control form-control-sm" id="profileBio" rows="3" placeholder="Enter bio"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Save</button>
            </form>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into form (8 units) and image (4 units).
form-control-lg and form-control-sm: Size the input and textarea differently.
btn btn-primary: Blue submit button.
Uses a 200×150 green image for vibrancy.

The image suggests a profile update context.

Final Code

Here’s a combined example with varied sized inputs and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Default Size Form</h3>
            <form>
                <div class="mb-3">
                    <label for="defaultText" class="form-label">Text</label>
                    <input type="text" class="form-control" id="defaultText" placeholder="Enter text">
                </div>
            </form>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Large and Small Controls</h3>
            <form>
                <div class="mb-3">
                    <label for="bigSelect" class="form-label">Large Select</label>
                    <select class="form-select form-select-lg" id="bigSelect">
                        <option selected>Choose...</option>
                        <option>Value 1</option>
                        <option>Value 2</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="smallInput" class="form-label">Small Input</label>
                    <input type="text" class="form-control form-control-sm" id="smallInput" placeholder="Small input">
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Settings Form</h3>
            <p>Customize your preferences.</p>
            <form>
                <div class="mb-3">
                    <label for="settingsEmail" class="form-label">Email</label>
                    <input type="email" class="form-control form-control-lg" id="settingsEmail" placeholder="Enter email">
                </div>
                <div class="mb-3">
                    <label for="settingsBio" class="form-label">Bio</label>
                    <textarea class="form-control form-control-sm" id="settingsBio" rows="3" placeholder="Enter bio"></textarea>
                </div>
                <button type="submit" class="btn btn-success">Apply</button>
            </form>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A default-sized form with a text input.
A form with a large select dropdown and a small text input.
A settings form with a large email input, small textarea, green button, and a red image (250×150).
All inputs are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Form Controls Docs for more options.
Try form-control with form-floating for floating labels.
Use col-form-label-lg to size labels with inputs.

Conclusion

You’ve mastered Bootstrap Form Sizing! With classes like form-control-lg, form-control-sm, and form-select-lg, plus striking images, you’ve created beautifully sized form inputs. Keep experimenting to enhance your webpages.