Bootstrap Form Inputs

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Stylish Form Inputs

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Form Input classes to create various input types for collecting user data. We’ll pair inputs with images for a vibrant look.

What You’ll Learn

Creating basic text inputs
Using different input types
Styling inputs with sizes
Combining inputs 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 Inputs

Bootstrap Form Inputs use the form-control class to style various input types (text, email, file, etc.), ensuring consistent, responsive design. Labels and other controls enhance usability.

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

Step 2: Create Basic Text Inputs

Start with simple text and email inputs. Use this code:

<div class="container">
    <h3>Basic Text Inputs</h3>
    <form>
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter name">
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
    </form>
</div>

Explanation:

container: Centers and constrains content.
form: Wraps the input elements.
form-label: Styles the input labels.
form-control: Styles inputs with padding, borders, and responsiveness.
mb-3: Adds margin-bottom for spacing.

This creates clean, labeled text inputs.

Step 3: Use Different Input Types

Include other input types like password, file, and range. Try this:

<div class="container">
    <h3>Different Input Types</h3>
    <form>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Enter password">
        </div>
        <div class="mb-3">
            <label for="file" class="form-label">Upload File</label>
            <input type="file" class="form-control" id="file">
        </div>
        <div class="mb-3">
            <label for="volume" class="form-label">Volume</label>
            <input type="range" class="form-range" id="volume">
        </div>
    </form>
</div>

Explanation:

type="password": Hides input text for security.
type="file": Styles a file upload input.
form-range: Styles a range slider.
form-control: Applies to text-based inputs; form-range for sliders.

This showcases diverse input functionalities.

Step 4: Style Inputs with Sizes

Adjust input sizes using form-control-lg or form-control-sm. Add this:

<div class="container">
    <h3>Input Sizes</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="normalInput" class="form-label">Normal Input</label>
            <input type="text" class="form-control" id="normalInput" placeholder="Normal 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 size.
form-control-sm: Decreases input size.
form-control: Default size (no extra class).
mb-3: Spaces inputs vertically.

This demonstrates input size variations.

Step 5: Combine with an Image

Pair inputs with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Profile Inputs</h3>
            <p>Update your details.</p>
            <form>
                <div class="mb-3">
                    <label for="profileName" class="form-label">Username</label>
                    <input type="text" class="form-control" id="profileName" placeholder="Enter username">
                </div>
                <div class="mb-3">
                    <label for="profilePhoto" class="form-label">Profile Photo</label>
                    <input type="file" class="form-control" id="profilePhoto">
                </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: Styles text and file inputs.
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 inputs and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Inputs</h3>
            <form>
                <div class="mb-3">
                    <label for="simpleText" class="form-label">Text</label>
                    <input type="text" class="form-control" id="simpleText" placeholder="Enter text">
                </div>
                <div class="mb-3">
                    <label for="simpleNumber" class="form-label">Number</label>
                    <input type="number" class="form-control" id="simpleNumber" placeholder="Enter number">
                </div>
            </form>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Sized Inputs</h3>
            <form>
                <div class="mb-3">
                    <label for="bigInput" class="form-label">Big Input</label>
                    <input type="text" class="form-control form-control-lg" id="bigInput" placeholder="Big input">
                </div>
                <div class="mb-3">
                    <label for="tinyInput" class="form-label">Tiny Input</label>
                    <input type="text" class="form-control form-control-sm" id="tinyInput" placeholder="Tiny input">
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Settings Form</h3>
            <p>Adjust your preferences.</p>
            <form>
                <div class="mb-3">
                    <label for="settingsEmail" class="form-label">Email</label>
                    <input type="email" class="form-control" id="settingsEmail" placeholder="Enter email">
                </div>
                <div class="mb-3">
                    <label for="settingsRange" class="form-label">Brightness</label>
                    <input type="range" class="form-range" id="settingsRange">
                </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 simple form with text and number inputs.
A form with large and small text inputs.
A settings form with email, range slider, 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-floating for floating labels.
Add is-valid or is-invalid for validation feedback.

Conclusion

You’ve mastered Bootstrap Form Inputs! With classes like form-control, form-range, and form-control-lg, plus striking images, you’ve created versatile, stylish inputs. Keep experimenting to enhance your webpages.