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:
- Large button: btn-large
- Default button: btn
- Small button: btn-small
- 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.