Form का Layout
Forms vertically stack हो सकते हैं, rows में बैठ सकते हैं, या columns वाले एक grid में layout हो सकते हैं।
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 .mb-3 wrappers इस्तेमाल करते हैं। fields को side by side रखने के लिए .row और .col classes, gutters के लिए .row-cols और g-*, और inline forms के लिए .col-auto plus .align-items-center इस्तेमाल करें। Horizontal forms grid columns के साथ .col-form-label इस्तेमाल करते हैं।
Note:
vertical alignment के लिए horizontal forms में labels पर .col-form-label इस्तेमाल करें।
उदाहरण: 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/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- gutters भूल जाना
- inline और stacked patterns को badly mix करना
- for/id label pairs missing होना
चैप्टर सारांश
- mb-3 से Stack करें
- Side-by-side के लिए row और col इस्तेमाल करें
- g-* gutters set करता है
- col-form-label labels align करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: