Buttons play an essential role in making a web page more interactive. Using the Bootstrap .btn class inherits the default grey button look with rounded corners. And Bootstrap 4 provides excellent customization features for buttons, such as type or style, size, state, etc. In this tutorial, you will learn about all these different customizable classes of buttons.



Button Styles in Bootstrap 4

Different types of buttons are provided by Bootstrap 4, such as:

Example Code:

<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>

In the above example, the specific .btn-<style name> class is implemented along with the .btn class to style the button tag.

Button With Outlines

In these styles of buttons, only the outline is shown without any background color representing the button's style.

Here's a code snippet of button outline classes:

Example Code:

<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 abtn-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>

In the above example, the specific .btn-outline-<style name> class is implemented along with the .btn class to style the button tag.

Button Sizes

Bootstrap 4 also allows customizing the size of the buttons per the design requirement. There are different classes here that can give different sizes to the buttons.

Class Description Example
.btn-lg This .btn-lg class makes a button size large.
.btn-sm This .btn-sm class makes a button size small.
.btn-block This .btn-block class makes the size of a button a block-level button—which stretches to its 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 on those buttons. Again, in the case of the disabled button, you can see the fadedness in those buttons. The faded color will lose 50% of the gradient and will not get highlighted as you hover your mouse on them.

Example Code:

<button class="btn" type="button">Default</button>
<button class="btn active" type="button">Active</button>
<button class="btn" 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>


Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram