• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Button Plugin

July 29, 2014 //  by Krishna Srinivasan//  Leave a Comment

The button is used for creating button control which defines clickable action. The buttons are integral part of HTML which selects the elements that are of type button. The buttons are used for various purposes such as submit button, reset button etc on a web page. It is often used with form element, can be also used as standalone control. The Bootstrap allows enhancing functionality of button. We can create group of buttons or button states for components like toolbars.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The following examples demonstrate use of different techniques used for implementing the buttons in Bootstrap. If you have any questions about bootstrap button plugin, please write it in the comments section.

Bootstrap Stateful Button

We can set normal state of a button to a loading state by using the value of data-loading-text attribute. The following is an example:

[code lang=”xml”] <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function(){
$(this).button(‘reset’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Stateful Button</h2>
<button type="button" class="btn btn-warning" data-loading-text="Loading…">Load Data</button>
</div>
</body>
</html>
[/code]

As shown in the above script, we have used attribute called data-loading-text=”Loading…” to load the data on the webpage. When we click on the button, the click method occurs and it starts loading the data by showing the text “Loading…” . When it reaches to the 1000ms, it resets the button.

  • Run Bootstrap Stateful Button Example

Bootstrap Stateful Button Example

Bootstrap Single Toggle Button

We can create single toggling on the button, by simple using data-toggle=”button” attribute which activates toggling from normal state to push state and vice versa. The following is an example:

[code lang=”xml”] <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Single Toggle Button</h2><br>
<button type="button" class="btn btn-info" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-success" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-warning" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-danger" data-toggle="button">Toggle Button</button>
</div>
</body>
</html>
[/code]
  • Run Bootstrap Single Toggle Button Example

Bootstrap Single Toggle Button Example

Bootstrap Buttons Checkbox

The checkboxes are alternatively referred to as selection boxes, which are commonly used when more than one option may need to be selected. We can create group of checkboxes, by simply adding data-toggle=”buttons” to the .btn-group class within the div element as shown in the following example:

[code lang=”xml”] <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Checkbox</h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox">Checkbox-One
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Two
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Three
</label>
</div>
</div>
</body>
</html>
[/code]
  • Run Bootstrap Button Checkbox Example

Bootstrap Button Checkbox Example

Bootstrap Buttons Radio

A radio button is a round circle represents choices in a common option list which are used when only one option is selectable. We can create group of radio inputs, by simply adding data-toggle=”buttons” to the .btn-group class within the div element as shown in the following example:

[code lang=”xml”] <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Buttons Radio</h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption1">Radio-One
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption2">Radio-Two
</label>
<label class="btn btn-warning">
<input type="radio" name="options" id="myoption3">Radio-Three
</label>
</div>
</div>
</body>
</html>
[/code]
  • Run Bootstrap Button Radio Example

Bootstrap Button Radio Example

Bootstrap Buttons via JavaScript

It’s possible to enable the buttons by using the JavaScript method $(selector).button() . The following is an example:

[code lang=”xml”] <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).button(‘loading’).delay(500).queue(function(){
$(this).button(‘reset’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Buttons via JavaScript</h2><br>
<div class="tabbale">
<ul class="nav nav-tabs">
<li class="active"><a href="#mydiv" data-toggle="tab" data-loading-text="Loading…">Tab 1</a></li>
<li><a href="#mydiv1" data-toggle="tab" data-loading-text="Loading…">Tab 2</a></li>
<li><a href="#mydiv2" data-toggle="tab" data-loading-text="Loading…">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="mydiv" class="tab-pane active fade in">
<p>HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain textHTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.</p>
</div>
<div id="mydiv1" class="tab-pane fade">
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
<div id="mydiv2" class="tab-pane fade">
<p>JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.</p>
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
  • Run Bootstrap Button via JavaScript Example

Bootstrap Button via JavaScript Example

Bootstrap Buttons Methods

Following table shows Bootstrap’s button methods:

Method Description
$().button(‘toggle’) It toggles push state of the button which makes the button appear like it has been activated.
$().button(‘loading’) It sets button state to loading. i.e. when loading, the button is disabled and swaps the text to loading text.
$().button(‘reset’) It resets the button state and swaps text to original text.
$().button(string) It resets the button state by swapping text to any data defined text state.

The following is an example:

[code lang=”xml”] <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$("#toggle-demo .btn").click(function(){
$(this).button(‘toggle’);
});
});
$(function() {
$("#load-demo .btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function() {
});
});
});
$(function() {
$("#reset-demo .btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function() {
$(this).button(‘reset’);
});
});
});
$(function() {
$("#string-demo").click(function(){
$(this).button(‘loading’).delay(1000).queue(function() {
$(this).button(‘complete’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>$().button(‘toggle’)Method</h4>
<div id="toggle-demo">
<button type="button" class="btn btn-warning">Primary</button>
</div><br>
<h4>$().button(‘loading’)Method</h4>
<div id="load-demo">
<button type="button" class="btn btn-warning"
data-loading-text="Loading data…">Primary
</button>
</div><br>
<h4>$().button(‘reset’)Method</h4>
<div id="reset-demo">
<button type="button" class="btn btn-warning"
data-loading-text="Loading data…">Primary
</button>
</div><br>
<h4>$().button(string)Method</h4>
<button type="button" class="btn btn-warning" id="string-demo"
data-complete-text="Loading completed">Click Me
</button>
</div>
</body>
</html>
[/code]

The above script defines button methods which are specified in the above table. The first method, button(‘toggle’) which gives the button the appearance that it has been activated. It uses toggle-demo id to change its state when we click on the button. The second method, .button(‘loading’) sets the button state to loading. It uses load-demo id which swaps the button text to loading text when button is clicked. The third method, .button(‘reset’) resets button state by swapping text to original text and uses reset-demo id to resets the button. The last method, .button(string) swaps the text with the string specified by the user by using the string-demo id.

  • Run Bootstrap Button Methods Example

Bootstrap Button Methods Example

Category: BootstrapTag: Bootstrap Plugins

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Bootstrap Scrollspy Plugin
Next Post: Bootstrap Affix Plugin »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact