Responsive Forms

Stack form controls vertically on mobile and arrange inline on larger screens using grid or flex utilities.

Example

<!-- Stack on mobile, inline on md -->
<form class="row g-3">
  <div class="col-12 col-md-6">
    <label class="form-label">First Name</label>
    <input type="text" class="form-control">
  </div>
  <div class="col-12 col-md-6">
    <label class="form-label">Last Name</label>
    <input type="text" class="form-control">
  </div>
  <div class="col-12">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
  </div>
  <div class="col-12"><button class="btn btn-primary w-100 w-md-auto">Submit</button></div>
</form>

HTML

Full Editor

Pro Tip

w-100 w-md-auto makes the submit button full-width on mobile and auto-width on desktop.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned