Because of its framework, Bootstrap’s buttons are already styled when they’re added to the site. However, if you want to create your own custom button style, you can do that in Bootstrap’s CSS file.
If you haven’t yet installed Bootstrap on your server, see our Setting Up Bootstrap on Your Server article.
Step 1: Find the Button Class
The first step to customizing your buttons is to know the button class. Go to your HTML document if you already have buttons on your site. You will be able to find the button class there. Here’s an example of what it might look like:
<button class="btn btn-default" type="submit">Button</button>
If you want to add new buttons to your Bootstrap site, you can use one of the default button classes. You can find the default buttons in the Bootstrap documentation’s Button section.
Step 2: Find the Class in CSS
Once you have identified the button class you want to customize, go to your Bootstrap’s CSS file and, if it’s not already there, add the class. Here’s an example of what this might look like:
.btn-success {
/*formatting goes here*/
}
Step 3: Format the Button
You can now customize the button by using CSS. You may also want to edit the active, focus, and hover forms of the button as well since they also have a default styling. Formatting the active, focus, and hover forms of the button will look something like this:
.btn-success:active{ /*formatting goes here*/ }
btn-success:hover{ /*formatting goes here*/ }
btn-success:focus{ /*formatting goes here*/ }
Once you have applied your formatting, upload your changes to the server and save.