Buttons are essential UI elements used for user interactions such as submitting forms, opening modals, or triggering JavaScript functions. Bootstrap 4 provides a wide variety of button styles, sizes, and states to enhance usability and aesthetics.
What This Tutorial Covers:
- Basic Bootstrap 4 buttons
- Button colors and styles
- Button sizes
- Button outline styles
- Button groups
- Block-level buttons
- Button states (active, disabled)
- Buttons with icons
- Buttons inside forms
1. Basic Bootstrap 4 Buttons
To create a button in Bootstrap 4, use the .btn class along with a button style class such as .btn-primary.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<button class="btn btn-primary">Primary Button</button>
</div>
</body>
</html>
Explanation:
- .btn is the base class required for all Bootstrap buttons.
- .btn-primary adds the primary color styling.
2. Button Colors and Styles
Bootstrap 4 offers several predefined button styles.
Example:
<div class="container mt-4">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
</div>
Available Button Classes:
| Class | Description |
|---|---|
| .btn-primary | Blue button (main action) |
| .btn-secondary | Gray button (alternative action) |
| .btn-success | Green button (success messages) |
| .btn-danger | Red button (error messages) |
| .btn-warning | Yellow button (warnings) |
| .btn-info | Light blue button (informational messages) |
| .btn-light | White/gray button |
| .btn-dark | Dark gray/black button |
3. Button Sizes
Use .btn-lg for large buttons and .btn-sm for small buttons.
Example:
<div class="container mt-4">
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Default Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>
</div>
4. Outline Buttons
Outline buttons use the .btn-outline-* classes, displaying only a colored border instead of a solid fill.
Example:
<div class="container mt-4">
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
</div>
Explanation:
- .btn-outline-* applies a border instead of a solid background.
- The text and border color match the button type.
5. Block-Level Buttons
Block-level buttons take the full width of their container.
Example:
<div class="container mt-4">
<button class="btn btn-primary btn-block">Block Level Button</button>
</div>
Explanation:
- .btn-block makes the button take up the full width of its container.
6. Button States (Active and Disabled)
Active Buttons:
Use .active to indicate an active button.
<button class="btn btn-primary active">Active Button</button>
Disabled Buttons:
Use disabled or .disabled to make a button unclickable.
<button class="btn btn-secondary disabled">Disabled Button</button> <button class="btn btn-danger" disabled>Disabled Button</button>
7. Button Groups
Button groups allow multiple buttons to be grouped together.
Example:
<div class="container mt-4">
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
Explanation:
- .btn-group groups buttons together.
- Buttons inside the group behave like a single component.
Vertical Button Group:
<div class="btn-group-vertical">
<button class="btn btn-success">Option 1</button>
<button class="btn btn-success">Option 2</button>
<button class="btn btn-success">Option 3</button>
</div>
8. Buttons with Icons
Bootstrap does not include built-in icons, but you can use Font Awesome.
Example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="container mt-4">
<button class="btn btn-success"><i class="fas fa-check"></i> Confirm</button>
<button class="btn btn-danger"><i class="fas fa-trash"></i> Delete</button>
<button class="btn btn-warning"><i class="fas fa-exclamation-triangle"></i> Warning</button>
</div>
Explanation:
- fa-check adds a checkmark.
- fa-trash adds a trash icon.
- fa-exclamation-triangle adds a warning symbol.
9. Buttons Inside Forms
Buttons can be used inside forms with different types (submit, reset, button).
Example:
<form>
<input type="text" class="form-control mb-2" placeholder="Enter text">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-secondary">Reset</button>
</form>
Explanation:
- type=”submit” submits the form.
- type=”reset” clears the form fields.
10. Customizing Buttons with CSS
You can override Bootstrap button styles with custom CSS.
Example:
<style>
.custom-btn {
background-color: #ff5733;
color: white;
border-radius: 25px;
}
</style>
<button class="btn custom-btn">Custom Button</button>
