Bootstrap Button

Design Button Using Bootstrap

Using bootstrap you can easily design button style seven pre-define classes are available. There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles:

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

Bootstrap Button Example

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  
  <body>  
    <h1>Basic Button Example!</h1>  
  
<button class="btn btn-default">default</button>  
<button class="btn btn-primary">primary</button>  
<button class="btn btn-danger">danger</button>  
<button class="btn btn-success">success</button>  
<button class="btn btn-info">info</button>  
<button class="btn btn-warning">warning</button>  
<button class="btn btn-link">Link</button>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  </body>  
</html>

Output

Bootstrap Button Size

In Bootstrap, you can choose a button size according to your requirement. It provide following four predefine classes for define button sizes.

.btn-lg
.btn-md
.btn-sm
.btn-xs

Bootstrap Button Size Example

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Button Sizes</h2>  
  <button type="button" class="btn btn-primary btn-lg">Large</button>  
  <button type="button" class="btn btn-primary btn-md">Medium</button>      
  <button type="button" class="btn btn-primary btn-sm">Small</button>  
  <button type="button" class="btn btn-primary btn-xs">XSmall</button>  
</div>  
  
</body>  
</html>

Bootstrap Enable/Disable Buttons

Using Bootstrap you can set a button disable or unclickable state. The .active class is used to make a button appear pressed, and the class .disabled makes a button unclickable

Bootstrap Enable/Disable Button Example

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Button States</h2>  
  <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>  
</div>  
  
</body>  
</html>

Prev Tutorial Next Tutorial

Google Advertisment

Sitesbay - Easy to Learn