Signup/Sign In

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.

Button-types

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.

button-size

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.

Enable/disable button

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.

block-level 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.

button outline

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.

Button Toggle

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.

checkbox button

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.