Bootstrap Buttons
Bootstrap 5 provides a variety of button styles and classes to create different types of buttons easily. Here’s a rundown of the key features and classes used for buttons in Bootstrap 5,
Basic Button Classes
.btn: This class is used to style an element as a button. It is always required.
.btn-primary: A primary button, typically used for the main action..btn-secondary: A secondary button, often used for secondary actions.
.btn-success: Indicates a successful or positive action.
.btn-danger: Represents a dangerous or potentially negative action.
.btn-warning: Indicates a warning that might need attention.
.btn-info: Used for informational purposes.
.btn-dark: A dark-themed button.
.btn-light: A light-themed button.
.btn-link: Makes the button look like a link while retaining button behavior.Button Sizes
.btn-lg: Large button.
.btn-sm: Small button.
.btn-block: Creates a block-level button that spans the full width of its parent container.Outline Buttons
Bootstrap also provides outline buttons which have a transparent background and colored border,
.btn-outline-primary.btn-outline-secondary.btn-outline-success.btn-outline-danger.btn-outline-warning.btn-outline-info.btn-outline-light.btn-outline-darkButton States
.active: Adds an active state to the button..disabled: Disables the button, preventing user interaction.Button Groups
You can group buttons together using the.btn-groupclass<div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>Example Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap 5 Buttons</title> </head> <body> <div class="container mt-5"> <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> </div> <div class="container mt-3"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button> </div> <div class="container mt-3"> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-secondary btn-lg">Large button</button> </div> <div class="container mt-3"> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-secondary btn-sm">Small button</button> </div> <div class="container mt-3"> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.min.js"></script> </body> </html>This example covers basic buttons, outline buttons, different sizes, and button groups. Adjust the HTML as needed for your project.