What are buttons in Bootstrap 4?

Would you like to add colors and styles to your basic buttons? Bootstrap 4 has several built-in styles for different buttons. Every style has its own purpose and allows the user to add extra functionality for the function’s sound control.

There are several ways to create a button with Bootstrap 4. Let’s dig into these ways one by one.

Button styles

Different styles of buttons are present so the user can utilize the one needed. These button styles include basic, primary, secondary, and link buttons. Every style is included in Bootstrap 4 to make the programmer’s life easier.

Syntax

<button type="button">Basic Button</button>

This syntax makes basic buttons without adding any style.

To add any style to the button, use any one of the following classes along with the btn class.

Classes & Subclasses

Button Type

Class

Syntax

Primary

.btn-primary

<button type="button" class="btn  btn-primary">Primary Button</button>

Secondary

.btn-secondary

<button type="button" class="btn btn-secondary">Primary Button</button>

Success

.btn-success

<button type="button" class="btn btn-success">Primary Button</button>

Danger

.btn-danger

<button type="button" class="btn btn-danger">Primary Button</button>

Warning

.btn-warning

<button type="button" class="btn btn-warning">Primary Button</button>

Info

.btn-info

<button type="button" class="btn btn-info">Primary Button</button>

Dark

.btn-dark

<button type="button" class="btn btn-dark">Primary Button</button>

Light

.btn-light

<button type="button" class="btn btn-light">Primary Button</button>

Link

.btn-link

<button type="button" class="btn btn-link">Primary Button</button>

Code

  • HTML
  • Lines 3-6: We include Bootstrap dependencies between the <head> t in the head sectionags.
  • Lines 8-19: We use the < button > tag to show different types of buttons using Bootstrap classes.

Free Resources