Bootstrap For Beginners - Part Four (Bootstrap Buttons)

I have started an article series on Bootstrap and published three articles so far. Read the previous three parts here.

In this article we will learn how to create and modify buttons using Bootstrap Buttons Classes.

Bootstrap Buttons

Buttons play various role in websites and applications and are used to submit, reset, show and hide on click of button, link button etc.

By using Bootstrap we can easily create and customize the buttons.

Bootstrap Button Styles

In Bootstrap different classes are used for styling the buttons and styles can be applied to any element like <a>, <button> and <input>.

Bootstrap provides seven styles of buttons:

To apply the button styles, Bootstrap provides the following classes:

.btn-default: Default gray color Standard button
.btn-primary:To indicate primary action button
.btn-info:Used for informational alert messages
.btn-success:Indicates a successful or positive action
.btn-danger: Indicates a dangerous or negative action.
.btn-warning:Indicates caution should be taken with this action
.btn-link: Button look like a link with maintaining button behavior

Example 1: Bootstrap Button Styles

In this example we will create buttons and by using above classes we will apply styles on buttons through the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part4</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="container">
<h1>Button Styles</h1>
<button type="button" class="btn btn-default">Default Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-link">Link Button</button> </div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Example 2: Button classes used on <a> and <input> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part4</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="container">
<h1>Button With Tags</h1> <a href="#" class="btn btn-primary" role="button">Link Button</a> <input type="button" class="btn btn-info" value="Input Button" /> <input type="submit" class="btn btn-success" value="Submit Button" /> <input type="reset" class="btn btn-danger" value="Reset Button" /> </div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Button Sizes

We can make buttons larger or smaller by using Bootstrap classes.

The classes that define the different sizes are:

.btn-lg : Used for makes the button size large.
.btn-md: Used for makes the button size medium.
.btn-sm: Used for makes the button size small.
.btn-xs: Used for makes the button size extra small.

Example 3: Button Sizes

In this example we will create buttons and by using above classes we will apply size on buttons by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part4</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="container">
<h1>Bootstrap Button Size</h1>
<button type="button" class="btn btn-danger btn-lg">Large Button</button>
<button type="button" class="btn btn-danger btn-md">Medium Button</button>
<button type="button" class="btn btn-danger btn-sm">Small Button</button>
<button type="button" class="btn btn-danger btn-xs">Extra Small Button</button> </div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Block Level Buttons

We can create block level buttons that span the full width of the parent elements by using class .btn-block.

Example 4: Block Level Buttons

In this example we will create buttons using .btn-block class by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part4</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="container">
<h1>Bootstrap Block Level Buttons</h1>
<button type="button" class="btn btn-primary btn-block">Block Level Button</button>
<button type="button" class="btn btn-warning btn-lg btn-block">Block Level Button Large</button>
<button type="button" class="btn btn-default btn-block">Block Level Button Default</button> </div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Button State(Active and Disabled Buttons)

Bootstrap provides classes which are used to change the state of buttons.

.active class: A button can be set to an active like pressed using .active class or
.disabled class: A button can be disabled like unclickable state using .disabled class and it will fade in color. For <a> tag this class only change the appearance, not its functionality, and we need to use JavaScript to disable links.

Example 5 : Active and Disabled Buttons

In this example we will create buttons and apply state of buttons Active and Disabled by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part4</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>
<body>
<div class="container">
<h2>Button State:Active and Disabled</h2>
<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-primary disabled">Disabled Button</button>
<h2>Button State:Active and Disabled On Anchor Element</h2>
<a href="#" class="btn btn-primary active" role="button">Active Link Button</a>
<a href="#" class="btn btn-primary Disabled" role="button">Disabled Link Button</a> </div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

In this article we focused on Bootstrap Buttons. In the next article we will understand all the components of Bootstrap step by step.