Buttons are essential elements in any web design, used for navigation, form submissions, or triggering actions. Bootstrap 3 simplifies the process of creating visually appealing and responsive buttons with a wide range of pre-defined CSS classes.
In this guide, we’ll cover the various button styles, sizes, and states available in Bootstrap 3, along with practical examples to help you make the most of these features. Visit TheCodingCollege.com for more Bootstrap tutorials and resources.
1. Basic Button Classes
Bootstrap 3 provides several button styles for different use cases. Apply the .btn class along with a contextual style class.
| Class | Description |
|---|---|
.btn-default | Standard button style. |
.btn-primary | Highlights primary actions. |
.btn-success | Indicates a successful action. |
.btn-info | Indicates informative action. |
.btn-warning | Indicates a warning. |
.btn-danger | Indicates a dangerous action. |
Example:
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>2. Button Sizes
Use size classes to adjust the size of buttons for different purposes.
| Class | Description |
|---|---|
.btn-lg | Creates a large button. |
.btn-sm | Creates a small button. |
.btn-xs | Creates an extra-small button. |
| (default) | Default button size. |
Example:
<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>
<button class="btn btn-primary btn-xs">Extra Small Button</button>3. Button States
Bootstrap buttons support active and disabled states.
Active State
Use the .active class to style an active button.
<button class="btn btn-primary active">Active Button</button>Disabled State
Disable a button by adding the disabled attribute to <button> or the .disabled class to <a> elements.
<button class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-primary disabled" role="button">Disabled Link</a>4. Button Block
To create a block-level button that spans the full width of its parent container, use the .btn-block class.
Example:
<button class="btn btn-success btn-block">Block Level Button</button>5. Button Groups
Button groups allow you to group multiple buttons together for grouped actions. Use the .btn-group class for this purpose.
Example:
<div class="btn-group" role="group">
<button class="btn btn-default">Left</button>
<button class="btn btn-default">Middle</button>
<button class="btn btn-default">Right</button>
</div>6. Buttons with Icons
Combine Bootstrap buttons with Glyphicons for added clarity.
Example:
<button class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span> Delete
</button>7. Outline Buttons (Custom Styling)
Bootstrap 3 does not include built-in outline buttons, but you can create them with custom CSS.
Example:
<style>
.btn-outline {
background-color: transparent;
border: 1px solid #007bff;
color: #007bff;
}
.btn-outline:hover {
background-color: #007bff;
color: #fff;
}
</style>
<button class="btn btn-outline">Outline Button</button>8. Buttons in Forms
Bootstrap buttons work seamlessly with forms. Combine them with form elements for interactive designs.
Example:
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>9. Buttons with Dropdowns
Create dropdowns with buttons using the .dropdown-toggle class and data attributes.
Example:
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li class="divider"></li>
<li><a href="#">Another action</a></li>
</ul>
</div>10. Customizing Button Colors
You can further customize button colors by overriding the default Bootstrap styles in your CSS.
Example:
<style>
.btn-custom {
background-color: #4caf50;
color: white;
border: none;
}
.btn-custom:hover {
background-color: #45a049;
}
</style>
<button class="btn btn-custom">Custom Button</button>Conclusion
Bootstrap 3 buttons are versatile, easy to use, and highly customizable. With the variety of styles, sizes, and states, you can create buttons that fit perfectly with your design needs. Use them in navigation, forms, modals, or any interactive elements to improve user experience.