Button Styles in Bootstrap 5 | Explained

Inserting plain buttons on your web pages can be boring. Giving them a certain style will add up to the beautification of your website. If you are developing your website using Bootstrap 5 then styling buttons is no big deal. Various classes are available in this Bootstrap version that can perform the task of button styling in merely a single line of code. To learn various ways of styling buttons in Bootstrap 5 read the article till the end.

Adding colors to buttons

You can add a background color to buttons that not only just adds beauty to them but also conveys the purpose behind the button. In order to do so you can use any of these given classes which are, .btn, .btn-primary, .btn-success, .btn-info, .btn-secondary, .btn-warning, .btn-danger, .btn-dark, .btn-light.

How to add colors to the button using Bootstrap 5

In the example below we are going to demonstrate some of the above-mentioned classes.

HTML

The above code generates three buttons, first with a basic styling, second having a green background color and indicating a positive action and the last one having a blue background color and representing an important action. Notice that we have used the .btn class when styling each button because this gives certain padding to the button along with a basic style.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-661.png" data-lazy- height="82" src="data:image/svg xml,” width=”546″>

You can try other classes to see how they style the buttons.

Buttons as Links

You can also link other web pages or sources to buttons in Bootstrap 5.

How to redirect a user to another source using button

Suppose you want to redirect your users to another source using a button.

HTML

Here you can simply provide the link of the other source to the href attribute of the anchor tag. Moreover, the button created in the above code snippet will have a light blue color and basic style.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-664.png" data-lazy- height="79" src="data:image/svg xml,” width=”607″>

Here is how you can make buttons as links.

Input Button

Apart from the anchor tags you can also use the above-mentioned button classes on inputs as well. As you know the tag can render some types such as submit or reset, therefore, you can apply styling to any of these input types.

How to apply button classes on inputs

Here is how you can apply button classes on inputs.

The above will generate three types of input buttons with each button having a different background color.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-668.png" data-lazy- height="79" src="data:image/svg xml,” width=”466″>

In this way you can apply classes associated with buttons on various input types.

Button Sizing

In some scenarios we wish to make enlarged buttons, meanwhile, in other cases, we want the opposite. Using the classes linked to the sizes of buttons we can achieve this task.

How to change button sizes in Bootstrap 5

Consider the example below to understand how to make buttons of various sizes.

HTML

In the above code, we are generating three buttons of small, medium, and large sizes respectively. All of the buttons have been given a certain style as well.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-671.png" data-lazy- height="94" src="data:image/svg xml,” width=”738″>

These are buttons of varying sizes.

Outlining Buttons

You can also outline your buttons using the .btn-outline class in combination with color classes to style your buttons.

How to give outline to buttons in Bootstrap 5

Suppose you want to outline your button using bootstrap 5 then follow the code snippet below.

The above will generate a button with a green outline, furthermore, when you bring the mouse over the button a hover effect will be applied that will provide it a background color corresponding to the color class used every time the mouse is brought over it.

Output

<img data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-6.gif" height="76" src="data:image/svg xml,” width=”495″>

The button has been given an outline along with a hover effect.

Active and Disabled Buttons

To add beauty to your button you can either add states such as active or disabled on your buttons or style the states of the button.

How to make a button diabled in Bootstrap 5

Let’s generate two buttons, one with an active state and the other with a disabled state.

HTML

In the above code, the first button has a basic styling along with a light blue background and an active state, meanwhile, the second one has been disabled and has the same style as the first one. Moreover, both the buttons have white text color.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-675.png" data-lazy- height="83" src="data:image/svg xml,” width=”565″>

These are buttons with the active and disabled states.

Block-level Buttons

For the purpose of creating buttons that take up the entire horizontal space you have to assign the .d-grid class to the div containing the button element, meanwhile, assign the .btn-block class to the button element.

How to create a block-level button using Bootstrap 5

Let’s create a block-level button.

HTML

Here we are generating a full-width button using the .d-grid class on the parent element that makes it span the whole width of the parent element.

Output

<img data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/word-image-679.png" data-lazy- height="87" src="data:image/svg xml,” width=”954″>

The above output shows a block-level button.

Conclusion

Buttons can be styled in multiple ways using the various Bootstrap 5 classes associated with buttons. For instance, you can add colors to buttons using classes such as .btn-primary, .btn-success, .btn-info, etc. Furthermore, you can use other classes available to make buttons as links, give them a certain size, an outline, or make them block-level. This blog discusses various styles that you can provide to buttons using Bootstrap 5.