Layout
Arrange fields with stacked, grid, horizontal and inline form layouts. Combine fieldsets, cards and action bars to build long forms that stay easy to follow on any screen size.
1Stacked form
The simplest layout: one field per row with mb-3 spacing.
<form style="max-width: 30rem;">
<div class="mb-3">
<label for="st-name-256" class="form-label">Name</label>
<input type="text" class="form-control" id="st-name-256">
</div>
<div class="mb-3">
<label for="st-email-257" class="form-label">Email</label>
<input type="email" class="form-control" id="st-email-257">
</div>
<div class="mb-3">
<label for="st-msg-258" class="form-label">Message</label>
<textarea class="form-control" id="st-msg-258" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>2Grid row
Two equal columns from the md breakpoint, stacked below it.
<div class="row g-3">
<div class="col-md">
<label for="gr-first-259" class="form-label">First name</label>
<input type="text" class="form-control" id="gr-first-259" value="Isla">
</div>
<div class="col-md">
<label for="gr-last-260" class="form-label">Last name</label>
<input type="text" class="form-control" id="gr-last-260" value="Ashford">
</div>
</div>3Address grid with gutters
row g-3 with mixed column widths builds a complete address form.
<form class="row g-3">
<div class="col-md-6">
<label for="ga-email-261" class="form-label">Email</label>
<input type="email" class="form-control" id="ga-email-261">
</div>
<div class="col-md-6">
<label for="ga-pass-262" class="form-label">Phone</label>
<input type="tel" class="form-control" id="ga-pass-262">
</div>
<div class="col-12">
<label for="ga-street-263" class="form-label">Address</label>
<input type="text" class="form-control" id="ga-street-263" placeholder="235 Riverside Drive">
</div>
<div class="col-md-6">
<label for="ga-city-264" class="form-label">City</label>
<input type="text" class="form-control" id="ga-city-264">
</div>
<div class="col-md-4">
<label for="ga-state-265" class="form-label">State</label>
<select id="ga-state-265" class="form-select">
<option selected>Choose...</option>
<option>Colorado</option>
<option>Texas</option>
<option>Oregon</option>
</select>
</div>
<div class="col-md-2">
<label for="ga-zip-266" class="form-label">ZIP</label>
<input type="text" class="form-control" id="ga-zip-266">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ga-check-267">
<label class="form-check-label" for="ga-check-267">Billing address is the same</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Save address</button>
</div>
</form>4Horizontal form
Labels in col-sm-3 columns with col-form-label, fields in the remaining width.
<form>
<div class="row mb-3">
<label for="hz-email-268" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="hz-email-268">
</div>
</div>
<div class="row mb-3">
<label for="hz-pass-269" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="hz-pass-269">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-3 pt-0">Account type</legend>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="radio" name="hz-radio-270" id="hz-r1-271" checked>
<label class="form-check-label" for="hz-r1-271">Personal</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="hz-radio-270" id="hz-r2-272">
<label class="form-check-label" for="hz-r2-272">Business</label>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-9 offset-sm-3">
<button type="submit" class="btn btn-primary">Continue</button>
</div>
</div>
</form>5Horizontal label sizes
col-form-label-sm and -lg align labels with small and large inputs.
<div class="row mb-2">
<label for="hs-sm-273" class="col-sm-3 col-form-label col-form-label-sm">Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control form-control-sm" id="hs-sm-273" value="#TX-2878">
</div>
</div>
<div class="row mb-2">
<label for="hs-md-274" class="col-sm-3 col-form-label">Customer</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="hs-md-274" value="Isla Ashford">
</div>
</div>
<div class="row">
<label for="hs-lg-275" class="col-sm-3 col-form-label col-form-label-lg">Total</label>
<div class="col-sm-9">
<input type="text" class="form-control form-control-lg" id="hs-lg-275" value="$636.43">
</div>
</div>6Column sizing
Give one column a fixed width (col-7) and let the others share the rest.
<div class="row g-2">
<div class="col-7">
<label for="cs-city-276" class="visually-hidden">City</label>
<input type="text" class="form-control" id="cs-city-276" placeholder="City">
</div>
<div class="col">
<label for="cs-state-277" class="visually-hidden">State</label>
<input type="text" class="form-control" id="cs-state-277" placeholder="State">
</div>
<div class="col">
<label for="cs-zip-278" class="visually-hidden">ZIP</label>
<input type="text" class="form-control" id="cs-zip-278" placeholder="ZIP">
</div>
</div>7Auto-sizing columns
col-auto columns shrink to their content and wrap as needed.
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="au-name-279">Name</label>
<input type="text" class="form-control" id="au-name-279" placeholder="Isla Ashford">
</div>
<div class="col-auto">
<label class="visually-hidden" for="au-user-280">Username</label>
<div class="input-group">
<div class="input-group-text">
@
</div>
<input type="text" class="form-control" id="au-user-280" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="au-pref-281">Preference</label>
<select class="form-select" id="au-pref-281">
<option selected>Weekly</option>
<option>Daily</option>
<option>Monthly</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="au-remember-282">
<label class="form-check-label" for="au-remember-282">Remember me</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>8Inline form
row-cols-lg-auto puts fields on one line from the lg breakpoint.
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="il-email-283">Email</label>
<input type="email" class="form-control" id="il-email-283" placeholder="Email">
</div>
<div class="col-12">
<label class="visually-hidden" for="il-plan-284">Plan</label>
<select class="form-select" id="il-plan-284">
<option>Early bird pass</option>
<option>Full access pass</option>
</select>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Start trial</button>
</div>
</form>9Fieldsets with legends
Fieldsets group related fields under a visible legend.
<form>
<fieldset class="mb-3">
<legend class="h6 border-bottom pb-2">Company</legend>
<div class="row g-3">
<div class="col-md-8">
<label for="fs-company-285" class="form-label">Company name</label>
<input type="text" class="form-control" id="fs-company-285" value="Muse">
</div>
<div class="col-md-4">
<label for="fs-vat-286" class="form-label">Tax ID</label>
<input type="text" class="form-control" id="fs-vat-286">
</div>
</div>
</fieldset>
<fieldset>
<legend class="h6 border-bottom pb-2">Main contact</legend>
<div class="row g-3">
<div class="col-md-6">
<label for="fs-contact-287" class="form-label">Name</label>
<input type="text" class="form-control" id="fs-contact-287" value="Isla Ashford">
</div>
<div class="col-md-6">
<label for="fs-phone-288" class="form-label">Phone</label>
<input type="tel" class="form-control" id="fs-phone-288">
</div>
</div>
</fieldset>
</form>10Two-column settings
Section title and description on the left, fields on the right.
Profile
This information is visible to your team.
Account
Used for sign-in and receipts.
<div class="row g-4 border-bottom pb-4 mb-4">
<div class="col-md-4">
<h3 class="h6">Profile</h3>
<p class="small text-body-secondary">This information is visible to your team.</p>
</div>
<div class="col-md-8">
<div class="mb-3">
<label for="tc-display-289" class="form-label">Display name</label>
<input type="text" class="form-control" id="tc-display-289" value="Isla Ashford">
</div>
<label for="tc-bio-290" class="form-label">About</label>
<textarea class="form-control" id="tc-bio-290" rows="2">QA Engineer in Kyoto.</textarea>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<h3 class="h6">Account</h3>
<p class="small text-body-secondary">Used for sign-in and receipts.</p>
</div>
<div class="col-md-8">
<div class="mb-3">
<label for="tc-email-291" class="form-label">Email</label>
<input type="email" class="form-control" id="tc-email-291" value="isla.ashford@example.com">
</div>
<label for="tc-lang-292" class="form-label">Language</label>
<select class="form-select" id="tc-lang-292">
<option>English</option>
<option>Français</option>
</select>
</div>
</div>11Card form
A form framed by a card with header and a footer holding the actions.
New ticket
<div class="card">
<div class="card-header fw-semibold">
<i class="bi bi-plus-circle" aria-hidden="true"></i> New ticket
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label for="cd-project-293" class="form-label">Title</label>
<input type="text" class="form-control" id="cd-project-293" value="Announcing our first keynote speakers">
</div>
<div class="col-sm-6">
<label for="cd-owner-294" class="form-label">Owner</label>
<select class="form-select" id="cd-owner-294">
<option>Isla Ashford</option>
<option>Luna Ortega</option>
</select>
</div>
<div class="col-sm-6">
<label for="cd-due-295" class="form-label">Due date</label>
<input type="date" class="form-control" id="cd-due-295">
</div>
</div>
</div>
<div class="card-footer d-flex justify-content-end gap-2">
<button type="button" class="btn btn-light">Cancel</button>
<button type="button" class="btn btn-primary">Create</button>
</div>
</div>12Checkout sections
Numbered sections separated by dividers keep a long checkout readable.
<form>
<h3 class="h6"><span class="badge rounded-pill text-bg-primary me-2">1</span>Contact</h3>
<div class="mb-3">
<label for="co-email-296" class="form-label">Email</label>
<input type="email" class="form-control" id="co-email-296" value="isla.ashford@example.com">
</div>
<hr>
<h3 class="h6"><span class="badge rounded-pill text-bg-primary me-2">2</span>Shipping</h3>
<div class="row g-3 mb-3">
<div class="col-12">
<label for="co-name-297" class="form-label">Full name</label>
<input type="text" class="form-control" id="co-name-297" value="Isla Ashford">
</div>
<div class="col-12">
<label for="co-addr-298" class="form-label">Address</label>
<input type="text" class="form-control" id="co-addr-298" value="175 Willow Way">
</div>
<div class="col-8">
<label for="co-city-299" class="form-label">City</label>
<input type="text" class="form-control" id="co-city-299" value="Kyoto">
</div>
<div class="col-4">
<label for="co-zip-300" class="form-label">ZIP</label>
<input type="text" class="form-control" id="co-zip-300">
</div>
</div>
<hr>
<h3 class="h6"><span class="badge rounded-pill text-bg-primary me-2">3</span>Payment</h3>
<div class="mb-3">
<label for="co-card-301" class="form-label">Card number</label>
<input type="text" class="form-control" id="co-card-301" inputmode="numeric" autocomplete="cc-number">
</div>
<button type="submit" class="btn btn-primary w-100">Pay $220.86</button>
</form>13Filter sidebar
A narrow vertical form for catalogue filters.
<form class="border rounded-3 p-3" style="max-width: 18rem;">
<h3 class="h6"><i class="bi bi-funnel" aria-hidden="true"></i> Filters</h3>
<label for="fsb-search-302" class="form-label small">Keyword</label>
<input type="search" class="form-control form-control-sm mb-3" id="fsb-search-302">
<p class="small fw-semibold mb-1">Category</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fsb-cat-303">
<label class="form-check-label small" for="fsb-cat-303">Keynote</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fsb-cat-304">
<label class="form-check-label small" for="fsb-cat-304">Workshop</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fsb-cat-305">
<label class="form-check-label small" for="fsb-cat-305">Panel</label>
</div>
<label for="fsb-price-306" class="form-label small fw-semibold mt-3">Max price</label>
<input type="range" class="form-range" id="fsb-price-306">
<div class="d-grid gap-2 mt-2">
<button type="submit" class="btn btn-sm btn-primary">Apply</button>
<button type="reset" class="btn btn-sm btn-link">Clear all</button>
</div>
</form>14Toolbar form
A flex toolbar that wraps fields and actions onto new lines on phones.
<form class="d-flex flex-wrap gap-2 align-items-end">
<div class="flex-grow-1">
<label for="tb-q-307" class="form-label small mb-1">Search orders</label>
<input type="search" class="form-control form-control-sm" id="tb-q-307" placeholder="#TX-7619">
</div>
<div>
<label for="tb-status-308" class="form-label small mb-1">Status</label>
<select class="form-select form-select-sm" id="tb-status-308">
<option>All</option>
<option>Paid</option>
<option>Refunded</option>
</select>
</div>
<div>
<label for="tb-from-309" class="form-label small mb-1">From</label>
<input type="date" class="form-control form-control-sm" id="tb-from-309">
</div>
<button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-search" aria-hidden="true"></i> Search</button>
<button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-download" aria-hidden="true"></i> Export</button>
</form>15Form in a dropdown
A sign-in form inside a dropdown menu for headers and navbars.
<div class="dropdown">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside"><i class="bi bi-person" aria-hidden="true"></i> Sign in</button>
<form class="dropdown-menu p-3" style="min-width: 16rem;">
<div class="mb-2">
<label for="dm-email-310" class="form-label small">Email</label>
<input type="email" class="form-control form-control-sm" id="dm-email-310">
</div>
<div class="mb-3">
<label for="dm-pass-311" class="form-label small">Password</label>
<input type="password" class="form-control form-control-sm" id="dm-pass-311">
</div>
<button type="submit" class="btn btn-primary btn-sm w-100">Sign in</button>
</form>
</div>16Step form
A progress indicator above the current step of a multi-step form.
Step 2 of 4 - Your company50%
<div class="mb-3">
<div class="d-flex justify-content-between small mb-1">
<span class="fw-semibold">Step 2 of 4 - Your company</span><span class="text-body-secondary">50%</span>
</div>
<div class="progress" role="progressbar" aria-label="Form progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: .4rem;">
<div class="progress-bar" style="width: 50%">
</div>
</div>
</div>
<div class="mb-3">
<label for="sp-company-312" class="form-label">Company name</label>
<input type="text" class="form-control" id="sp-company-312" value="Brioan Pro">
</div>
<div class="mb-3">
<label for="sp-size-313" class="form-label">Team size</label>
<select class="form-select" id="sp-size-313">
<option>1-10</option>
<option selected>11-50</option>
<option>51-200</option>
<option>200+</option>
</select>
</div>
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-light"><i class="bi bi-arrow-left" aria-hidden="true"></i> Back</button>
<button type="button" class="btn btn-primary">Next <i class="bi bi-arrow-right" aria-hidden="true"></i></button>
</div>17Profile with avatar column
Avatar and upload button beside the profile fields, stacking on phones.
<div class="row g-4 align-items-start">
<div class="col-sm-auto text-center">
<img src="../assets/img/avatar-8.svg" alt="Isla Ashford" width="96" height="96" class="rounded-circle mb-2 d-block mx-auto">
<label for="pf-photo-317" class="btn btn-sm btn-outline-secondary">Change photo</label>
<input type="file" id="pf-photo-317" class="d-none" accept="image/*">
</div>
<div class="col-sm">
<div class="row g-3">
<div class="col-md-6">
<label for="pf-first-314" class="form-label">First name</label>
<input type="text" class="form-control" id="pf-first-314" value="Isla">
</div>
<div class="col-md-6">
<label for="pf-last-315" class="form-label">Last name</label>
<input type="text" class="form-control" id="pf-last-315" value="Ashford">
</div>
<div class="col-12">
<label for="pf-role-316" class="form-label">Job title</label>
<input type="text" class="form-control" id="pf-role-316" value="QA Engineer">
</div>
</div>
</div>
</div>18Responsive breakpoints
One column on phones, two on tablets, three on desktops - col-sm-6 col-lg-4.
<div class="row g-3">
<div class="col-sm-6 col-lg-4">
<label for="bp-field-318" class="form-label">Event name</label>
<input type="text" class="form-control" id="bp-field-318">
</div>
<div class="col-sm-6 col-lg-4">
<label for="bp-field-319" class="form-label">Venue</label>
<input type="text" class="form-control" id="bp-field-319">
</div>
<div class="col-sm-6 col-lg-4">
<label for="bp-field-320" class="form-label">City</label>
<input type="text" class="form-control" id="bp-field-320">
</div>
<div class="col-sm-6 col-lg-4">
<label for="bp-field-321" class="form-label">Capacity</label>
<input type="number" class="form-control" id="bp-field-321">
</div>
<div class="col-sm-6 col-lg-4">
<label for="bp-field-322" class="form-label">Start time</label>
<input type="time" class="form-control" id="bp-field-322">
</div>
<div class="col-sm-6 col-lg-4">
<label for="bp-field-323" class="form-label">Ticket price</label>
<input type="number" class="form-control" id="bp-field-323">
</div>
</div>19Form with action bar
A bottom bar separated by a border holds secondary and primary actions.
<form class="border rounded-3">
<div class="p-3">
<div class="mb-3">
<label for="ab-title-324" class="form-label">Announcement title</label>
<input type="text" class="form-control" id="ab-title-324" value="Talks, workshops and new friendships">
</div>
<label for="ab-body-325" class="form-label">Body</label>
<textarea class="form-control" id="ab-body-325" rows="3">The networking app helps you meet the right people before you arrive.</textarea>
</div>
<div class="d-flex flex-wrap gap-2 justify-content-between align-items-center border-top p-3 bg-body-tertiary rounded-bottom-3">
<span class="small text-body-secondary"><i class="bi bi-cloud-check" aria-hidden="true"></i> Draft saved just now</span>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary">Preview</button>
<button type="submit" class="btn btn-primary">Publish</button>
</div>
</div>
</form>20Disabled fieldset
Disabling a fieldset disables every control inside it at once.
<form>
<fieldset disabled aria-label="Subscription (locked)">
<div class="alert alert-warning small py-2">
<i class="bi bi-info-circle" aria-hidden="true"></i> Billing is managed by your organisation.
</div>
<div class="mb-3">
<label for="df-plan-326" class="form-label">Plan</label>
<input type="text" id="df-plan-326" class="form-control" value="Early bird pass">
</div>
<div class="mb-3">
<label for="df-seats-327" class="form-label">Seats</label>
<select id="df-seats-327" class="form-select">
<option>79 seats</option>
</select>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="df-auto-328" checked>
<label class="form-check-label" for="df-auto-328">Renew automatically</label>
</div>
<button type="submit" class="btn btn-primary">Update plan</button>
</fieldset>
</form>