1. Home
  2. Third-Party Integration
  3. Bootstrap
  4. How to Change Bootstrap Button Styling

How to Change Bootstrap Button Styling

These instructions are for Bootstrap version 4.2.1

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

 All buttons with this class will be affected by the styling you choose.

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.

Bootstrap is an open-source CSS framework permissive under an MIT license. Bootstrap is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for Bootstrap. Please note that there are many levels of CSS frameworks available. Please consult with your IT professional for advice and guidance on an appropriate CSS framework. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for Bootstrap's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.

Updated on February 26, 2020

Was this article helpful?

Related Articles