Forms

Examples and usage guidelines for form control styles, layout options, and custom components.

Form Controls

Textual form controls with custom styles, sizing, focus states, and more.

We'll never share your information with anyone else.
<div class="mb-3">
    <label for="exampleInput" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInput" placeholder="name@example.com">
</div>
<div class="mb-3">
    <label for="examplePassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="examplePassword">
</div>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder="Large input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder="Small input">

Disabled

Add the disabled boolean attribute to give it a grayed out appearance.

<input class="form-control" type="text" placeholder="Disabled input" disabled>
<input class="form-control" type="text" value="Disabled readonly" disabled readonly>

Readonly

Add the readonly boolean attribute to prevent modification.

<input class="form-control" type="text" value="Readonly input" readonly>

Textarea

Create multi-line text inputs with <textarea>.

<div class="mb-3">
    <label for="textarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="textarea1" rows="3"></textarea>
</div>

Select

Customize the native <select> with custom CSS.

<select class="form-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<select class="form-select" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Checks & Radios

Create consistent cross-browser and cross-device checkboxes and radios.

Checkboxes

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check1">
    <label class="form-check-label" for="check1">Default checkbox</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check2" checked>
    <label class="form-check-label" for="check2">Checked checkbox</label>
</div>

Radio Buttons

<div class="form-check">
    <input class="form-check-input" type="radio" name="radio1" id="radio1" checked>
    <label class="form-check-label" for="radio1">Default radio</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio1" id="radio2">
    <label class="form-check-label" for="radio2">Second radio</label>
</div>

Inline

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inline1">
    <label class="form-check-label" for="inline1">1</label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class.

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">Default switch</label>
</div>

Range

Create custom range inputs with .form-range.

<label for="range1" class="form-label">Example range</label>
<input type="range" class="form-range" id="range1">

<input type="range" class="form-range" min="0" max="5" id="range2">

Input Groups

Easily extend form controls by adding text, buttons, or button groups.

Basic Examples

@
@example.com
$ .00
With textarea 
<div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>

With Buttons

<div class="input-group">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text" class="form-control">
</div>

Sizing

Small
Default
Large 
<div class="input-group input-group-sm">
    <span class="input-group-text">Small</span>
    <input type="text" class="form-control">
</div>

Floating Labels

Create beautifully simple form labels that float over your input fields.

<div class="form-floating">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
</div>

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation.

Valid State

Looks good!
<input type="text" class="form-control is-valid" value="Correct value">
<div class="valid-feedback">Looks good!</div>

Invalid State

Please provide a valid input.
<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">Please provide a valid input.</div>

Full Example

Looks good!
Looks good!
Please provide a valid email.
You must agree before submitting.
<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="validFirstName" class="form-label">First name</label>
        <input type="text" class="form-control is-valid" id="validFirstName" required>
        <div class="valid-feedback">Looks good!</div>
    </div>
    <button type="submit">Submit</button>
</form>

Login Form Card

Modern login form with social authentication options and clean card design.

Welcome Back

Forgot password?
or continue with

Don't have an account? Sign up 

<div class="card form-card">
    <div class="form-icon">
        <i class="bi bi-person-circle"></i>
    </div>
    <h3 class="text-center mb-4">Welcome Back</h3>

    <form>
        <div class="mb-3">
            <label for="loginEmail" class="form-label">Email address</label>
            <div class="input-with-icon">
                <i class="bi bi-envelope"></i>
                <input type="email" class="form-control" id="loginEmail">
            </div>
        </div>

        <div class="mb-3">
            <label for="loginPassword" class="form-label">Password</label>
            <div class="input-with-icon">
                <i class="bi bi-lock"></i>
                <input type="password" class="form-control" id="loginPassword">
            </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="rememberMe">
                <label class="form-check-label" for="rememberMe">Remember me</label>
            </div>
            <a href="#">Forgot password?</a>
        </div>

        <button type="submit" class="btn btn-primary w-100">Login</button>

        <div class="divider"><span>or continue with</span></div>

        <div class="d-flex gap-2">
            <button type="button" class="social-btn">
                <i class="bi bi-google"></i>
            </button>
            <button type="button" class="social-btn">
                <i class="bi bi-github"></i>
            </button>
            <button type="button" class="social-btn">
                <i class="bi bi-facebook"></i>
            </button>
        </div>
    </form>
</div>

Register Form Card

Registration form with password strength indicator and social signup options.

Create Account

Password strength: Medium
or sign up with

Already have an account? Login 

<div class="card form-card">
    <div class="form-icon">
        <i class="bi bi-person-plus-fill"></i>
    </div>
    <h3 class="text-center mb-4">Create Account</h3>

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

        <div class="mb-3">
            <label for="registerEmail" class="form-label">Email address</label>
            <input type="email" class="form-control" id="registerEmail">
        </div>

        <div class="mb-3">
            <label for="registerPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="registerPassword">
            <div class="password-strength">
                <div class="password-strength-bar"></div>
            </div>
        </div>

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

Contact Form

Professional contact form with file attachment support and clean layout.

Get In Touch

<div class="card form-card form-card-wide">
    <h3 class="text-center mb-4">Get In Touch</h3>

    <form>
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="contactName" class="form-label">Your Name</label>
                <input type="text" class="form-control" id="contactName">
            </div>
            <div class="col-md-6">
                <label for="contactEmail" class="form-label">Your Email</label>
                <input type="email" class="form-control" id="contactEmail">
            </div>
        </div>

        <div class="mb-3">
            <label for="contactSubject" class="form-label">Subject</label>
            <select class="form-select" id="contactSubject">
                <option>General Inquiry</option>
                <option>Technical Support</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="contactMessage" class="form-label">Message</label>
            <textarea class="form-control" id="contactMessage" rows="5"></textarea>
        </div>

        <div class="mb-4">
            <label for="contactAttachment" class="form-label">Attachment</label>
            <input type="file" class="form-control" id="contactAttachment">
        </div>

        <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
</div>

Profile Settings Form

Comprehensive user profile form with avatar upload and preference settings.

Profile Settings

Personal Information
Preferences
Notification Preferences
<div class="card form-card form-card-wide">
    <h3 class="text-center mb-4">Profile Settings</h3>

    <form>
        <div class="avatar-upload">
            <i class="bi bi-person-circle"></i>
            <div class="camera-overlay">
                <i class="bi bi-camera-fill"></i>
            </div>
        </div>

        <h5 class="mb-3">Personal Information</h5>
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="profileName" class="form-label">Full Name</label>
                <input type="text" class="form-control" id="profileName">
            </div>
            <div class="col-md-6">
                <label for="profileEmail" class="form-label">Email Address</label>
                <input type="email" class="form-control" id="profileEmail">
            </div>
        </div>

        <h5 class="mb-3">Preferences</h5>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="emailNotif">
            <label class="form-check-label" for="emailNotif">Email Notifications</label>
        </div>

        <button type="submit" class="btn btn-primary">Save Changes</button>
    </form>
</div>

Search Filter Form

Flexible filter forms in both horizontal inline and vertical sidebar layouts.

Horizontal Inline Filters

<form class="card p-3">
    <div class="row g-3 align-items-end">
        <div class="col-md-3">
            <label for="filterCategory" class="form-label">Category</label>
            <select class="form-select form-select-sm" id="filterCategory">
                <option>All Categories</option>
            </select>
        </div>
        <div class="col-md-2">
            <label for="filterPrice" class="form-label">Price Range</label>
            <select class="form-select form-select-sm" id="filterPrice">
                <option>Any Price</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Apply</button>
    </div>
</form>

Vertical Sidebar Filters

Filters
Category
Price Range
$0 $500
Rating
Date Range
<div class="filter-sidebar">
    <h5 class="mb-3">Filters</h5>

    <form>
        <div class="filter-section">
            <h6 class="mb-3">Category</h6>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="cat1">
                <label class="form-check-label" for="cat1">Electronics</label>
            </div>
        </div>

        <div class="filter-section">
            <h6 class="mb-3">Price Range</h6>
            <input type="range" class="form-range" min="0" max="500">
        </div>

        <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
    </form>
</div>