How to use custom CSS styles In Bootstrap
User can also customize the color, by adding hard coded CSS styles according to there own needs and requirements.
Example: To demonstrate changing the color of the button using custom CSS styles.
HTML
<!DOCTYPE html><html lang="en"><head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> </script> <style> .custom-btn { background-color: #8b0000; color: #fff; } </style></head><body> <div class="container text-center"> <div class="mt-1"> <h2 class="text-success">w3wiki</h2> <h2>Custom color of button in Bootstrap 5</h2> </div> <div class="mt-3"> <button type="button" class="btn custom-btn"> Custom Button </button> </div> </div></body></html> |
Output:
Custom colour in Bootstrap 5
How to Change Button Color in Bootstrap 5 ?
Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you through the process of altering the button colors in Bootstrap 5 step-by-step.
Table of Content
- Using predefined color classes
- Using custom CSS styles