Welcome to The Coding College! Buttons are a fundamental element in web design, and Bootstrap 4 Buttons make it easy to create stylish, responsive, and functional buttons with minimal effort. In this tutorial, we’ll explore everything you need to know about buttons in Bootstrap 4.
By the end of this guide, you’ll be able to create and customize buttons for various purposes, ensuring a seamless user experience on your website.
Basic Button Classes
Bootstrap 4 provides predefined button styles that are ready to use. You simply add the .btn class along with a contextual class to create buttons.
Contextual Button Classes
.btn-primary: Blue (default primary action).btn-secondary: Gray (general purpose).btn-success: Green (indicates success).btn-danger: Red (indicates danger or errors).btn-warning: Yellow (indicates caution).btn-info: Light blue (informational).btn-light: White (for light themes).btn-dark: Black (for dark themes)
Example:
<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> Button Sizes
Bootstrap 4 buttons come in three size variants:
.btn-lg: Large buttons.btn-sm: Small buttons- Default size: No additional class needed
Example:
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-secondary">Default Button</button>
<button class="btn btn-success btn-sm">Small Button</button> Outline Buttons
Outline buttons are created using the .btn-outline-* classes. They have a transparent background with a border.
Example:
<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>
<button class="btn btn-outline-dark">Dark</button> Block-Level Buttons
To make a button span the full width of its container, use the .btn-block class.
Example:
<button class="btn btn-primary btn-block">Block Button</button> Buttons with Links
You can use <a> tags with button classes to create button-style links.
Example:
<a href="http://thecodingcollege.com/" class="btn btn-info" role="button">Visit The Coding College</a> Button Groups
Use .btn-group to group multiple buttons together.
Example:
<div class="btn-group" role="group" aria-label="Basic example">
<button class="btn btn-primary">Left</button>
<button class="btn btn-secondary">Middle</button>
<button class="btn btn-success">Right</button>
</div> Disabled Buttons
You can disable buttons by adding the disabled attribute or the .disabled class.
Example:
<button class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Disabled Link</a> Buttons with Icons
Icons make buttons more interactive and visually appealing. Use libraries like Font Awesome or Bootstrap Icons.
Example:
<button class="btn btn-success"><i class="fas fa-check"></i> Submit</button>
<button class="btn btn-danger"><i class="fas fa-trash"></i> Delete</button> Buttons with Dropdowns
Combine buttons with dropdowns using the .dropdown-toggle class and data-toggle="dropdown".
Example:
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div> Styling Buttons with Custom CSS
You can further customize buttons using custom CSS styles.
Example:
<style>
.custom-btn {
background-color: #5cb85c;
color: white;
border-radius: 50px;
padding: 10px 20px;
}
</style>
<button class="custom-btn">Custom Button</button> Best Practices for Buttons
- Be Consistent: Use consistent styles for buttons across your website to maintain visual harmony.
- Provide Feedback: Use appropriate contextual classes (
success,danger, etc.) to indicate actions clearly. - Avoid Overloading: Don’t use too many button styles on a single page.
- Test Responsiveness: Ensure buttons look great on all screen sizes.
Practical Example: Buttons in Action
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center text-primary">Bootstrap 4 Buttons</h1>
<h3>Basic Buttons</h3>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<h3 class="mt-4">Outline Buttons</h3>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-dark">Dark</button>
<h3 class="mt-4">Block-Level Buttons</h3>
<button class="btn btn-warning btn-block">Block Button</button>
<h3 class="mt-4">Buttons with Icons</h3>
<button class="btn btn-primary"><i class="fas fa-plus"></i> Add</button>
<button class="btn btn-danger"><i class="fas fa-times"></i> Cancel</button>
</div>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> Learn More with The Coding College
With Bootstrap 4 Buttons, you can enhance your website’s usability and create visually stunning interfaces. At The Coding College, we’re dedicated to helping you master web development with tutorials tailored to your needs.