Navbar की Branding
Brand area आपका logo या नाम दिखाता है, usually navbar के left पर।
In this page:
Syntax
<a class="navbar-brand" href="#">Brand text</a>
<span class="navbar-brand mb-0 h1">Brand text</span>Navbar Branding
एक a element पर .navbar-brand इस्तेमाल करें (या एक non-link के लिए span)। यह text, width और height attributes से sized एक image, या दोनों hold कर सकता है। Brand के अंदर vertical alignment .d-inline-block .align-text-top या flex utilities से सबसे आसान है।
Note:
Logo images को alt text और explicit dimensions दें।
उदाहरण: Navbar branding
<!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">
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2" href="#">
<svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><circle cx="15" cy="15" r="14" fill="#712cf9"/></svg>
<span>BrandName</span>
</a>
</div>
</nav>
</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. #}
आम गलतियां
- एक link की बजाय एक div इस्तेमाल करना
- बहुत बड़ी, unsized logo images इस्तेमाल करना
- alt text भूल जाना
चैप्टर सारांश
- navbar-brand text या logo hold करता है
- a या span इस्तेमाल करें
- Images explicitly size करें
- Utilities से align करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: