Read Part 1 here: Getting started with Bootstrap

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

Block level Button: if you want to create a button as the full width of parent container that can be easily created as 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 above we are putting buttons inside fixed container and you will see buttons would rendered as following. Buttons are taking width of parent div container.

clip_image002

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

image

If you want to create Info button then that can be created setting button class as btn-info

clip_image001

Different kinds of buttons available in bootstrap is as following,

image

You can create above buttons as easily as given below


<!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 different sizes of buttons. If you want to create a large button that can be created as following

clip_image001[6]

You can create a large success button as following

clip_image003

There are three buttons sizes available,

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

image

Above buttons can be crated with 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 further posts we will get into more deep into bootstrap. I hope you find this post useful. Thanks for reading.

Advertisements

3 thoughts on “Learning Bootstrap Part 2: Working with Buttons

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s