Buttons in Bootstrap 4

For making a web page more interactive, buttons play an essential role. So, if you make use of .btn class, it will inherit the default appearance (the gray button) having rounded corners. But Bootstrap provides some excellent customization features such as type or style, size, state, etc. You will learn all of these different customization classes and features of Buttons in this chapter.

Button Styles in Bootstrap 4

Various types of buttons are provided by Bootstrap 4. You have to use the class .btn with btn-style class. These look like:

<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-light" type="button">Light</button>
<button class="btn btn-dark" type="button">Dark</button>
<button class="btn btn-link" type="button">Link</button>

Button Tags in Bootstrap 4

In the above example we used the .btn class in the <button> element, and the .btn class can also be used with anchor tag <a> and <input> elements. These look like:

Click here

<a chref="#" lass="btn btn-link">Click here</a>
<Input type="submit" class="btn btn-primary">
<Input type="reset" class="btn btn-light">

Button with Outlines

In these types of buttons, only the outline displays without any background color which represents the style of the button. You have to use the class .btn-outline with btn-style class. These look like:

Here's a code snippet of outline classes:

<button class="btn btn-outline-primary" type="button">Primary</button>
<button class="btn btn-outline-secondary" type="button">Secondary</button>
<button class="btn btn-outline-success" type="button">Success</button>
<button class="btn btn-outline-danger" type="button">Danger</button>
<button class="btn btn-outline-warning" type="button">Warning</button>
<button class="btn btn-outline-info" type="button">Info</button>
<button class="btn btn-outline-light" type="button">Light</button>
<button class="btn btn-outline-dark" type="button">Dark</button>
<button class="btn btn-outline-link" type="button">Link</button>

Button Size

Bootstrap 4 also allows us to customize the size of the button size according to the requirement. Here is the list of classes that you can use to give different sizes to your buttons.

.btn-lgThis btn-lg class will make the size of your button large.
.btn-smThis btn-sm class will make the size of your button small.
.btn-xsThis btn-xs class will make the size of your button extra small.
.btn-blockThis btn-block class will make the size of your button a block level button—which stretches to its remains full width.

States of Button

Bootstrap also allows the developer to control the rules of buttons. The rules can be either active or disabled. In the case of active buttons, the buttons will look as if they are pressed. Also, you can notice a darker border with inset shadow formed on those buttons.

Again, in case of the disabled button, you can notice the fadedness in those buttons. The faded color will lose 50% of the gradient, and it will also not get highlighted as you hover your mouse on them. Let's use them now:

<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-default active" type="button">Active</button>
<button class="btn btn-default" disabled="disabled" type="button">Disabled</button>

<button class="btn btn-primary" type="button">Default Primary</button>
<button class="btn btn-primary active" type="button">Active Primary</button>
<button class="btn btn-primary" disabled="disabled" type="button">Disabled Primary</button>

Scroll Back to Top