1. Introduction¶
In web development, buttons are crucial elements for user interaction. By using Bootstrap 5’s button component, you can quickly achieve uniform styling, responsive layouts, and rich interactive states without writing CSS from scratch. This chapter will help you master the core usage of Bootstrap 5 buttons, including basic styles, size adjustments, and state settings.
2. Including Bootstrap 5¶
Before using the button component, you need to include Bootstrap 5’s CSS and JS files. The simplest way is via CDN (Content Delivery Network):
<head>
<!-- Include Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Include Bootstrap 5 JS (optional, if you need interactive features like dropdowns) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
Tip: If you only need basic styling (no interactive features), you can include only the CSS file.
3. Basic Button Styles¶
Bootstrap 5 buttons are controlled by different class names. The core is the .btn class, combined with color classes to achieve different visual effects.
1. Basic Button Classes¶
All buttons must use the .btn class as a base, then use color classes to set the style:
<button class="btn">Default Button</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
Effect: .btn-primary is the most common blue button, .btn-secondary is gray, and other color classes correspond to different theme colors.
2. Outline Buttons¶
For a transparent background with borders, use the btn-outline-* prefix:
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-success">Outline Success</button>
<button class="btn btn-outline-danger">Outline Danger</button>
Features: Only the border and text color are retained, with a transparent background. When hovered, it will fill with color (same effect as filled buttons).
4. Button Sizes¶
Bootstrap 5 provides three preset sizes: default, small (sm), and large (lg).
1. Default Size¶
Buttons use default size when no additional size class is added:
<button class="btn btn-primary">Default Size</button>
2. Small Buttons¶
Use the .btn-sm class for small size:
<button class="btn btn-primary btn-sm">Small Button</button>
3. Large Buttons¶
Use the .btn-lg class for large size:
<button class="btn btn-primary btn-lg">Large Button</button>
Effect Comparison: Small buttons are more compact, while large buttons occupy more space, suitable for highlighting important actions.
5. Button State Settings¶
Buttons automatically display different styles in different interaction states, achievable without extra CSS.
1. Hover State¶
When the mouse hovers over the button, there is a default color darkening effect:
<button class="btn btn-primary">Hover Over Me</button>
Principle: Bootstrap 5 automatically implements this via CSS pseudo-class hover, e.g., .btn-primary:hover darkens the background color.
2. Active State¶
When the button is clicked, it has an “indented” effect (like a pressed feeling):
<button class="btn btn-primary active">Active Button</button>
Tip: The active class is usually used with the aria-pressed="true" attribute (for accessibility), but basic styling doesn’t require extra handling.
3. Disabled State¶
Disable the button using the disabled attribute. The button will gray out and become unclickable:
<button class="btn btn-primary" disabled>Disabled Button</button>
Notes:
- The disabled attribute (HTML native) must be used, not a class name.
- In disabled state, click events cannot be triggered (for JS handling, add class="opacity-50 cursor-not-allowed" for enhanced visual feedback).
6. Practical Extension Tips¶
1. Button Shape Adjustment¶
Adjust button shape using border radius utility classes:
- .rounded-0: No rounded corners (right angle)
- .rounded: Default rounded corners (requires .rounded in Bootstrap 5)
- .rounded-circle: Circular button
<button class="btn btn-primary rounded-0">Square Button</button>
<button class="btn btn-primary rounded-circle">Circle Button</button>
2. Button Group¶
Combine multiple buttons into a group (e.g., navigation, toolbar) using the .btn-group class:
<div class="btn-group" role="group" aria-label="Action Buttons">
<button class="btn btn-primary">Left</button>
<button class="btn btn-secondary">Middle</button>
<button class="btn btn-danger">Right</button>
</div>
Effect: Borders between buttons merge for a cohesive look, suitable for horizontally arranged action buttons.
7. Summary¶
Bootstrap 5 buttons allow style, size, and state control through simple class names. Key points:
- Basic Styles: .btn + color classes (e.g., .btn-primary) or outline classes (.btn-outline-*).
- Size Control: .btn-sm (small), .btn-lg (large).
- State Management: disabled attribute (disabled), automatic hover/active effects.
Practice Suggestion: Copy the sample code into an HTML file, modify colors, sizes, and states, and observe the effect differences to quickly familiarize yourself with class name patterns.