Bootstrap Buttons Examples

Description :

.btn btn-default class used to give transparent colour to button.
.btn btn-primary class is used to give blueish colour to button.
.btn btn-success is used to give the greenish colour to button.
.btn btn-info class is used to give the skyblue colour to button.
.btn btn-warning class is used to give the yellow colour to the button.
.btn btn-danger class is used to give red colour to the button.

Bootstrap Buttons Example - 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Button Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <h2>Button Colours</h2>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

class .dropdown-menu under ul component is used to make the dropdown list and .dropdown-toggle is used to make the dropdown toggling on click of button.Class .caretin span is used to make the arrow sign in dropdown.

Bootstrap Buttons Example - 2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Button Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>   
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="btn-group">
        <h1>Button Dropdown</h1>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Sony <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>
        </ul>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

.btn-group class is used to make a group of buttons.
.btn-group-lg can be used to make button large.
.btn-group-justified used to cover entire span of screen.
.btn-group-vertical used to make buttons vertical.

Bootstrap Buttons Example - 3

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Button Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>Button Groups</h1>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Button1</button>
        <button type="button" class="btn btn-default">Button2</button>
        <button type="button" class="btn btn-warning">Button3</button>
        <button type="button" class="btn btn-danger">Button4</button>
    </div></br></br>
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">Button1</button>
        <button type="button" class="btn btn-default">Button2</button>
        <button type="button" class="btn btn-warning">Button3</button>
        <button type="button" class="btn btn-danger">Button4</button>
    </div></br></br>
    <div class="btn-group-justified">
        <a href="#" class="btn btn-primary">Button1</a>
        <a href="#" class="btn btn-default">Button2</a>
        <a href="#" class="btn btn-warning">Button3</a>
        <a href="#" class="btn btn-danger">Button4</a>
   </div></br></br>
    <div class="btn-group-vertical">
        <button  class="btn btn-primary">Button1</button>
        <button class="btn btn-default">Button2</button>
        <button class="btn btn-warning">Button3</button>
        <button class="btn btn-danger">Button4</button>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

.btn-lg used to make big size button.
.btn-md used to make medium size button.
.btn-sm used to make small size button.
.btn-xs used to make extra small size button.
.btn-block used to make block size buttons.

Bootstrap Buttons Example - 4

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Button Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <h2>Button Sizes</h2>
        <button type="button" class="btn btn-primary btn-lg">Large</button>
        <button type="button" class="btn btn-warning btn-md">Medium</button>
        <button type="button" class="btn btn-danger btn-sm">Small</button>
        <button type="button" class="btn btn-default btn-xs">ExtraSmall</button></br></br>
        <button type="button" class="btn btn-info btn-block ">Block Button</button>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

.Active and .disabled classes are used to active and disabled states of buttons.

Bootstrap Buttons Example - 5

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Button Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <h2>Button States</h2>
    <button type="button" class="btn btn-primary active">Active</button>
    <button type="button" class="btn btn-primary disabled">Disabled</button>
</body>
</html>

Try it » Download Example »

Output

Description :

Whatever written in data-loading-text attribute will show as button text at the time of loading and the time is also set to do the button again active.

Bootstrap Buttons Example - 6

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <button type="button" id="loadingBtn" data-loading-text="Loading Please Wait..." class="btn btn-primary" autocomplete="off">
        Click Me
    </button>
</body>
</html>
<script>
    $('#loadingBtn').on('click', function () {
        var btn = $(this).button('loading');
        var startTime = new Date().getTime();
        var interval = setInterval(function () {
            if (new Date().getTime() - startTime > 10000) {
                btn.button('reset');
                return;
            }
        },5000);
  })
</script>

Try it » Download Example »

Output

Description :

Checkboxes are shown in the form of buttons.

Bootstrap Buttons Example - 7

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-warning">
            <input type="checkbox" autocomplete="off"> Unchecked Checkbox 1
        </label>
        <label class="btn btn-warning active">
            <input type="checkbox" autocomplete="off" checked> Checked Checkbox
        </label>
        <label class="btn btn-warning">
            <input type="checkbox" autocomplete="off">Unchecked Checkbox 2
        </label>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

Radiobuttons are shown in the form of buttons.

Bootstrap Buttons Example - 8

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-warning">
            <input type="radio" autocomplete="off"> Unselected Radio 1
        </label>
        <label class="btn btn-warning active">
            <input type="radio" autocomplete="off" checked> Selected Radio
        </label>
        <label class="btn btn-warning">
            <input type="radio" autocomplete="off">Unselected Radio 2
        </label>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

Example shows the toggeling button which changes its state on every click.

Bootstrap Buttons Example - 9

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<body>
    <button type="button" class="btn btn-info" data-toggle="button" >
        Toggle Button
    </button>
</body>
</html>

Try it » Download Example »

Output

Description :

Example with selected radiobutton.

Bootstrap Buttons Example - 10

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h3>Radiobuttons</h3>
        <form role="form">
            Q. Which animal is harbivorous in nature from the following?
            <div class="radio">
                <label><input type="radio" name="optradio">Lion</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="optradio" checked="checked">Cow</label>
            </div>
            <div class="radio disabled">
                <label><input type="radio" name="optradio">Tiger</label>
            </div>
        </form>
    </div>
</body>
</html>

Try it » Download Example »

Output

Description :

Checkboxes with multiple selected.

Bootstrap Buttons Example - 11

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        Q. Which substances are solid in nature(multiple true)?
        <form role="form">
            <div class="checkbox">
                <label><input type="checkbox" checked="checked">Stone</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" checked="checked">Earth</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox">Water</label>
            </div>
        </form>
    </div>
</body>
</html>

Try it » Download Example »

11 Example(s) of Bootstrap Buttons

Output

Output

Output

Output

Output

Output

Output

Output

Output

Output

Output