Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Button Sizes in Bootstrap 5
Button Sizes: Bootstrap provides three button sizes: small, default, and large.
Available Button Sizes
Control button sizes using the .btn-sm, .btn-lg classes, or use default size without any size class.
All Button Sizes
Large Buttons .btn-lg
Default Buttons
Small Buttons .btn-sm
<!-- Button Size Classes -->
<!-- Large Buttons -->
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-outline-secondary btn-lg">Large Outline</button>
<!-- Default Buttons (no size class) -->
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-outline-secondary">Default Outline</button>
<!-- Small Buttons -->
<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-outline-secondary btn-sm">Small Outline</button>Size Specifications
| Size | Class | Padding (Vertical/Horizontal) | Font Size | Border Radius | Use Case |
|---|---|---|---|---|---|
| Large | .btn-lg | .5rem 1rem | 1.25rem | .5rem | Hero sections, main CTAs |
| Default | (no size class) | .375rem .75rem | 1rem | .375rem | Most common usage |
| Small | .btn-sm | .25rem .5rem | .875rem | .25rem | Toolbars, compact spaces |
Responsive Button Sizes
Create responsive button sizes that change based on screen size.
Responsive Size Examples
<!-- Responsive Button Sizes with Custom CSS -->
<style>
/* Small on mobile, large on medium screens and up */
.btn-lg-md {
padding: .25rem .5rem;
font-size: .875rem;
border-radius: .25rem;
}
@media (min-width: 768px) {
.btn-lg-md {
padding: .5rem 1rem;
font-size: 1.25rem;
border-radius: .5rem;
}
}
/* Small on mobile, default on medium, large on large */
.btn-md-lg {
padding: .25rem .5rem;
font-size: .875rem;
border-radius: .25rem;
}
@media (min-width: 768px) {
.btn-md-lg {
padding: .375rem .75rem;
font-size: 1rem;
border-radius: .375rem;
}
}
@media (min-width: 992px) {
.btn-md-lg {
padding: .5rem 1rem;
font-size: 1.25rem;
border-radius: .5rem;
}
}
</style>
<button class="btn btn-primary btn-sm btn-lg-md">
Responsive Button
</button>Size Guidelines
Large Buttons
When to use:
- Main Call-to-Action (CTA)
- Hero sections
- Important form submissions
- Conversion-focused buttons
Tip: Use sparingly - only 1-2 per page
Default Buttons
When to use:
- Most common actions
- Form buttons
- Navigation elements
- General interactions
Tip: Default size works for 80% of use cases
Small Buttons
When to use:
- Toolbars and controls
- Data tables
- Compact interfaces
- Secondary actions
Tip: Ensure they're still easily tappable on mobile
Accessibility Considerations
Size Accessibility Guidelines
- ✅ Minimum touch target size: 44×44 pixels for mobile
- ✅ Ensure sufficient spacing between buttons
- ✅ Test button sizes with users who have motor impairments
- ✅ Maintain consistent sizing throughout the application
- ✅ Consider font size readability, especially for small buttons
- ✅ Provide visual feedback for all interactive states
