Bootstrap Button Plugin

Using button plugins we can add more features to button. A number of buttons can also be added to toolbars etc.

The button plugin can be added into bootstrap individually by including the button.js files. Button plugin can also be added all at once when we use bootstrap.js files.

Loading State:

A loading state can be added to buttons by using the attribute data-loading-text = “loading…” in the button element.

Consider the following example in which we have used this attribute within the button element:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<button id = “fat-btn” class = “btn btn-success” data-loading-text = “Loading…” type = “button”>

Button Loading state

</button>

<script>

$(function() {

$(“.btn”).click(function(){

$(this).button(‘loading’).delay(200).queue(function() {

});

})

});

</script>

</body>

</html>

The above code will generate the following result:

OUTPUT:

button loading state

In the above example, the loading method is used when we click on the button the text of the button will change as follows:

loading

Single toggle:

Toggling is to change the state of the button. It makes the button look pressed. Bootstrap allows single toggling on a single button. This can be done by using the attribute data-toggle = “button” within button element. Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< button type = “button” class = “btn btn- success” data- toggle = “button” >

Single toggle on Success Button

</ button >

</ body >

</ html >

The above example will generate the following result:

OUTPUT:

Single toggle on Success Button

Check Box:

A group of check boxes can be created by using data-toggle = “buttons” in the btn-group. This will also add toggling to check boxes.

Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< div class = “btn- group” data- toggle = “buttons” >

< label class = “btn btn- success” >

< input type = “checkbox” > Choice 1

</ label >

< label class = “btn btn- success” >

< input type = “checkbox” > Choice 2

</ label >

< label class = “btn btn- success” >

< input type = “checkbox” > Choice 3

</ label >

</ div >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

following result

Radio:

A group of radio inputs can be created by using data-toggle = “buttons” in the btn-group. This will also add toggling to radio inputs.

Consider the following example:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div class = “btn-group” data-toggle = “buttons”>

<label class = “btn btn-success”>

<input type = “radio” name =” options” id = “choice1”> Choice 1

</label>

<label class = “btn btn-success”>

<input type = “radio” name = “options” id = “choice2”> Choice 2

</label>

<label class = “btn btn-success”>

<input type = “radio” name = “options” id = “choice3”> Choice 3

</label>

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

OUTPUT

Usage:

Buttons can be enabled by using JavaScript. Use the following line of code:

$(‘.btn’).button()

Options:

There are no options for button plugin.

Methods:

Consider the following table in which methods of button plugin are described:

Method Description Basic Syntax
.button (‘toggle’) Toggling is to change the state of the button. This method makes the button look pressed. $().button(‘toggle’)

 

.button (‘loading’) This method is used to disable the button and change the text of button to “loading…” $().button(‘loading’)

 

.button (‘reset’) This method is used to change the text of the button to original text. $().button(‘reset’)

 

.button (string) This method is used to specify the text of button. $().button(string)

 

Example:

Consider the following example in which we have used the methods of button plugin:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< h2 > Example of Button plugin Methods < /h2 >

< h4 > Using .button(‘toggle’) method </ h4 >

< div id = “Button1” class = “bs- example” >

< button type = “button” class = “btn btn- success” > Success </ button >

</ div >

< h4 > Using  .button(‘loading’) method </ h4 >

< div id = “Button2” class = “bs- example” >

< button type = “button” class = “btn btn- success” data- loading- text = “Loading…” >

Success

</ button >

</ div >

< h4 > Using .button(‘reset’) method </ h4 >

< div id = “Button3” class = “bs- example” >

< button type = “button” class = “btn btn- success” data- loading-text = “Loading…” >

Success

</ button >

</ div >

< h4 > Using  .button(string) method </ h4 >

< button type = “button” class = “btn btn- success” id = “Button4”

data- complete- text = “Finished loading” >

Enter

</ button >

< script type = “text/javascript” >

$ (function () {

$ (“#Button1 .btn”).click (function (){

$ (this).button (‘toggle’);

} );

} );

$ (function () {

$ (“#Button2 .btn”). click (function (){

$ (this).button (‘loading’).delay(200).queue (function () {

} );

} );

} );

$ (function () {

$ (“#Button3 .btn”). click (function (){

$ (this).button (‘loading’). delay (200).queue (function () {

$ (this).button (‘reset’);

} );

} );

} );

$ (function () {

$(“#Button4”). click (function (){

$ (this).button (‘loading’).delay (200).queue (function () {

$ (this).button (‘complete’);

} );

} );

} );

</ script >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

each button

In the above example, different methods are applied to each button. Consider the following image which shows all effects on each button: