Bootstrap Button Plugin

Abhay Trivedi
Last Updated: May 13, 2022

Source: Bootstrap 5

Introduction

You can create on/off toggle buttons and some interactions on top of bootstrap buttons with Bootstrap Button Plugins. You can club buttons to make a group and control their active states in Bootstrap Button Plugin. If you want to include some functionality in the individual buttons, you will need additional javascript files.

Getting Started

Include the following link in the <head> element to use bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> as well.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>


You will also have to include a jQuery script.

<script src="jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Loading Button

To add the loading style to a button, add the data-loading-text = "Loading..." attribute to the button element as shown here.

  <button class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
     Click here
  </button>
  
  <script>
    $(function() {
       $(".btn").click(function(){
          $(this).button('loading').delay(1000).queue(function() {
             //$(this).button('reset');
             $(this).dequeue();
          });
       });
    });
  </script>

 

Output

Ideal:

On click:

Single toggle

Add data-toggle = "button" attribute to button element to activate toggling on a single button.

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

 

Output

Ideal:

On click:

Checkbox

By adding the data-toggle = "button" attribute to the <div> with .btn-group you can create a group of checkboxes and enable toggling.

  <div class = "btn-group" data-toggle = "buttons">
     <label class = "btn btn-primary">
        <input type = "checkbox" style="display:none"> Item 1
     </label>
     <label class = "btn btn-primary">
        <input type = "checkbox" style="display:none"> Item 2
     </label>
     <label class = "btn btn-primary">
        <input type = "checkbox" style="display:none"> Item 3
     </label>
  </div>

 

Output

Ideal:

On click:

Radio

By adding the data-toggle = "button" attribute to the <div> with .btn-group you can create a group of radios and enable toggling.

  <div class = "btn-group" data-toggle = "buttons">
     <label class = "btn btn-primary">
        <input type = "radio" style="display:none"> Item 1
     </label>
     <label class = "btn btn-primary">
        <input type = "radio" style="display:none"> Item 2
     </label>
     <label class = "btn btn-primary">
        <input type = "radio" style="display:none"> Item 3
     </label>
  </div>

 

Output

Ideal:

On click:

Note:- Only one of the above items will be selected as we used radio.

Methods

You can enable the buttons plugin with JavaScript, as shown below.

toggle

Use $().button('toggle') to toggle between active and non active states.

  <div>
     <button type = "button" class = "btn btn-primary">Button</button>
  </div>

  <script type = "text/javascript">
     $(function () {
        $(".btn").click(function(){
           $(this).button('toggle');
        });
     });
  </script>

 

Output

    Ideal:                   On click:

  

reset

Use $().button('reset') to reset button to its original state.

  <button class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
     Click here
  </button>

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

 

Output

Ideal:

 

On click:

After Delay:

string

Use $().button(string) to display the user-defined string which is passed in this fucntion.

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

  <script type = "text/javascript">
     $(function() {
        $("#myButton").click(function(){
           $(this).button('loading').delay(1000).queue(function() {
              $(this).button('complete');
           });
        });
     });
  </script>

 

Output

Ideal:

On click:

    

After loading:

Frequently Asked Questions

  1. What is Bootstrap?
    Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components design templates like forms, buttons, navbar, and many more.
     
  2. Why should we use Bootstrap Button Plugin?
    With Bootstrap Button Plugin, you can do more with the Bootstrap Button. With its help, you can add interactions such as states or create groups.
     
  3. What is Bootstrap Plugin?
    Bootstrap comes with 12 jQuery plugins that extend the features and add more interactions to your site. It helps in simplifying the development of informative web pages. 

Key Takeaways

In this article, we learn how to use the Bootstrap Button Plugin in our projects and make our websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.

If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think