In Focus

Learning Bootstrap Part 2: Working With Buttons

Buttons and anchor tags are very important controls. Bootstrap allows you to customize the look of these two very elegantly.

 Read Part 1 here: Getting started with Bootstrap

Buttons and anchor tags are very important controls. Bootstrap allows you to customize the look of these two very elegantly.

 Block level Button:  if you want to create a button as the full width of the parent container then that can be easily created as in the following:

<div class="container">    
          <button class="btn btn-large btn-block" type="button">Login</button>
          <button class="btn btn-large btn-block" type="button">Register</button>
          <button class="btn btn-large btn-block" type="button">Twitter</button>
          <button class="btn btn-large btn-block" type="button">Facebook</button>  
 </div>

In the sample above we are putting buttons inside a fixed container and you will see the buttons rendered as in the following. The buttons are occupying the width of the parent div container.

Bootstrap1.jpg

There are various styles of buttons available. You can very easily create them. Let us say you want to create a "Success" button. The Success button can be created by setting the class as "btn-success".

Bootstrap2.jpg

If you want to create an "Info" button then that can be created by setting the button class as "btn-info".

Bootstrap3.jpg

Various kinds of buttons are available in Bootstrap as in the following:

Bootstrap4.jpg

You can create the buttons above as easily as in the following:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">        
          <button class="btn btn-large btn-primary" type="button">Primary Button</button><br />
          <button class="btn btn-info"
               type="button">
             Info Button
         </button>
      <br />        
         <button class="btn  btn-success"
                  type="button">
          Success Button
          </button>    
      <br />
          <button class="btn btn-large btn-warning" type="button">Warning Button</button>  <br />
          <button class="btn btn-large btn-danger" type="button">Danger Button</button><br />  
          <button class="btn btn-large btn-inverse" type="button">Inverse Button</button> <br /> 
        <button class="btn btn-large btn-link" type="button">Link</button>   <br />
 </div>
 </body>
</html>

Bootstrap also provides you various sizes of buttons. If you want to create a large button then that can be created as in the following:

Bootstrap5.jpg

You can create a large Success button as in the following:

Bootstrap7.jpg

There are three button sizes available, they are:

  1. Large button: btn-large
  2. Default button: btn
  3. Small button: btn-small
  4. Mini button: btn-mini

Bootstrap6.jpg

The above buttons can be created with the following mark-up:

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
 <!-- Bootstrap references -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
 <div class="container">   
       <button class="btn btn-large ">
          Large Button
       </button> <br />
       <button class="btn">
          Default  Button
       </button> <br />
      <button class="btn btn-small">
          Small  Button
       </button> <br />
      <button class="btn btn-mini">
          Mini  Button
       </button> <br />      
 </div>
</body>
</html>

In this way you can work with buttons and make them immersive using Twitter Bootstrap. In future articles we will get more deeply into Bootstrap. I hope you find this article useful. Thanks for reading.