Display की Utilities
Display utilities किसी भी breakpoint पर elements show, hide, और इनके layout होने का तरीका बदलती हैं।
In this page:
Syntax
<div class="d-none d-md-block">shown from md up</div>
<div class="d-flex">flex container</div>Display Utilities
.d-none, .d-block, .d-inline, .d-inline-block, .d-flex, और .d-grid जैसी classes display property set करती हैं। .d-none .d-md-block जैसे breakpoint versions एक element को छोटी screens पर hide करते हैं और md से ऊपर दिखाते हैं। Print styles के लिए .d-print-none इस्तेमाल करें।
Note:
d-none d-md-block md से नीचे hide करता है और md से ऊपर दिखाता है।
उदाहरण: Display utilities
<!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="d-block d-md-none bg-warning-subtle p-2 mb-2">Visible below md only</div>
<div class="d-none d-md-block bg-success-subtle p-2 mb-2">Visible from md up</div>
<span class="d-inline-block bg-info-subtle p-2">inline-block</span> <span class="d-inline-block bg-info-subtle p-2">inline-block</span>
</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. #}
आम गलतियां
- दूसरे breakpoint पर एक show class के बिना d-none apply करना
- display को visibility से confuse करना
- inline CSS display इस्तेमाल करना
चैप्टर सारांश
- d-none, d-block, d-inline, d-flex jaise classes मिलती हैं
- d-md-block जैसे Breakpoint versions
- बाद में दिखाने के लिए d-none को d-{bp}-block से combine करें
- Printing के लिए d-print-*
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: