In Progress
Lesson 37 of 39
In Progress

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.

Example:

<!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>
<style type="text/css">
  a{
    margin-top: 15px;
    margin-left: 5px;
  }
</style>
</head>
<body>
  <a href="#" class="btn btn-default">Click Here</a>
  <a href="#" class="btn btn-primary">Click Here</a>
  <a href="#" class="btn btn-info">Click Here</a>
  <a href="#" class="btn btn-success">Click Here</a>
  <a href="#" class="btn btn-warning">Click Here</a>
  <a href="#" class="btn btn-danger">Click Here</a>
</body>
</html>

Output:

KodNest bt31

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:

ClassDescription
btn btn-defaultDefault gray button with gradient.
btn btn-primaryprimary action button in a set of buttons.
btn btn-infoalternative to the default button.
btn btn-successsuccessful or positive action.
btn btn-warningIndicates caution should be taken with this action.
btn btn-dangerIndicates a dangerous or potentially negative action.
btn btn-linkMake 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.

Button Size

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

Example

<!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>
<style type="text/css">
  button{
    margin-top: 15px;
    margin-left: 5px;
  }
</style>
</head>
<body>
  <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>
    <br>
    <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>
    <br>
    <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>
    <br>
    <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>
</body>
</html>

Output:

KodNest bt32

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.

Example:

<!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-button{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-button">
    <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-info btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
    <button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
</div>
</body>
</html>

Output:

KodNest bt33

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.

<!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-button{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-button">
    <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>

Output:

KodNest bt34

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() {
    $(".btn").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
            $(this).dequeue();
        });
    });
});
</script>
<style type="text/css">
    .bs-button{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-button">
    <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>

Output:

KodNest bt35
KodNest Training New Batch is starting on 02nd November 2020. Attend one week free demo classes.Register Now

New Report

Close