Bootstrap Button
Buttons play an important role while creating web pages. Bootstrap provides a number of ways to style these buttons. .btn class is used within <button> element. We can also use .btn class on element like <a> or <input> .
Bootstrap Button Classes
The following are the classes that can be used to create and style buttons in bootstrap.
| Button type |
color |
Significance/Action |
| .btn |
light gray |
Can be used for any action. |
| .btn-default |
light gray |
can be used for any action. |
| .btn-primary |
Blue |
Used for some primary action. |
| .btn-Success |
green |
Can be used as a submission button for some successful action |
| .btn-info |
light blue |
Can be used for informational purpose |
| .btn-link |
white |
used for linkable buttons |
| .btn-danger |
red |
used in the context of any danger |
| .bt-warning |
yellow |
used in the context of warning |
| .btn-secondary |
dark gray |
for some secondary actions |
| .btn-dark |
black |
no general significance |
| .btn-light |
white |
no general significance |
Example: Creating buttons using Bootstrap classes
Let's see how these button looks which this simple code. We have used all sets of buttons to demonstrate its colors.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Different button Styles</h3>
<button class="btn">Basic</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-link">Link</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-light">Light</button>
</div>
</body>
</html>
Output
Here is the list of different types of buttons.
Bootstrap Button Size
Bootstrap not only provides us different styles of buttons but it also provides us with different sizes of a button. The classes used for different sizes are as follow
- .btn-lg :for large size button
- .btn-md : for medium-size button
- .btn-sm : for small size button
- .btn-xs : for extra small size button
Example: Specifying Button size using Bootstrap
Let's demonstrate different size buttons with this program. We have used the above classes within the <button> element to illustrate the size of the buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Different button Sizes</h3>
<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-default btn-md">Medium</button>
<button class="btn btn-default btn-sm">Small</button>
<button class="btn btn-default btn-xs">Extra Small</button>
</div>
</body>
</html>
Output:
Here we have demonstrated the various sizes of buttons.
Enable/Disable Bootstrap Buttons
Bootstrap can be used to enable or disable buttons. .active class is used to make button enable and .disabled class is used to make the button disable. Let us see how can we do that through the following program.
Example: Enable/disable buttons using Bootstrap
Here in the example, we have taken three types of buttons. The first one is the default button, the second one is the active button, and the third button is disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Different button Sizes</h3>
<button class="btn btn-default ">Default</button>
<button class="btn btn-default.active">Active</button>
<button class="btn btn-default.disabled">Inactive</button>
</div>
</body>
</html>
Output:
Here is the output of enabling/disable the buttons.
Bootstrap Block-level buttons
Block-level buttons can be created by adding .btn-block to the button class. Here it uses the full span width of the parents.
Example: Creating block-level buttons using Bootstrap
Here in the example, we have included primary and default types of buttons to create block-level buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Block button</h3>
<button class="btn btn-primary btn-block">Primary block button</button>
<button class="btn btn-default btn-block">Default block button</button>
</div>
</body>
</html>
Output:
Here is the output showing the block button.
Bootstrap Outline Buttons
We have seen that there are different styled buttons. These buttons can be styled differently by simply adding outline and removing color. .btn-outline is used to add outlines to buttons.
Example: Adding outline to buttons
Here in the example, a button is styled by using outline colors. The color name can be used from the above list. So let us see a list of buttons using a various colored outlines.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Button outline</h3>
<button class="btn btn-outline-Default">Default</button>
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>
</div>
</body>
</html>
Output:
Here is the output showing different types of outline buttons.
Bootstrap Toggle State
Use data-toggle="button" to toggle a button's active state. To pre toggle, we need to manually add .active class and aria-pressed="true"
to the button.
Example: Adding toggle state using Bootstrap
See, how add above attributes to toggle state of buttons in the below example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Button Toggle</h3>
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Bootstrap Check box and Radio buttons
The .button styles can be used to other elements such as< label> s to provide checkbox or radio style toggling buttons.
Example: Creating checkboxes and radio buttons using Bootstrap
Here, we have created checkboxes using the secondary button and added a toggle state to it.
{<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3> Checkbox button</h3>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above code.
Conclusion
Here we have discussed different ways to design and use different types of buttons. We can change the size and state of the buttons. Get rid of boring buttons and style your own buttons using bootstrap.
