Bootstrap Forms

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Stylish Forms

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Form classes to create responsive, user-friendly forms for collecting data. We’ll pair forms with images for a vibrant look.

What You’ll Learn

Creating a basic form
Using form controls (inputs, labels)
Styling with layouts
Combining 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 Forms

Bootstrap Forms use classes like form, form-control, and form-label to style inputs, labels, and layouts. They ensure consistency and responsiveness across devices, ideal for login, registration, or contact forms.

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

Step 2: Create a Basic Form

Start with a simple vertical form. Use this code:

<div class="container">
    <h3>Basic Form</h3>
    <form>
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email">
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Enter password">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

Explanation:

container: Centers and constrains content.
form: Wraps the form elements.
form-label: Styles labels for inputs.
form-control: Styles inputs with padding and borders.
mb-3: Adds margin-bottom for spacing.
btn btn-primary: Blue submit button.

This creates a clean, vertical login form.

Step 3: Use Form Controls

Add more controls like checkboxes and selects. Try this:

<div class="container">
    <h3>Form with Controls</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="role" class="form-label">Role</label>
            <select class="form-select" id="role">
                <option selected>Select role</option>
                <option>Admin</option>
                <option>User</option>
            </select>
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="subscribe">
                <label class="form-check-label" for="subscribe">Subscribe to newsletter</label>
            </div>
        </div>
        <button type="submit" class="btn btn-success">Save</button>
    </form>
</div>

Explanation:

form-select: Styles the dropdown menu.
form-check and form-check-input: Style the checkbox.
form-check-label: Labels the checkbox.
btn btn-success: Green submit button.

This form includes diverse input types.

Step 4: Style with Inline Layout

Create an inline form for compact layouts. Add this:

<div class="container">
    <h3>Inline Form</h3>
    <form class="row g-3">
        <div class="col-auto">
            <label for="search" class="form-label">Search</label>
            <input type="text" class="form-control" id="search" placeholder="Keyword">
        </div>
        <div class="col-auto">
            <label for="category" class="form-label">Category</label>
            <select class="form-select" id="category">
                <option selected>All</option>
                <option>Books</option>
                <option>Electronics</option>
            </select>
        </div>
        <div class="col-auto align-self-end">
            <button type="submit" class="btn btn-info">Search</button>
        </div>
    </form>
</div>

Explanation:

row g-3: Creates a horizontal form with gutter spacing.
col-auto: Sizes columns to fit content.
form-control and form-select: Style inputs and dropdowns.
align-self-end: Aligns the button with input bottoms.
btn btn-info: Cyan submit button.

This form is compact and horizontal.

Step 5: Combine with an Image

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

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Contact Form</h3>
            <p>Send us a message.</p>
            <form>
                <div class="mb-3">
                    <label for="contactName" class="form-label">Name</label>
                    <input type="text" class="form-control" id="contactName" placeholder="Enter name">
                </div>
                <div class="mb-3">
                    <label for="message" class="form-label">Message</label>
                    <textarea class="form-control" id="message" rows="4" placeholder="Your message"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Send</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 on textarea: Styles the multiline input.
rows="4": Sets textarea height.
Uses a 200×150 green image for vibrancy.

The image suggests a contact page context.

Final Code

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

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Form</h3>
            <form>
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="Enter username">
                </div>
                <button type="submit" class="btn btn-secondary">Submit</button>
            </form>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Inline Search Form</h3>
            <form class="row g-3">
                <div class="col-auto">
                    <label for="query" class="form-label">Query</label>
                    <input type="text" class="form-control" id="query" placeholder="Search term">
                </div>
                <div class="col-auto align-self-end">
                    <button type="submit" class="btn btn-info">Go</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Registration Form</h3>
            <p>Create an account.</p>
            <form>
                <div class="mb-3">
                    <label for="regEmail" class="form-label">Email</label>
                    <input type="email" class="form-control" id="regEmail" placeholder="Enter email">
                </div>
                <div class="mb-3">
                    <label for="regPassword" class="form-label">Password</label>
                    <input type="password" class="form-control" id="regPassword" placeholder="Enter password">
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="terms">
                        <label class="form-check-label" for="terms">Agree to terms</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-success">Register</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 vertical form with a text input and gray button.
An inline search form with a text input and cyan button.
A registration form with email, password, checkbox, green button, and a red image (250×150).
All forms are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Forms Docs for more options.
Try form-floating for floating labels.
Add form validation with was-validated class.

Conclusion

You’ve mastered Bootstrap Forms! With classes like form-control, form-select, and form-check, plus striking images, you’ve created stylish, user-friendly forms. Keep experimenting to enhance your webpages.