Border के रंग
Border utilities borders add या remove करती हैं और इनका colour, width, और roundness set करती हैं।
In this page:
Syntax
<div class="border border-primary">all sides</div>
<div class="border-top border-danger">top only</div>Border Colors
.border सारी sides पर एक border add करता है, .border-top और इसके जैसे sides target करते हैं, और .border-0 इन्हें हटाता है। .border-primary से Colour, .border-1 से .border-5 से width, और .rounded, .rounded-circle, और .rounded-pill से radius।
Subtle border colours -subtle से खत्म होते हैं।
Note:
एक true circle बनाने के लिए rounded-circle को equal width और height चाहिए।
उदाहरण: Border 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="border border-primary border-3 p-3 mb-2">border-primary border-3</div>
<div class="border-top border-danger p-3 mb-2">only a top border</div>
<div class="border rounded-pill p-2 mb-2 text-center">rounded-pill</div>
<div class="border border-success-subtle rounded-circle d-inline-block" style="width:4rem;height:4rem"></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. #}
आम गलतियां
- बिना एक border के border colour add करना
- border width classes भूल जाना
- radius के लिए custom CSS इस्तेमाल करना
चैप्टर सारांश
- border borders add करता है
- border-{color} colour set करता है
- border-1 से 5 width set करते हैं
- rounded-* radius set करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: