Bootstrap 5 Framework

Advanced Form Layouts

13 min Lesson 21 of 40

Introduction to Advanced Form Layouts

Creating effective form layouts requires understanding how to combine Bootstrap's grid system with form components. Advanced layouts include multi-column forms, responsive designs, auto-sizing elements, and complex form structures. This lesson covers techniques for building professional, accessible, and user-friendly forms.

Note: Advanced form layouts leverage Bootstrap 5's grid system, flex utilities, and spacing utilities to create responsive, well-organized forms.

Multi-Column Forms with Grid

Use Bootstrap's grid system to create multi-column form layouts:

<form>
    <div class="row mb-3">
        <div class="col-md-6">
            <label for="firstName" class="form-label">First Name</label>
            <input type="text" class="form-control" id="firstName" required>
        </div>
        <div class="col-md-6">
            <label for="lastName" class="form-label">Last Name</label>
            <input type="text" class="form-control" id="lastName" required>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-8">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" required>
        </div>
        <div class="col-md-4">
            <label for="age" class="form-label">Age</label>
            <input type="number" class="form-control" id="age" min="18" required>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-4">
            <label for="city" class="form-label">City</label>
            <input type="text" class="form-control" id="city" required>
        </div>
        <div class="col-md-4">
            <label for="state" class="form-label">State</label>
            <select class="form-select" id="state" required>
                <option value="">Choose...</option>
                <option>California</option>
                <option>Texas</option>
                <option>New York</option>
            </select>
        </div>
        <div class="col-md-4">
            <label for="zip" class="form-label">Zip Code</label>
            <input type="text" class="form-control" id="zip" required>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12">
            <label for="address" class="form-label">Street Address</label>
            <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="agreeTerms" required>
                <label class="form-check-label" for="agreeTerms">
                    I agree to the terms and conditions
                </label>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>
                

Tip: Use col-md-* classes to create forms that stack on mobile and display side-by-side on larger screens. Always test responsive layouts at different breakpoints.

Form Row

Use row with g-* gutter utilities for compact form layouts:

<form>
    <!-- Compact row with smaller gutters -->
    <div class="row g-2 mb-3">
        <div class="col-md">
            <div class="form-floating">
                <input type="text" class="form-control" id="floatingInputGrid1" placeholder="First name">
                <label for="floatingInputGrid1">First name</label>
            </div>
        </div>
        <div class="col-md">
            <div class="form-floating">
                <input type="text" class="form-control" id="floatingInputGrid2" placeholder="Last name">
                <label for="floatingInputGrid2">Last name</label>
            </div>
        </div>
    </div>

    <div class="row g-2 mb-3">
        <div class="col-md-8">
            <div class="form-floating">
                <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
                <label for="floatingEmail">Email address</label>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-floating">
                <select class="form-select" id="floatingSelectGrid">
                    <option selected>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
                <label for="floatingSelectGrid">Select</label>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>
                

Auto-Sizing

Use column classes without defined widths to auto-size form elements based on content:

<form class="row gy-2 gx-3 align-items-center">
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInput">Name</label>
        <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
        </div>
    </div>
    <div class="col-auto">
        <label class="visually-hidden" for="autoSizingSelect">Preference</label>
        <select class="form-select" id="autoSizingSelect">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="col-auto">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoSizingCheck">
            <label class="form-check-label" for="autoSizingCheck">
                Remember me
            </label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
                

Note: col-auto sizes columns based on their natural content width. Use visually-hidden to hide labels visually while keeping them accessible to screen readers.

Complex Form Example: Registration

A comprehensive registration form combining multiple layout techniques:

<form class="needs-validation" novalidate>
    <!-- Personal Information Section -->
    <h4 class="mb-3">Personal Information</h4>
    <div class="row g-3 mb-4">
        <div class="col-sm-6">
            <label for="regFirstName" class="form-label">First name</label>
            <input type="text" class="form-control" id="regFirstName" required>
            <div class="invalid-feedback">
                Valid first name is required.
            </div>
        </div>

        <div class="col-sm-6">
            <label for="regLastName" class="form-label">Last name</label>
            <input type="text" class="form-control" id="regLastName" required>
            <div class="invalid-feedback">
                Valid last name is required.
            </div>
        </div>

        <div class="col-12">
            <label for="regEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="regEmail" placeholder="you@example.com" required>
            <div class="invalid-feedback">
                Please enter a valid email address.
            </div>
        </div>

        <div class="col-12">
            <label for="regPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="regPassword" minlength="8" required>
            <div class="form-text">Must be at least 8 characters long.</div>
            <div class="invalid-feedback">
                Password is required and must be at least 8 characters.
            </div>
        </div>

        <div class="col-12">
            <label for="regConfirmPassword" class="form-label">Confirm Password</label>
            <input type="password" class="form-control" id="regConfirmPassword" required>
            <div class="invalid-feedback">
                Please confirm your password.
            </div>
        </div>
    </div>

    <!-- Address Section -->
    <h4 class="mb-3">Address</h4>
    <div class="row g-3 mb-4">
        <div class="col-12">
            <label for="regAddress" class="form-label">Address</label>
            <input type="text" class="form-control" id="regAddress" placeholder="1234 Main St" required>
            <div class="invalid-feedback">
                Please enter your shipping address.
            </div>
        </div>

        <div class="col-12">
            <label for="regAddress2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
            <input type="text" class="form-control" id="regAddress2" placeholder="Apartment or suite">
        </div>

        <div class="col-md-5">
            <label for="regCountry" class="form-label">Country</label>
            <select class="form-select" id="regCountry" required>
                <option value="">Choose...</option>
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
            </select>
            <div class="invalid-feedback">
                Please select a valid country.
            </div>
        </div>

        <div class="col-md-4">
            <label for="regState" class="form-label">State</label>
            <select class="form-select" id="regState" required>
                <option value="">Choose...</option>
                <option>California</option>
                <option>Texas</option>
                <option>New York</option>
            </select>
            <div class="invalid-feedback">
                Please provide a valid state.
            </div>
        </div>

        <div class="col-md-3">
            <label for="regZip" class="form-label">Zip</label>
            <input type="text" class="form-control" id="regZip" required>
            <div class="invalid-feedback">
                Zip code required.
            </div>
        </div>
    </div>

    <!-- Preferences Section -->
    <h4 class="mb-3">Preferences</h4>
    <div class="mb-4">
        <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" role="switch" id="regNewsletter">
            <label class="form-check-label" for="regNewsletter">
                Send me newsletters and promotions
            </label>
        </div>
        <div class="form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" role="switch" id="regNotifications" checked>
            <label class="form-check-label" for="regNotifications">
                Enable email notifications
            </label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="regPublicProfile">
            <label class="form-check-label" for="regPublicProfile">
                Make my profile public
            </label>
        </div>
    </div>

    <hr class="my-4">

    <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="regTerms" required>
        <label class="form-check-label" for="regTerms">
            I agree to the terms and conditions
        </label>
        <div class="invalid-feedback">
            You must agree before submitting.
        </div>
    </div>

    <button class="w-100 btn btn-primary btn-lg" type="submit">Create Account</button>
</form>
                

Complex Form Example: Multi-Step Wizard

Create a multi-step form with tab-like navigation:

<div class="container">
    <!-- Progress indicator -->
    <ul class="nav nav-pills mb-4">
        <li class="nav-item">
            <a class="nav-link active" href="#step1">1. Account</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#step2">2. Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#step3">3. Confirm</a>
        </li>
    </ul>

    <form>
        <!-- Step 1: Account Information -->
        <div class="step-content" id="step1">
            <h4 class="mb-3">Account Information</h4>
            <div class="row g-3">
                <div class="col-12">
                    <label for="wizardEmail" class="form-label">Email</label>
                    <input type="email" class="form-control" id="wizardEmail" required>
                </div>
                <div class="col-12">
                    <label for="wizardUsername" class="form-label">Username</label>
                    <input type="text" class="form-control" id="wizardUsername" required>
                </div>
                <div class="col-12">
                    <label for="wizardPassword" class="form-label">Password</label>
                    <input type="password" class="form-control" id="wizardPassword" required>
                </div>
            </div>
            <div class="mt-4">
                <button type="button" class="btn btn-primary">Next Step &rarr;</button>
            </div>
        </div>

        <!-- Step 2: Profile Information (hidden by default) -->
        <div class="step-content d-none" id="step2">
            <h4 class="mb-3">Profile Information</h4>
            <div class="row g-3">
                <div class="col-sm-6">
                    <label for="wizardFirstName" class="form-label">First Name</label>
                    <input type="text" class="form-control" id="wizardFirstName" required>
                </div>
                <div class="col-sm-6">
                    <label for="wizardLastName" class="form-label">Last Name</label>
                    <input type="text" class="form-control" id="wizardLastName" required>
                </div>
                <div class="col-12">
                    <label for="wizardBio" class="form-label">Bio</label>
                    <textarea class="form-control" id="wizardBio" rows="3"></textarea>
                </div>
            </div>
            <div class="mt-4">
                <button type="button" class="btn btn-secondary">&larr; Previous</button>
                <button type="button" class="btn btn-primary">Next Step &rarr;</button>
            </div>
        </div>

        <!-- Step 3: Confirmation (hidden by default) -->
        <div class="step-content d-none" id="step3">
            <h4 class="mb-3">Confirm Your Information</h4>
            <p>Please review your information before submitting.</p>
            <div class="alert alert-info">
                Review your details and click Submit to complete registration.
            </div>
            <div class="mt-4">
                <button type="button" class="btn btn-secondary">&larr; Previous</button>
                <button type="submit" class="btn btn-success">Submit</button>
            </div>
        </div>
    </form>
</div>
                

Tip: For multi-step forms, save form data as users progress through steps. Consider using JavaScript to handle step navigation and validation before allowing progression.

Accessibility Best Practices

Ensure your advanced forms are accessible to all users:

<form>
    <!-- Use fieldset and legend for grouping -->
    <fieldset class="mb-4">
        <legend class="h5">Contact Preferences</legend>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="emailContact">
            <label class="form-check-label" for="emailContact">Email</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="phoneContact">
            <label class="form-check-label" for="phoneContact">Phone</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="smsContact">
            <label class="form-check-label" for="smsContact">SMS</label>
        </div>
    </fieldset>

    <!-- Use aria-describedby for help text -->
    <div class="mb-3">
        <label for="accessibleInput" class="form-label">Username</label>
        <input type="text" class="form-control" id="accessibleInput" aria-describedby="usernameHelp" required>
        <div id="usernameHelp" class="form-text">
            Your username must be 3-20 characters and contain only letters and numbers.
        </div>
    </div>

    <!-- Use aria-required for required fields -->
    <div class="mb-3">
        <label for="requiredField" class="form-label">
            Required Field <span class="text-danger" aria-label="required">*</span>
        </label>
        <input type="text" class="form-control" id="requiredField" aria-required="true" required>
    </div>

    <!-- Use role and aria-live for dynamic validation messages -->
    <div class="mb-3">
        <label for="dynamicInput" class="form-label">Email</label>
        <input type="email" class="form-control" id="dynamicInput">
        <div class="invalid-feedback" role="alert" aria-live="polite">
            Please provide a valid email.
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>
                

Warning: Always test your forms with screen readers and keyboard navigation. Accessibility is not optional - it's a requirement for professional web development.

Exercise: Create a Job Application Form

Create a comprehensive job application form with the following requirements:

Personal Information Section:
- Full name (two columns: first and last)
- Email and phone (two columns)
- LinkedIn URL (full width)
Address Section:
- Street address (full width)
- City, State, Zip (three columns: 5/4/3)
Position Details Section:
- Position applied for (dropdown with 5+ options)
- Desired salary range (two number inputs: min/max)
- Available start date (date input)
Experience Section:
- Years of experience (range slider 0-20)
- Previous employer (text input)
- Cover letter (textarea, 500 char max)
Additional Information:
- Resume upload (file input, PDF only)
- Switch for "Willing to relocate"
- Checkbox for "I authorize background check"
Use proper fieldsets for grouping
Include validation for all required fields
Add helpful form text where appropriate
Ensure full accessibility with ARIA attributes
Make the form responsive (stack on mobile, multi-column on desktop)

Best Practices for Advanced Forms

Group related fields logically using sections or fieldsets
Use appropriate column widths based on expected input length
Maintain consistent spacing throughout the form
Consider mobile experience - test all breakpoints
Use floating labels for clean, modern designs
Provide clear visual hierarchy with headings and spacing
Always validate both client-side and server-side
Show progress indicators for multi-step forms
Save user input as they progress through long forms
Provide clear, actionable error messages
Use appropriate input types for better mobile keyboards
Test forms with real users to identify usability issues
Implement proper focus management and keyboard navigation
Use ARIA attributes for enhanced accessibility
Consider progressive disclosure for complex forms

Summary

In this lesson, you mastered advanced form layouts in Bootstrap 5, including multi-column forms with the grid system, form rows with custom gutters, auto-sizing columns, complex real-world examples, multi-step wizards, and accessibility best practices. These techniques enable you to create professional, user-friendly forms that work seamlessly across all devices and provide an excellent user experience.

You've now completed Module 5: Components - Buttons & Forms! You should be comfortable creating various button styles, building complete forms with validation, and implementing complex form layouts. Practice these skills by building real-world forms for different use cases.