Bootstrap Buttons
There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles:
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Bootstrap Button Example: specifying seven styles
There are 3 types of new buttons added in Bootstrap 4 along with 7 buttons given in Bootstrap 3.
These 3 buttons are:
- Secondary
- Dark
- Light
The following classes are used to specify them respectively:
Example:
Let's see all buttons supported in Bootstrap 4.
Bootstrap Button Size
In Bootstrap, you can choose a button according to your requirement. It provides four button sizes.
The following classes define the different sizes:
- .btn-lg
- .btn-md
- .btn-sm
- .btn-xs
Example:
Bootstrap Enable/Disable Buttons
You can set a button disable or unclickable state.
The .active class is used to make a button appear pressed, and the class .disabled makes a button unclickable:
Example:
Bootstrap Block level buttons
The block level button covers the entire width of the parent element.
The .btn-block class is used to create a block level button:
Example:
Button Classes with other elements
You can use button classes with other tags i.e. <a>, <button>, or <input> element etc.
Example:
Button Outline/ Bordered buttons
Bootstrap 4 provides eight outline/bordered buttons:
Example