Utility Classes का परिचय
Utilities spacing, colour, alignment, और display के लिए tiny single-purpose classes हैं।
In this page:
Syntax
<div class="mt-3 px-4 text-center bg-light">...</div>
<!-- spacing: {property}{sides}-{size} -->Utility Classes Intro
Spacing utilities pattern {property}{sides}-{size} इस्तेमाल करती हैं, जैसे mt-3 या px-4। Text utilities में text-center और text-uppercase शामिल हैं, colour utilities में text-primary और bg-light, और display utilities में d-none और d-flex।
ज़्यादातर breakpoints support करती हैं, उदाहरण के लिए d-md-block।
Note:
Sizes 0 से 5 0, .25rem, .5rem, 1rem, 1.5rem, और 3rem में map होते हैं।
उदाहरण: Utility classes intro
<!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="bg-primary text-white p-3 mb-2">p-3 padding</div>
<div class="bg-secondary text-white px-5 py-1 mb-2">px-5 py-1</div>
<div class="bg-success text-white ms-4 p-2 mb-2">ms-4 margin-start</div>
<div class="bg-dark text-white text-center text-uppercase p-2">centered and uppercase</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. #}
आम गलतियां
- utilities की बजाय custom margins लिखना
- size number भूल जाना
- m (margin) को p (padding) से confuse करना
चैप्टर सारांश
- m और p margin और padding हैं
- t, b, s, e, x, y sides चुनते हैं
- Sizes 0 से 5 plus auto
- md जैसे breakpoints add करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: