Bs5 Buttons in Bootstrap
In Bootstrap 5 (BS5), buttons are core UI components used for actions and links. They're highly customizable using Bootstrap’s utility classes.
? Basic Button
<button type="button" class="btn btn-primary">Primary</button>btn: Required base classbtn-primary: Contextual style (see options below)
? Contextual Button Classes
| Class | Description |
|---|---|
btn-primary | Main action (blue) |
btn-secondary | Secondary action |
btn-success | Positive action |
btn-danger | Destructive action |
btn-warning | Caution needed |
btn-info | Informational |
btn-light | Light background |
btn-dark | Dark background |
btn-link | Styled as a link |
? Button Sizes
<button class="btn btn-primary btn-lg">Large</button><button class="btn btn-primary btn-sm">Small</button>btn-lg: Large buttonbtn-sm: Small button
? Disabled Button
<button type="button" class="btn btn-secondary" disabled>Disabled</button>Or for <a> tags:
<a class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">Disabled Link</a>? Outline Buttons
<button class="btn btn-outline-success">Outline</button>Outline buttons use border and text color instead of a solid background.
? Button as Link
<a href="#" class="btn btn-info">Link Button</a>You can use buttons on <a>, <button>, or <input> elements.
? Block Level Buttons
Use utilities for full-width buttons:
<button class="btn btn-primary w-100">Block Button</button>?? Active & Toggle Buttons
<button type="button" class="btn btn-primary active">Active</button><button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle Button</button>Use data-bs-toggle="button" for toggling behavior.
Would you like to see button groups, dropdown buttons, or buttons with icons next?
