Breakpoints क्या हैं
Breakpoints वे screen widths हैं जिन पर layout बदलने की permission है।
In this page:
Syntax
<div class="col-{breakpoint}-{number}">...</div>
<!-- breakpoints: sm, md, lg, xl, xxl -->Breakpoints
Bootstrap 5 में छह responsive breakpoints हैं:
Note:
- xs: 576px से कम (default, कोई infix नहीं)
- sm: 576px और ऊपर (.col-sm-)
- md: 768px और ऊपर (.col-md-)
- lg: 992px और ऊपर (.col-lg-)
- xl: 1200px और ऊपर (.col-xl-)
- xxl: 1400px और ऊपर (.col-xxl-)
- बिना breakpoint infix वाली Classes सारी sizes पर apply होती हैं। Mobile-first design करें।
उदाहरण: Breakpoints
<!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">
<div class="row text-center">
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Full width on phones, half on md, quarter on lg</div>
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Column 2</div>
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Column 3</div>
<div class="col-12 col-md-6 col-lg-3 bg-light border p-3">Column 4</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. #}
आम गलतियां
- यह सोचना कि md सिर्फ medium screens मतलब है
- Desktop-first design करना
- यह भूल जाना कि classes ऊपर की ओर cascade करती हैं
चैप्टर सारांश
- xs, sm, md, lg, xl, xxl breakpoints मिलते हैं
- Thresholds 576, 768, 992, 1200, 1400 हैं
- Mobile-first: min-width rules इस्तेमाल होते हैं
- Classes breakpoint से ऊपर apply होती हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: