×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Grid System create grid view in web page Bootstrap Buttons Group with examples
Bootstrap Buttons with examples - Bootstrap 3
7235    Arnab De    16/05/2017

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> 

softetechnologies

<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
softetechnologies

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
softetechnologies

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
Bootstrap Grid System create grid view in web page Bootstrap Buttons Group with examples
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.
Enter New Comment
Comment History
No Comment Found Yet.
Sri Sri Ramakrishna Paramahamsa
God is in all men, but all men are not in God; that is why we suffer.
Sri Sri Ramakrishna Paramahamsa
652
56.23
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     43261
01/01/2018     36358
25/06/2018     35011
28/06/2017     34455
02/08/2017     32861
01/08/2017     27347
06/07/2017     27126
15/05/2017     26735
14/07/2017     22351
21/04/2018     20991
softetechnologies