Prev Page
Next Page  
Bootstrap Buttons
Bootstrap provides different styles of buttons there are following button classes  and examples :
1.       .btn (Basic)
2.      .btn-default 
3.    .btn-primary
4.    .btn-success
5.    .btn-info
6.    .btn-warning
7.    .btn-danger
8.    .btn-link
Bootstrap Button Styles :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Button Styles</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <button type="button" class="btn">Basic</button>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
   
</form>
 
</body>
</html>
Output :
Button Sizes :

The following button classes and different sizes are:

.btn-lg

.btn-md

.btn-sm

.btn-xs

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Button Sizes</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <button type="button" class="btn btn-default btn-lg">Default</button>
    <button type="button" class="btn btn-primary btn-lg">Primary</button>
    <button type="button" class="btn btn-info btn-lg">Info</button>
    <button type="button" class="btn btn-success btn-lg">Success</button>
    <button type="button" class="btn btn-warning btn-lg">Warning</button>
    <button type="button" class="btn btn-danger btn-lg">Danger</button>
    <br /><br /><br />
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <br /><br /><br />
    <button type="button" class="btn btn-default btn-sm">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Primary</button>
    <button type="button" class="btn btn-info btn-sm">Info</button>
    <button type="button" class="btn btn-success btn-sm">Success</button>
    <button type="button" class="btn btn-warning btn-sm">Warning</button>
    <button type="button" class="btn btn-danger btn-sm">Danger</button>
    <br /><br /><br />
    <button type="button" class="btn btn-default btn-xs">Default</button>
    <button type="button" class="btn btn-primary btn-xs">Primary</button>
    <button type="button" class="btn btn-info btn-xs">Info</button>
    <button type="button" class="btn btn-success btn-xs">Success</button>
    <button type="button" class="btn btn-warning btn-xs">Warning</button>
    <button type="button" class="btn btn-danger btn-xs">Danger</button>
   
</form>
 
</body>
</html>
Output :









Active Buttons and Disabled Buttons :

Active Button : Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.

Disabled Button : The disable button, it will fade in color by 50%, and lose the gradient. This button action is not working.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Active Buttons and Disabled Buttons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <button type="button" class="btn btn-default">Primary Button</button>
    <button type="button" class="btn btn-default active">Active Primary</button>
    <button type="button" class="btn btn-default disabled">Disabled Primary</button>
    <br /><br /><br />
    <button type="button" class="btn btn-primary">Primary Button</button>
    <button type="button" class="btn btn-primary active">Active Primary</button>
    <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
    
</form>
 
</body>
</html>
Output :



Block Level Buttons :
The block level buttons ( .btn-block ) that span the full width of a parent.
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Block Level Buttons</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">

<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button><br /><br />
<button type="button" class="btn btn-info btn-block">Block level button</button>
<button type="button" class="btn btn-success btn-block">Block level button</button><br /><br />
<button type="button" class="btn btn-warning btn-sm btn-block">Block level button</button><br /><br />
<button type="button" class="btn btn-danger btn-xs btn-block">Block level button</button>

</form>
 
</body>
</html>
Output :






Button Tags :
The button classes can be used on an <a>, <button>, or <input> elements.
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Button Tags</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<form action="" method="post">
    
    <a class="btn btn-default" role="button" href="http://www.freetimelearning.com" target="_blank">Link</a>
    <button class="btn btn-primary" type ="submit">Button</button>
    <input class="btn btn-info" type ="button" value ="Input">
    <input class="btn btn-success" type ="submit" value ="Submit">
    
</form>
 
</body>
</html>
Output :
Link
  Prev Page
Next Page