Bootstrap Buttons with examples
16-05-2017    1428 times
Bootstrap Buttons

Bootstrap Buttons

The default classes for the Bootstrap Buttons are

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

A simple program to display the Bootstrap Buttons

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
< link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:50px;">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-default">Default</button>
<span style="color:#9E3434; font-weight:bold"> .btn-default </span> <br> <br>
<button type="button" class="btn btn-primary">Primary</button>
<span style="color:#9E3434; font-weight:bold"> .btn-primary </span> <br><br>
<button type="button" class="btn btn-success">Success</button> 

Tutorial at home

<span style="color:#9E3434; font-weight:bold"> .btn-success </span> <br> <br>
<button type="button" class="btn btn-info">Info</button>
<span style="color:#9E3434; font-weight:bold">.btn-info</span><br> <br>
<button type="button" class="btn btn-warning">Warning</button>
<span style="color:#9E3434; font-weight:bold">.btn-warning</span> <br> <br>
<button type="button" class="btn btn-danger">Danger </button> 
<span style="color:#9E3434; font-weight:bold">.btn-danger</span><br> <br>
<button type="button" class="btn btn-link">Link</button> 
<span style="color:#9E3434; font-weight:bold">.btn-link</span>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<span style="color:#9E3434; font-weight:bold"> .btn-outline-Secondary </span> <br> <br>
<button type="button" class="btn btn-outline-primary">Primary</button>
<span style="color:#9E3434; font-weight:bold"> .btn-outline-primary </span> <br> <br>
<button type="button" class="btn btn-outline-success">Success</button>
<span style="color:#9E3434; font-weight:bold"> .btn-outline-success </span> <br> <br>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-info">Hover Info</button>
<span style="color:#9E3434; font-weight:bold"> .btn-outline-info </span> <br> <br>
<button type="button" class="btn btn-outline-warning">Warning</button>
<span style="color:#9E3434; font-weight:bold"> .btn-outline-warning </span> <br> <br>
<button type="button" class="btn btn-outline-danger">Danger</button>
<span style="color:#9E3434; font-weight:bold"> .btn-outline-Danger </span> <br> <br>
</div>
</div>
</div>
</body>
</html>

Bootstrap Button
Bootstrap Button

We can apply the classes in the <a>, <button>, <input> tag. button outline will introduce by next versions of bootstrap. but you can create it by custom CSS.

Size of the Bootstrap Buttons

For setting the size of the button, we use the following classes

  • .btn-xs
  • .btn-Sm
  • .btn-md
  • .btn-lg
Tutorial at home
Tutorial at home

Note: Default class is .btn-md 

<html>
<head>
<link href= "bootstrap.min.css" rel= "stylesheet" type= "text/css">
</head>
<div class="container">
<button type="button" class="btn btn-danger btn-xs"> XSmall </button>
<button type="button" class="btn btn-danger btn-sm"> Small </button>
<button type="button" class="btn btn-danger btn-md"> Medium </button>
<button type="button" class="btn btn-danger btn-lg"> Large </button>
</div>
</html>

Bootstrap Button Size
Bootstrap Button Size
Tutorial at home
Tutorial at home

Set the activation of Bootstrap Button

  • .active
  • .disabled

If we set a button as active then the button displayed as pressed and look brighter. But if we set the button as disabled then it make an unclickable button and when we mouse over the button then mouse pointer turn to disable icon.

<button type="button" class="btn btn-danger btn-md disabled"> Disabled </button>
<button type="button" class="btn btn-danger btn-md"> Normal </button>
<button type="button" class="btn btn-danger btn-md active"> Active </button>

Bootstrap Button active/inactive
Bootstrap Button active/inactive

Block level button

We can also create a block level button or full width button by using the .btn-block class.

<button type="button" class="btn btn-info btn-block"> Block Button </button>
<button type="button" class="btn btn-danger btn-block"> Block Button </button>

Bootstrap Button Block
Bootstrap Button Block
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post