horizontal_rule Horizontal Form Layout
vertical_align_center Vertical Form Layout with Floating Labels
view_stream Inline Form Layout
credit_card Card Form Layout with Floating Labels
Personal Information
Contact Information
tab Tabbed Form Layout
expand_more Accordion Form Layout
auto_awesome Wizard Form Layout
1
Personal
2
Contact
3
Review
responsive Responsive Form Layout
Usage Examples
<form class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter first name">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter last name">
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="col-md-6">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter phone">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</form><form>
<div class="mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter first name">
</div>
<div class="mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter last name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter phone">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</form><form class="row g-3 align-items-end">
<div class="col-auto">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="col-auto">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember">
<label class="form-check-label" for="remember">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</form><ul class="nav nav-tabs" id="formTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="personal-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button" role="tab">
<i class="material-symbols-rounded me-1">person</i>
Personal
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab">
<i class="material-symbols-rounded me-1">contact_phone</i>
Contact
</button>
</li>
</ul>
<div class="tab-content" id="formTabContent">
<div class="tab-pane fade show active" id="personal" role="tabpanel">
<form class="mt-3">
<div class="mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter first name">
</div>
<div class="mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter last name">
</div>
</form>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel">
<form class="mt-3">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter phone">
</div>
</form>
</div>
</div><div class="wizard-form">
<div class="wizard-steps mb-4">
<div class="row">
<div class="col-4">
<div class="wizard-step active">
<div class="wizard-step-number">1</div>
<div class="wizard-step-title">Personal</div>
</div>
</div>
<div class="col-4">
<div class="wizard-step">
<div class="wizard-step-number">2</div>
<div class="wizard-step-title">Contact</div>
</div>
</div>
<div class="col-4">
<div class="wizard-step">
<div class="wizard-step-number">3</div>
<div class="wizard-step-title">Review</div>
</div>
</div>
</div>
</div>
<form>
<div class="wizard-content">
<div class="wizard-panel active" id="wizard-panel-1">
<h6 class="mb-3">Personal Information</h6>
<div class="mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter first name">
</div>
</div>
<div class="wizard-panel" id="wizard-panel-2">
<h6 class="mb-3">Contact Information</h6>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
</div>
<div class="wizard-actions mt-4">
<button type="button" class="btn btn-secondary" id="wizard-prev" disabled>Previous</button>
<button type="button" class="btn btn-primary" id="wizard-next">Next</button>
<button type="submit" class="btn btn-success" id="wizard-submit" style="display: none;">Submit</button>
</div>
</form>
</div>