In coding, even the smallest thing can be extremely important. And when we talk about design, those tiny mistakes are visible to every Internet user, too.
If a button is styled poorly, it might be hard to find or clash with the overall design. To avoid that, we have prepared you a short guide on how to use Bootstrap button classes meant for styling buttons.
As you go through our examples, you will learn to change their color, outline, size, and display properties. We will also introduce you to a simple way to make your Bootstrap buttons change style when they are clicked, adding to the interactivity and responsiveness to your website.
Contents
Bootstrap Button Classes: Main Tips
- Using Bootstrap 4 you can create buttons.
- A Bootstrap button can be styled regarding its size, color, display property and whether it is active or not.
Bootstrap Button Styles
There are various Bootstrap button classes that you can use for styling. Let's review the ways to assign a color, outline, size, and display properties to a certain button in more detail.
Color
In our previous tutorial we have discussed using contextual classes for assigning colors. You can use them to define Bootstrap button color as well.
It should also be noted that Bootstrap button classes work on <input> and <a> as well. That means all of the elements in the code example below are going to have the same styling:
<button class="btn btn-success" type="button">Basic button</button>
<input class="btn btn-success" value="Submit Button" type="submit">
<input class="btn btn-success" value="Input Button" type="button">
<a href="#" class="btn btn-success" role="button">Button Link</a>Here's a list of the contextual classes that can be used for defining Bootstrap button colors:
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-primary
- .btn-secondary
- .btn-light
- .btn-dark
As you can see, the prefix you need to use with the contextual classes is .btn. Now let's view a code example below to see how they perform:
Outline
The button classes listed above will make your Bootstrap buttons filled with color. Now, if you prefer to keep them neutral-colored and only want to have them displayed in an outline, you need to add outline between the .btn- and, for example, -success when assigning a contextual class.
Look at the code example below. This is how it could look in your script:
<button class="btn btn-outline-success" type="button">Outlined success-themed button</button>Size
Certain classes can also be used for declaring the size of Bootstrap buttons. Use .btn-lg to make it bigger and .btn-sm to make it smaller.
You can see both cases in the example below. Open it in the code editor and see the difference:
<button class="btn-lg btn" type="button">Large button</button>
<button class="btn-sm btn" type="button">Small button</button>Block Level
In case you need to make your buttons more visible, you can display them as block level elements. Such an element starts in a new line and takes up the whole width of the page.
A class you would use in this case is .btn-block. See how it works in the example:
<button class="btn btn-block" type="button">Block level button</button>Activate/Disable Buttons
Lastly, you can also make buttons change their style when clicked. For example, an outline might appear, just like you see in the example below:
<button class="btn disabled" type="button">Disabled</button>
<button class="btn active" type="button">Active</button>
<a href="#" class="btn disabled">Disabled</a>Bootstrap Button Classes: Summary
- Bootstrap 4 allows the developer to create clickable buttons using Bootstrap button classes.
- Color, size, and display property can be modified in Bootstrap button styles.
- You can also make the buttons change style when active.