Bootstrap | Button Plugin

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our tutorial on Bootstrap, we will discuss about the Bootstrap button plugin.

We studied about Bootstrap buttons in our tutorial on Bootstrap Buttons. With Button plugin you can include in some interaction like control button states or create groups of buttons for more components like the toolbars.

If you want to add this bootstrap plugin functionality individually, you are going to need button.js. Else, as mentioned in the tutorial Bootstrap plugins overview, you can add bootstrap.js or the manified bootstrap.min.js.

Loading State

To add a loading state to a button, simply add the data-loading-text = "Loading..." as an attribute to the button element as shown in the following example -

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Alert Plugin

Single Toggle

To activate toggling (i.e change the normal state of a button to a push state) on a singl button, add the data-toggle = "button" as an attribute to the button element as shown in the following example -

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

Output

When the above example is executed, it will produce the following result -

Checkbox

You can create a group of checkboxes and add toggling to it by simply adding the data attribute data-toggle = "buttons" to the btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Output

When the above example is executed, it will produce the following result -

Radio

You can create a group of radio inputs and add toggling to it by simply adding the data attribute data-toggle = "buttons" to the btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option2"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "radio" name = "options" id = "option3"> Option 3
   </label>
</div>	

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Popover Plugin

Usage

Button plugin can be enabled via JavaScript using the the following code below -

$('.btn').button()

Options

There are no options.

Methods

The following table below lists some useful methods for button plugin -

Method	Description	Example
button('toggle')	Toggles push state. Gives the button the appearance that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.	$().button('toggle')
.button('loading')	When loading, the button is disabled and the text is changed to the option from the data-loading-text attribute of button element	$().button('loading')
.button('reset')	Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state	$().button('reset')
.button(string)	String in this method is referring to any string declared by the user. To reset the button state and bring in new content use this method.	$().button(string)

Example

Following example demonstrates the usage of the button plugin methods -

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
   
   $(function() { 
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { 
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
   });  
   
   $(function() { 
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   }); 
</script> 

Output

When the above example is executed, it will produce the following result -

READ: Bootstrap | Tab Plugin

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Collapse Plugin.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.