Tutorial Image

Bootstrap 4 buttons

Bootstrap 4 buttons are used to perform interactive actions such as form submit, reset, redirecting to other pages, etc.

Steps to create bootstrap 4 buttons :

  • Add .btn to the <button> element base class.
  • To assign background color of the <button>,use contextual class(.btn-*) to the <button> element base class to provide background color of the button.
  • Followings are the contextual class: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark,btn-link.

Button Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Button

Button classes can also be applied to hyperlink and form input.

Note: Here, .btn and .btn-* is applied to the <button>, <a>, <input> element base class to create button.

Bootstrap 4 buttons: Size

Follow the following steps to create larger and smaller button.

  • Larger Button: To create large button assign .btn-lg to the <button>, <a> & <input> element base class.
  • Small Button: To create small button assign .btn-sm to the <button>, <a> & <input> element base class.

Large Button

Smaller Button

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Large Button

Smaller Button


Note: In the above example you are observing that for large button .btn-lg is used while for small button .btn-sm is used.

Creating Active & Disabled Buttons

To create active and disabled button ,follow the given below statement.

  • Active Button: An Active button(appear pressed) is created by assigning .active to the <button>, <a>,<input> base class.
  • Disable Button: To create disabled button(unclickable) is created by assigning .disabled to the <button>, <a>,<input> base class.

Active & Disabled Button Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Active Button


Disabled Button

Disabled Link

Note:In the above example,.active & .disabled is assigned to <button>,<a> & <input> element base class.

Creating Bootstrap Outline Button

Follow the given below statement to create boostrap outline button.

  • Add .btn to the <button>,<input>,<a> element base class.
  • Now Add other contextual classes.btn-* to the <button>,<input>,<a> element base class.
  • Followings are the list of contextual classes like btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link.

Outline Button Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Outline Button

Creating bootstrap outline button is very easy.You have to add .btn class followed by one of the contextual class to <a>,<button> or <input> element base class.

Block Level Buttons

To create block level button that spans the entire width of the parent container,use .btn-block class to the <button> ,<a> , <input> element base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Block Level Button

Bootstrap Outline Block Level Button

Bootstrap block level element can take full available width and it is created by assigning .btn-block to the <button>,<a> or <input> element base class.

Spinner Buttons

Bootstrap provides class that indicate the loading state inside the web page.

Process of creating bootstrap 4 spinner buttons.

  • Assign .spinner-border & .spinner-border-* to the child element(<span>) of button.
  • Please keep in mind that .spinner-border-* is used to control the size of spinner. To create smaller spinner use .spinner-border-sm & for larger spinner size use .spinner-border-lg.

Spinner Button Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Spinner Button

Note:In the above example,.spinner-border & .spinner-border is assigned to the <button> child element base class to create a loading spinner inside the project.

Online Test / Quiz