Bootstrap Tutorial - Bootstrap Buttons

We can easily create a button in Bootstrap by adding the btn class to convert an a, button, or input element into a fancy bold button in Bootstrap.

<a href="#" class="btn btn-primary">Click Here</a>


<!DOCTYPE html><!--   w  ww .  j  a  v  a 2s .c  o  m-->
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style='margin:30px'>
     <a href="#" class="btn btn-primary">Click Here</a>
  </body>
</html>

The code above is rendered as follows:

Buttons come in various color options:

btn-default for white
btn-primary for dark blue
btn-success for green
btn-info for light blue
btn-warning for orange
btn-danger for red

The following table lists the different buttons which are available in the Bootstrap:

Class	Description
`btn btn-default`	Default gray button with gradient.
`btn btn-primary`	primary action button in a set of buttons.
`btn btn-info`	alternative to the default button.
`btn btn-success`	successful or positive action.
`btn btn-warning`	Indicates caution should be taken with this action.
`btn btn-danger`	Indicates a dangerous or potentially negative action.
`btn btn-link`	Make button look like a link.

And in various sizes:

btn-lg for large buttons
btn-sm for small buttons
btn-xs for extra small buttons

There are some more helper classes for buttons available:

btn-block will make the button span across the whole grid
active will make the button look like it's currently clicked
disabled will make the button unable to be clicked and appear faded.

The following example will show you these buttons in action.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<hr>
<input type="button" class="btn btn-default" value="Default">
<input type="button" class="btn btn-primary" value="Primary">
<input type="button" class="btn btn-info" value="Info">
<input type="button" class="btn btn-success" value="Success">
<input type="button" class="btn btn-warning" value="Warning">
<input type="button" class="btn btn-danger" value="Danger">
<input type="button" class="btn btn-link" value="Link">
<hr>
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>


<!DOCTYPE html><!--from   ww  w.  j  a  va  2s. c o m-->
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
  <hr>
    <input type="button" class="btn btn-default" value="Default">
    <input type="button" class="btn btn-primary" value="Primary">
    <input type="button" class="btn btn-info" value="Info">
    <input type="button" class="btn btn-success" value="Success">
    <input type="button" class="btn btn-warning" value="Warning">
    <input type="button" class="btn btn-danger" value="Danger">
    <input type="button" class="btn btn-link" value="Link">
    <hr>
    <a href="#" class="btn btn-default">Default</a>
    <a href="#" class="btn btn-primary">Primary</a>
    <a href="#" class="btn btn-info">Info</a>
    <a href="#" class="btn btn-success">Success</a>
    <a href="#" class="btn btn-warning">Warning</a>
    <a href="#" class="btn btn-danger">Danger</a>
    <a href="#" class="btn btn-link">Link</a>
</div>
</body>
</html>

The code above is rendered as follows:

Button Size

We can change the button size by adding an extra class .btn-lg, .btn-sm, or .btn-xs.

    <button type="button" class="btn btn-default btn-lg">Default</button>
    <button type="button" class="btn btn-primary btn-lg">Primary</button>
    <button type="button" class="btn btn-info btn-lg">Info</button>
    <button type="button" class="btn btn-success btn-lg">Success</button>
    <button type="button" class="btn btn-warning btn-lg">Warning</button>
    <button type="button" class="btn btn-danger btn-lg">Danger</button>
    <hr>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <hr> 
    <button type="button" class="btn btn-default btn-sm">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Primary</button>
    <button type="button" class="btn btn-info btn-sm">Info</button>
    <button type="button" class="btn btn-success btn-sm">Success</button>
    <button type="button" class="btn btn-warning btn-sm">Warning</button>
    <button type="button" class="btn btn-danger btn-sm">Danger</button>
    <hr>
    <button type="button" class="btn btn-default btn-xs">Default</button>
    <button type="button" class="btn btn-primary btn-xs">Primary</button>
    <button type="button" class="btn btn-info btn-xs">Info</button>
    <button type="button" class="btn btn-success btn-xs">Success</button>
    <button type="button" class="btn btn-warning btn-xs">Warning</button>
    <button type="button" class="btn btn-danger btn-xs">Danger</button>


<!--from ww  w  .  j a v  a 2 s  .  c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default btn-lg">Default</button>
    <button type="button" class="btn btn-primary btn-lg">Primary</button>
    <button type="button" class="btn btn-info btn-lg">Info</button>
    <button type="button" class="btn btn-success btn-lg">Success</button>
    <button type="button" class="btn btn-warning btn-lg">Warning</button>
    <button type="button" class="btn btn-danger btn-lg">Danger</button>
    <hr>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <hr> 
    <button type="button" class="btn btn-default btn-sm">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Primary</button>
    <button type="button" class="btn btn-info btn-sm">Info</button>
    <button type="button" class="btn btn-success btn-sm">Success</button>
    <button type="button" class="btn btn-warning btn-sm">Warning</button>
    <button type="button" class="btn btn-danger btn-sm">Danger</button>
    <hr>
    <button type="button" class="btn btn-default btn-xs">Default</button>
    <button type="button" class="btn btn-primary btn-xs">Primary</button>
    <button type="button" class="btn btn-info btn-xs">Info</button>
    <button type="button" class="btn btn-success btn-xs">Success</button>
    <button type="button" class="btn btn-warning btn-xs">Warning</button>
    <button type="button" class="btn btn-danger btn-xs">Danger</button>
</div>
</body>
</html>

The code above is rendered as follows:

Buttons State

Bootstrap buttons have two states: active and inactive.

The active state has a class called active, but there's no class for the inactive state.

We can create a simple button that toggles between these two states using the following markup:

    <button type="button" 
            class="btn btn-lg btn-default" 
            data-toggle="button">Toggle Me!</button>


<!DOCTYPE html><!--   w  w w .  ja v a2  s.  co  m-->
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>  
</head>
  <body style='margin:30px'>
    <button type="button" 
            class="btn btn-lg btn-default" 
            data-toggle="button">Toggle Me!</button>
  </body>
</html>

The code above is rendered as follows:

Full width Button

We can create block level buttons which covers the full width of the parent elements by adding an extra class .btn-block.

    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>


<!DOCTYPE html><!--  w  w w.ja  va2 s  .  c o m-->
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</div>
</body>
</html>

The code above is rendered as follows:

Disabled Buttons

Buttons created through <a> tag can be disabled by adding the class .disabled.

The .disabled class only changes the visual appearance of the link, the link will remain clickable unless you remove the "href" attribute.

    <a href="#" class="btn btn-default btn-lg disabled">Default</a>
    <a href="#" class="btn btn-primary btn-lg disabled">Primary</a>
    <a href="#" class="btn btn-info btn-lg disabled">Info</a>
    <a href="#" class="btn btn-success btn-lg disabled">Success</a>
    <a href="#" class="btn btn-warning btn-lg disabled">Warning</a>
    <a href="#" class="btn btn-danger btn-lg disabled">Danger</a>


<!DOCTYPE html><!--from  ww  w  .ja  v a 2  s .c  om-->
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <a href="#" class="btn btn-default btn-lg disabled">Default</a>
    <a href="#" class="btn btn-primary btn-lg disabled">Primary</a>
    <a href="#" class="btn btn-info btn-lg disabled">Info</a>
    <a href="#" class="btn btn-success btn-lg disabled">Success</a>
    <a href="#" class="btn btn-warning btn-lg disabled">Warning</a>
    <a href="#" class="btn btn-danger btn-lg disabled">Danger</a>
</div>
</body>
</html>

The code above is rendered as follows:

Creating Disabled Buttons Using Button and Input Element

Buttons created by <button> or <input> tag can be disabled by adding the "disabled" attribute.

    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Default</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary</button>
    <button type="button" class="btn btn-info btn-lg" disabled="disabled">Info</button>
    <button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
    <button type="button" class="btn btn-warning btn-lg" disabled="disabled">Warning</button>
    <button type="button" class="btn btn-danger btn-lg" disabled="disabled">Danger</button>


<!--from w  ww . j a  va2s  .  c o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Default</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary</button>
    <button type="button" class="btn btn-info btn-lg" disabled="disabled">Info</button>
    <button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
    <button type="button" class="btn btn-warning btn-lg" disabled="disabled">Warning</button>
    <button type="button" class="btn btn-danger btn-lg" disabled="disabled">Danger</button>
</div>
</body>
</html>

The code above is rendered as follows:

Stateful Buttons

We can change the normal state of a button to a loading state by simply adding the data attribute data-loading-text="Loading..." to a button.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">  
$(function() { <!--from w w w .  j  a  v a2  s  .  c om-->
    $(".btn").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });        
    });
});   
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default" data-loading-text="Loading ...">Default</button>
    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Primary</button>
    <button type="button" class="btn btn-info" data-loading-text="Loading...">Info</button>
    <button type="button" class="btn btn-success" data-loading-text="Loading...">Success</button>
    <button type="button" class="btn btn-warning" data-loading-text="Loading...">Warning</button>
    <button type="button" class="btn btn-danger" data-loading-text="Loading...">Danger</button>
    <button type="button" class="btn btn-link" data-loading-text="Loading...">Link</button>
</div>
</body>
</html>

Click to view the demo

Note

In the code, we have created a large gray button using btn, btn-lg, and btn-default classes.

It is currently in the inactive state. When the user clicks on it, Bootstrap will add an extra active class to the button.

The attribute data-toggle with a value button helps in achieving this toggling functionality.