tutorialstonight logo
A Platform To Learn To Code

BOOTSTRAP 4 BUTTONS



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 :

  1. btn-primary
  2. btn-secondary
  3. btn-success
  4. btn-info
  5. btn-warning
  6. btn-danger
  7. btn-dark
  8. btn-light
  9. 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.

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 Points to remember:
  1. To create basic button use .btn class.
  2. Bootstrap4 provides 9 different types of button style which are of different colors indicating different meaning.
  3. To create bordered button use .btn-bordered-* class (replace * with button theme you want)
Bootstrap 4 Button Groups