col वाली Classes
col classes एक column की width set करती हैं, या इसे space equally share करने देती हैं।
In this page:
Syntax
<div class="row">
<div class="col">equal</div>
<div class="col-6">half</div>
<div class="col-auto">content width</div>
</div>col Classes
.col space equally share करता है, .col-{n} बारह में से एक fixed share set करता है, और .col-auto अपने content के हिसाब से size होता है। .col-sm-6 जैसे breakpoint versions उस size से ऊपर apply होते हैं। .col को .col-{n} के साथ mix करना plain columns को बाकी बचा space भरने देता है।
Note:
.col-auto flexible columns के बगल में buttons और labels के लिए perfect है।
उदाहरण: col classes
<!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 bg-light border">col</div><div class="col-6 bg-warning-subtle border">col-6</div><div class="col bg-light border">col</div></div>
<div class="row"><div class="col-auto bg-info-subtle border">col-auto</div><div class="col bg-light border">col fills the rest</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. #}
आम गलतियां
- col और col-auto mix up करना
- small screens पर बिना base size के class col-md इस्तेमाल करना
- same element में col और col-6 दोनों add करना
चैप्टर सारांश
- .col equal share है
- .col-n 12 में से n है
- .col-auto content fit करता है
- Breakpoints col-md-n इस्तेमाल करते हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: