How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery

While converting a Bootstrap 3 template design for use with Bootstrap 4, I noticed they removed stateful buttons (eg: “loading” and “reset” button states) from BS4! Granted it was mentioned in BS3, but I never noticed theĀ deprecated warning šŸ™

The deprecated code for showing a button’s loading state wasĀ $('#selector').button('loading') andĀ to return the button to its original state you would useĀ Ā $('#selector').button('reset')Ā .

I never realized how much I used stateful Bootstrap buttons until I was wrapping up the conversion with a page that makes heavy use of AJAX calls with LOTS of code-blocks like…

  beforeSend: function() {
  complete: function() {

I realize certain features are modified/removed here and there from libraries like Bootstrap, but the functionality of the “button” plugin was invaluable to me and I cannot bear to part with it.

I came up with this simple jQuery plugin to retain use of stateful buttons…

// Loading button plugin (removed from BS4)
(function($) {
  $.fn.button = function(action) {
    if (action === 'loading' &&'loading-text')) {'original-text', this.html()).html('loading-text')).prop('disabled', true);
    if (action === 'reset' &&'original-text')) {
      this.html('original-text')).prop('disabled', false);

You can of course use the jQuery plugin’s methods on any element, but buttons (links, etc) are likely more suitable IMO.

<button id="selector" data-loading-text="Loading...">Click Me</button>

Note: UsesĀ html() instead ofĀ text() so you can include things like FontAwesome markup in data-loading-text.

Having not checked the original Bootstrap/jQuery methods where this functionality was originally included, I have no idea if this is being done the same way as before. It was just a no-brainer way of achieving the same functionality.

Feel free to comment šŸ˜‰

2 thoughts on “How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery”

Leave a Reply to Dane Cancel reply

Your email address will not be published. Required fields are marked *