BOOTSTRAP 4 BUTTONS

❮ Prev Next ❯

Bootstrap provides us different predefined classes to create buttons. These classes can be used to easily create buttons of different style, each serves its own semantic purpose.

To create a basic bootstrap button use .btn class. Bootstrap4 provide us nine different types of button, use these button claases to create button of your choice. These button classes are :

btn-primary
btn-secondary
btn-success
btn-info
btn-warning
btn-danger
btn-dark
btn-light
btn-link

Example

▶ Run the code

Bootstrap button on <a> and <input> tag

Bootstrap's .btn classes are designed to be used with <button> tag, but it can be used with <a> and <input> tags also.

Add role="button" on <a> tag to appropriately convey their purpose.

Link

Example

▶ Run the code

Outline Buttons

The bootstrap's outline button have transparent background, colored text and colored border.

To create bordered button in bootstrap replace default modifier with .btn-outline-*.

Example

▶ Run the code

Button Sizes

Using bootstrap classes you can customize size of buttons. Use .btn-lg to make button large and use .btn-sm to make button smaller.

Example

▶ Run the code

You can also create block level button which cover full width of parent element by adding .btn-block.

Example

▶ Run the code

Bootstrap Disabled Buttons

There are many situation when we want a disabled button. Example: when user has not filled all necessary input of a form, when user has not acceped term and condition and many more. So in such situation we disable button to stop further actions.

To make a button disabled use disabled boolean attribute to any button element.

Example

▶ Run the code

disabled is a button attribute you can't use it on anchor tag (<a>).

To create a disabled button for <a> tag use .disabled class to it to make it visibally disabled.

Disabled buttons should include the aria-disabled="true" attribute to indicate state of element.

Primary link Link

Example

▶ Run the code

Bootstrap Active Button

As can disable a button, we can also make a button visibally active button. To make a button active use .active class.

Example

▶ Run the code

Spinner Buttons

Using bootstrap you can easily create a spinner button by adding a spinner icon in a button. Spinner buttons indicates loading state of any applicaation.

Below is example of spinners in bootstrap:

Example

To include spinner in button just enclose above code in your button.

Example

▶ Run the code

Points to remember:

To create basic button use .btn class.
Bootstrap4 provides 9 different types of button style which are of different colors indicating different meaning.
To create bordered button use .btn-bordered-* class (replace * with button theme you want)

Bootstrap 4 Button Groups

❮ Prev Next ❯