Form layout
Forms can stack vertically, sit in rows, or be laid out in a grid with columns.
In this page:
Syntax
<form>
<div class="mb-3">
<label class="form-label">Label</label>
<input class="form-control">
</div>
<div class="row">
<div class="col"><input class="form-control"></div>
<div class="col"><input class="form-control"></div>
</div>
</form>Form layout
Stacked forms use .mb-3 wrappers. Use .row and .col classes to place fields side by side, .row-cols and g-* for gutters, and .col-auto plus .align-items-center for inline forms. Horizontal forms use .col-form-label with grid columns.
Note:
Use .col-form-label on labels in horizontal forms for vertical alignment.
Example: Form layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<form class="row g-3">
<div class="col-md-6"><label for="fn" class="form-label">First name</label><input id="fn" class="form-control"></div>
<div class="col-md-6"><label for="ln" class="form-label">Last name</label><input id="ln" class="form-control"></div>
<div class="col-8"><label for="addr" class="form-label">Address</label><input id="addr" class="form-control"></div>
<div class="col-4"><label for="zip" class="form-label">Zip</label><input id="zip" class="form-control"></div>
<div class="col-12"><button class="btn btn-primary">Save</button></div>
</form>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting gutters
- Mixing inline and stacked patterns badly
- Missing for/id label pairs
Chapter Summary
- Stack with mb-3
- Use row and col for side-by-side
- g-* sets gutters
- col-form-label aligns labels
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: