Button sizes
Add btn-lg or btn-sm to make buttons larger or smaller, or make them full width.
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 and .btn-sm change padding and font size. For a full-width button use .w-100 or wrap buttons in .d-grid with .gap-2. Custom sizes can be set with CSS variables.
Note:
d-grid with gap-2 stacks full-width buttons neatly.
Example: 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
- Using width in inline CSS
- Forgetting d-grid for stacked buttons
- Mixing sizes inconsistently
Chapter Summary
- btn-lg and btn-sm
- w-100 gives full width
- d-grid stacks buttons
- Keep sizes consistent
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: