Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Form Layouts in Bootstrap 5
Form Layouts: Learn different ways to arrange form elements using Bootstrap's grid system and layout utilities.
Vertical Form (Default)
Stacked Form Layout
<!-- Vertical Form Layout -->
<form>
<!-- Stacked form groups -->
<div class="mb-3">
<label for="verticalEmail" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="verticalEmail"
placeholder="name@example.com"
>
</div>
<div class="mb-3">
<label for="verticalPassword" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="verticalPassword"
placeholder="Password"
>
</div>
<div class="mb-3">
<label for="verticalTextarea" class="form-label">Message</label>
<textarea
class="form-control"
id="verticalTextarea"
rows="3"
placeholder="Your message..."
></textarea>
</div>
<!-- Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="verticalCheck">
<label class="form-check-label" for="verticalCheck">
Remember me
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>Horizontal Form
Aligned Form Layout
<!-- Horizontal Form Layout -->
<form>
<!-- Row with label and input -->
<div class="row mb-3">
<label for="horizontalEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input
type="email"
class="form-control"
id="horizontalEmail"
placeholder="name@example.com"
>
</div>
</div>
<!-- Password row -->
<div class="row mb-3">
<label for="horizontalPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input
type="password"
class="form-control"
id="horizontalPassword"
placeholder="Password"
>
</div>
</div>
<!-- Select row -->
<div class="row mb-3">
<label for="horizontalSelect" class="col-sm-2 col-form-label">Country</label>
<div class="col-sm-10">
<select class="form-select" id="horizontalSelect">
<option selected>Choose...</option>
<option value="1">United States</option>
</select>
</div>
</div>
<!-- Radio buttons row -->
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="horizontalRadios" id="horizontalRadio1">
<label class="form-check-label" for="horizontalRadio1">
First radio
</label>
</div>
</div>
</fieldset>
<!-- Checkbox with offset -->
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="horizontalCheck">
<label class="form-check-label" for="horizontalCheck">
Remember me
</label>
</div>
</div>
</div>
<!-- Submit button with offset -->
<div class="row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>Inline Form
Inline Form Layout
Inline Form with Different Column Sizes
<!-- Inline Form Layout -->
<form class="row row-cols-lg-auto g-3 align-items-center">
<!-- Name input -->
<div class="col-12">
<label class="visually-hidden" for="inlineFormInput">Name</label>
<input
type="text"
class="form-control"
id="inlineFormInput"
placeholder="Jane Doe"
>
</div>
<!-- Input group -->
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input
type="text"
class="form-control"
id="inlineFormInputGroup"
placeholder="Username"
>
</div>
</div>
<!-- Select dropdown -->
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelect">Preference</label>
<select class="form-select" id="inlineFormSelect">
<option selected>Choose...</option>
<option value="1">One</option>
</select>
</div>
<!-- Submit button -->
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Alternative Inline Form -->
<form class="row g-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="inlineFormInput2">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput2" placeholder="Jane Doe">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</form>Multi-column Form Layout
Grid-based Form Layouts
<!-- Multi-column Form Layout -->
<form>
<!-- Two-column row -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="gridFirstName" class="form-label">First Name</label>
<input
type="text"
class="form-control"
id="gridFirstName"
placeholder="First name"
required
>
</div>
<div class="col-md-6 mb-3">
<label for="gridLastName" class="form-label">Last Name</label>
<input
type="text"
class="form-control"
id="gridLastName"
placeholder="Last name"
required
>
</div>
</div>
<!-- Address row (8-4 split) -->
<div class="row">
<div class="col-md-8 mb-3">
<label for="gridAddress" class="form-label">Address</label>
<input
type="text"
class="form-control"
id="gridAddress"
placeholder="1234 Main St"
required
>
</div>
<div class="col-md-4 mb-3">
<label for="gridApt" class="form-label">Apt/Suite</label>
<input
type="text"
class="form-control"
id="gridApt"
placeholder="Apartment"
>
</div>
</div>
<!-- City/State/Zip row (6-4-2 split) -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="gridCity" class="form-label">City</label>
<input
type="text"
class="form-control"
id="gridCity"
placeholder="City"
required
>
</div>
<div class="col-md-4 mb-3">
<label for="gridState" class="form-label">State</label>
<select class="form-select" id="gridState" required>
<option selected>Choose...</option>
<option>California</option>
</select>
</div>
<div class="col-md-2 mb-3">
<label for="gridZip" class="form-label">Zip</label>
<input
type="text"
class="form-control"
id="gridZip"
placeholder="Zip"
required
>
</div>
</div>
</form>Form with Columns and Gutters
Responsive Grid with Spacing
<!-- Form with Gutters -->
<form class="row g-3">
<!-- First row: Two columns -->
<div class="col-md-6">
<label for="gutterFirstName" class="form-label">First name</label>
<input
type="text"
class="form-control"
id="gutterFirstName"
placeholder="First name"
>
</div>
<div class="col-md-6">
<label for="gutterLastName" class="form-label">Last name</label>
<input
type="text"
class="form-control"
id="gutterLastName"
placeholder="Last name"
>
</div>
<!-- Full-width email -->
<div class="col-12">
<label for="gutterEmail" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="gutterEmail"
placeholder="name@example.com"
>
</div>
<!-- Address row: Three columns -->
<div class="col-md-6">
<label for="gutterCity" class="form-label">City</label>
<input type="text" class="form-control" id="gutterCity" placeholder="City">
</div>
<div class="col-md-4">
<label for="gutterState" class="form-label">State</label>
<select class="form-select" id="gutterState">
<option selected>Choose...</option>
<option>California</option>
</select>
</div>
<div class="col-md-2">
<label for="gutterZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="gutterZip" placeholder="Zip">
</div>
<!-- Full-width checkbox -->
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gutterCheck">
<label class="form-check-label" for="gutterCheck">
I agree to terms
</label>
</div>
</div>
<!-- Submit button -->
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>Form with Fieldset and Legend
Grouped Form Sections
<!-- Form with Fieldset and Legend -->
<form>
<!-- Personal Information Section -->
<fieldset class="border p-3 rounded mb-4">
<legend class="float-none w-auto px-2">Personal Information</legend>
<div class="row g-3">
<div class="col-md-6">
<label for="fieldsetFirstName" class="form-label">First Name</label>
<input
type="text"
class="form-control"
id="fieldsetFirstName"
placeholder="First name"
>
</div>
<div class="col-md-6">
<label for="fieldsetLastName" class="form-label">Last Name</label>
<input
type="text"
class="form-control"
id="fieldsetLastName"
placeholder="Last name"
>
</div>
</div>
</fieldset>
<!-- Shipping Address Section -->
<fieldset class="border p-3 rounded mb-4">
<legend class="float-none w-auto px-2">Shipping Address</legend>
<div class="row g-3">
<div class="col-12">
<label for="fieldsetAddress" class="form-label">Street Address</label>
<input
type="text"
class="form-control"
id="fieldsetAddress"
placeholder="1234 Main St"
>
</div>
</div>
</fieldset>
<!-- Submit button -->
<button type="submit" class="btn btn-primary w-100">Complete Order</button>
</form>Form Layout Best Practices
Choosing the Right Form Layout
- Vertical forms: Best for complex forms, mobile-first designs, and forms with many fields
- Horizontal forms: Good for data-heavy applications, desktop interfaces, and forms with few fields
- Inline forms: Perfect for search forms, filters, and simple data entry
- Multi-column forms: Great for long forms, registration forms, and forms with logical groupings
- Fieldset forms: Ideal for complex forms with distinct sections (e.g., checkout forms)
Common Layout Mistakes
- ❌ Using horizontal forms on mobile without proper responsive design
- ❌ Creating forms that are too wide (hard to scan and read)
- ❌ Not grouping related fields together
- ❌ Using too many columns on small screens
- ❌ Not providing enough spacing between form elements
- ❌ Forgetting to test form layouts on different screen sizes
- ❌ Using inline forms for complex data entry
Responsive Form Design
Mobile-first Form Layouts
<!-- Responsive Form Design -->
<form>
<!-- Stacked on mobile, side-by-side on desktop -->
<div class="row">
<div class="col-12 col-md-6 mb-3">
<label for="responsiveFirstName" class="form-label">First Name</label>
<input
type="text"
class="form-control"
id="responsiveFirstName"
placeholder="First name"
>
</div>
<div class="col-12 col-md-6 mb-3">
<label for="responsiveLastName" class="form-label">Last Name</label>
<input
type="text"
class="form-control"
id="responsiveLastName"
placeholder="Last name"
>
</div>
</div>
<!-- Full width on all screens -->
<div class="mb-3">
<label for="responsiveEmail" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="responsiveEmail"
placeholder="name@example.com"
>
</div>
<!-- Stacked on mobile, side-by-side on desktop -->
<div class="row">
<div class="col-12 col-md-8 mb-3 mb-md-0">
<label for="responsiveAddress" class="form-label">Address</label>
<input
type="text"
class="form-control"
id="responsiveAddress"
placeholder="1234 Main St"
>
</div>
<div class="col-12 col-md-4">
<label for="responsiveApt" class="form-label">Apt/Suite</label>
<input
type="text"
class="form-control"
id="responsiveApt"
placeholder="Apt, studio, or floor"
>
</div>
</div>
<!-- Full width button on mobile, auto width on desktop -->
<button type="submit" class="btn btn-primary w-100 w-md-auto">
Submit Form
</button>
</form>