Button के Sizes
Buttons को बड़ा या छोटा बनाने के लिए, या full width बनाने के लिए btn-lg या btn-sm add करें।
In this page:
Syntax
<button class="btn btn-primary btn-lg">large</button>
<button class="btn btn-primary btn-sm">small</button>
<button class="btn btn-primary w-100">full width</button>Button Sizes
.btn-lg और .btn-sm padding और font size बदलते हैं। एक full-width button के लिए .w-100 इस्तेमाल करें या buttons को .gap-2 के साथ .d-grid में wrap करें। Custom sizes CSS variables से set हो सकती हैं।
Note:
gap-2 वाला d-grid full-width buttons को neatly stack करता है।
उदाहरण: Button sizes
<!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">
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<div class="d-grid gap-2 mt-3">
<button class="btn btn-success">Block button</button>
<button class="btn btn-outline-success">Another block button</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. #}
आम गलतियां
- inline CSS में width इस्तेमाल करना
- stacked buttons के लिए d-grid भूल जाना
- inconsistently sizes mix करना
चैप्टर सारांश
- btn-lg और btn-sm
- w-100 full width देता है
- d-grid buttons stack करता है
- Sizes consistent रखें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: