Javatpoint Logo
Javatpoint Logo

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

Test it Now

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.

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now

Button Classes with other elements

You can use button classes with other tags i.e. <a>, <button>, or <input> element etc.

Example:

Test it Now

Button Outline/ Bordered buttons

Bootstrap 4 provides eight outline/bordered buttons:

Example

Test it Now
Next TopicBootstrap Grid




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA