Offsetting क्या है
Offset classes एक column को इससे पहले empty columns छोड़कर right की ओर push करती हैं।
In this page:
Syntax
<div class="row">
<div class="col-md-6 offset-md-3">centered column</div>
</div>Offsetting
.offset-md-3 element के left पर margin के तीन empty columns add करता है, md से ऊपर। एक column width के साथ combine होकर यह content को centre या position करता है। Bootstrap 5 में आप columns push करने के लिए ms-auto जैसे margin utilities भी इस्तेमाल कर सकते हैं।
Note:
col-md-6 offset-md-3 एक half-width column centre करता है।
उदाहरण: Offsetting
<!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 text-center">
<div class="row mb-2"><div class="col-md-4 offset-md-4 bg-primary text-white">col-md-4 offset-md-4 (centred)</div></div>
<div class="row mb-2"><div class="col-md-3 bg-secondary text-white">col-md-3</div><div class="col-md-3 offset-md-3 bg-secondary text-white">offset-md-3</div></div>
<div class="row"><div class="col-4 bg-success text-white">col-4</div><div class="col-4 ms-auto bg-success text-white">ms-auto</div></div>
</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. #}
आम गलतियां
- Bootstrap 3 style col-md-offset इस्तेमाल करना
- Offset plus width 12 से ज़्यादा
- breakpoint भूल जाना
चैप्टर सारांश
- offset-{bp}-n n empty columns add करता है
- Width plus offset 12 में fit होना चाहिए
- ms-auto right की ओर push करता है
- same breakpoints इस्तेमाल करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: