Background के रंग
Background utilities theme इस्तेमाल करके एक element का background colour करती हैं।
In this page:
Syntax
<div class="bg-primary text-white p-3">content</div>
<div class="bg-success-subtle">content</div>Background Colors
.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, और .bg-dark इस्तेमाल करें। .bg-primary-subtle जैसे Subtle variants softer हैं और dark mode support करते हैं। .bg-gradient एक subtle gradient add करता है।
Readable contrast के लिए text-* या text-bg-* के साथ pair करें।
Note:
text-bg-primary background और एक readable text colour दोनों set करता है।
उदाहरण: Background colors
<!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="p-3 mb-2 bg-primary text-white">bg-primary</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">bg-success-subtle</div>
<div class="p-3 mb-2 text-bg-dark">text-bg-dark</div>
<div class="p-3 mb-2 bg-warning bg-gradient">bg-warning with gradient</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. #}
आम गलतियां
- dark backgrounds पर dark text इस्तेमाल करना
- text colour changes भूल जाना
- standard colours के लिए custom CSS
चैप्टर सारांश
- bg-{theme} एक background set करता है
- -subtle variants softer हैं
- bg-gradient एक gradient add करता है
- Readable text colours के साथ pair करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: