Responsive Columns बनाना
Columns breakpoint classes add करके अलग-अलग screen sizes पर अपनी width बदल सकते हैं।
In this page:
Syntax
<div class="row">
<div class="col-12 col-md-6 col-lg-4">column</div>
<div class="col-12 col-md-6 col-lg-8">column</div>
</div>Responsive Columns
.col-12 या बिना breakpoint के mobile layout से शुरू करें, फिर .col-sm-*, .col-md-*, .col-lg-*, और बाकी add करें screen बढ़ने के साथ width बदलने के लिए।
Classes additive हैं और ऊपर की ओर cascade करती हैं, इसलिए आपको सिर्फ वहाँ specify करना है जहाँ layout बदलता है। एक साथ सारे children के लिए प्रति row columns set करने के लिए row-cols-* इस्तेमाल करें।
Note:
row-cols-2 row-cols-md-4 phones पर दो columns और tablets और ऊपर पर चार देता है।
उदाहरण: Responsive columns
<!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 row-cols-2 row-cols-md-4 g-2">
<div class="col"><div class="bg-primary text-white p-3">1</div></div>
<div class="col"><div class="bg-primary text-white p-3">2</div></div>
<div class="col"><div class="bg-primary text-white p-3">3</div></div>
<div class="col"><div class="bg-primary text-white p-3">4</div></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. #}
आम गलतियां
- Desktop-first design करना
- unchanged sizes के लिए classes repeat करना
- small-screen default भूल जाना
चैप्टर सारांश
- पहले Mobile layout
- बड़ी screens के लिए breakpoint classes add करें
- Classes ऊपर की ओर cascade करती हैं
- row-cols प्रति row columns set करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: