Button के Groups
Button groups related buttons को एक connected bar में जोड़ते हैं।
In this page:
Syntax
<div class="btn-group" role="group" aria-label="label">
<button class="btn btn-primary">one</button>
<button class="btn btn-primary">two</button>
</div>Button Groups
Buttons को role="group" और एक aria-label वाली .btn-group में wrap करें। इन्हें stack करने के लिए .btn-group-vertical और कई groups combine करने के लिए .btn-toolbar इस्तेमाल करें। .btn-check वाले Radio और checkbox toggles भी button groups की तरह render होते हैं।
Note:
Accessibility के लिए हमेशा role="group" और एक aria-label add करें।
उदाहरण: Button groups
<!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="btn-group mb-3" role="group" aria-label="Text alignment">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary active">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group-vertical d-block" role="group" aria-label="Vertical group" style="width:8rem">
<button type="button" class="btn btn-secondary">Top</button>
<button type="button" class="btn btn-secondary">Bottom</button>
</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. #}
आम गलतियां
- role और aria-label भूल जाना
- groups को गलत तरीके से nest करना
- unrelated buttons के लिए groups इस्तेमाल करना
चैप्टर सारांश
- .btn-group buttons जोड़ता है
- role="group" और aria-label
- btn-group-vertical stack करता है
- btn-toolbar groups combine करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: