Bootstrap Forms

Overview

Bootstrap provides rich form controls and styles to help you create beautiful, consistent, and easy-to-use forms. Forms are an important way for users to interact with websites.

Basic Forms

Form Controls

Bootstrap provides styling for all native form controls:

<form>
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">
            Remember me
        </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Controls

Input Fields

<div class="mb-3">
    <label for="basicInput" class="form-label">Basic Input</label>
    <input type="text" class="form-control" id="basicInput" placeholder="Enter text">
</div>

<div class="mb-3">
    <label for="emailInput" class="form-label">Email Input</label>
    <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
</div>

<div class="mb-3">
    <label for="passwordInput" class="form-label">Password Input</label>