Breakpoint के अनुसार Show/Hide
Screen size के हिसाब से content show या hide करने के लिए display utilities combine करें।
In this page:
Syntax
<div class="d-none d-md-block">hidden below md</div>
<div class="d-lg-none">hidden from lg up</div>Breakpoint से Show/Hide
d-none d-md-block से छोटी screens पर hide करें, d-lg-none से बड़ी screens पर hide करें, या d-none d-md-block d-xl-none जैसे combinations से सिर्फ एक range पर दिखाएँ।
Hiding content को layout से remove करता है लेकिन page से नहीं, इसलिए mobile पर essential content hide करने से बचें।
Note:
छोटी screens पर content hide करने की बजाय इसे restructure करना prefer करें।
उदाहरण: Show/hide by breakpoint
<!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="d-block d-sm-none bg-danger text-white p-2 mb-1">xs only</div>
<div class="d-none d-sm-block d-md-none bg-warning p-2 mb-1">sm only</div>
<div class="d-none d-md-block d-lg-none bg-success text-white p-2 mb-1">md only</div>
<div class="d-none d-lg-block bg-primary text-white p-2">lg and up</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. #}
आम गलतियां
- mobile पर essential content hide करना
- counterpart class भूल जाना
- simple show/hide के लिए JavaScript इस्तेमाल करना
चैप्टर सारांश
- d-none plus d-{bp}-block एक size से दिखाता है
- d-{bp}-none एक size से hide करता है
- ranges के लिए combine करें
- essential content hide न करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: