Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Buttons in Bootstrap 5
Buttons: Interactive elements that trigger actions when clicked.
Introduction to Bootstrap Buttons
Buttons are fundamental UI elements used for user interactions. Bootstrap provides a comprehensive set of button styles, sizes, and states that work across all browsers and devices.
Quick Examples
Basic Button Examples
<!-- Basic Bootstrap Buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>Button Anatomy
Button Structure
- Padding: .375rem .75rem (default)
- Border Radius: .375rem (rounded corners)
- Font Size: 1rem (16px)
- Line Height: 1.5
- Border: 1px solid transparent
Button States
- Normal: Default appearance
- Hover: Darker background on mouseover
- Active: When being clicked/pressed
- Focus: Keyboard focus state
- Disabled: Non-interactive state
Best Practices
Button Design Principles
- ✅ Use primary colors for main actions
- ✅ Use secondary colors for less important actions
- ✅ Use danger colors for destructive actions
- ✅ Maintain consistent button sizes
- ✅ Provide clear visual feedback on interaction
- ✅ Ensure sufficient contrast for accessibility
