For making a web page more interactive, buttons play an essential role. So, if you use .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, representing the button's style. 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.

Class Description Example
.btn-lg This btn-lg class will make the size of your button large.
.btn-sm This btn-sm class will make the size of your button small.
.btn-xs This btn-xs class will make the size of your button extra small.
.btn-block This 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 an inset shadow formed on those buttons.

Again, in the 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>