Creating Customize Default Buttons Using Bootstrap

What is Bootstrap?

Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. The Bootstrap framework is used to develop front-facing web applications and sites. When we work on the project there are many things required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.

Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. Using Twitter Bootstrap, in the previous article that I have covered. you can read them here.

• An Introduction to Bootstrap
• Creating Menu in Bootstrap
• Creating DropDown Menu in Bootstrap

Include with HTML

Now to include them in the project. So let’s imagine we have a blank HTML file that goes something like this:

HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title></title>
</head>

<body>

</body>

</html>

Now we need to add a reference to the bootstrap CSS file and JavaScrit file with the HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body>

</body>

</html>

Note: Also don’t forget to include jQuery if you’ll be using Bootstrap's JS plugins.

Creating Customize Default Buttons using Bootstrap

Defult Button in HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

<script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>

</head>

<body>

<button type="button">Default</button>

</body>

</html>

The HTML file looks as in the following:

To make Customize Buttons more attractive than defaul buttons using Bootstrap, open the bootstrap.css file and check out the following Bootstrap CSS class.

1. btn-default
2. btn-success
3. btn-info
4. btn-warning
5. btn-danger
6. btn-sm

1. Using bootstrap CSS class="btn-default"

Now first we use the btn-default clsss. Now open the bootstrap.css file and find the btn-default class. It looks like this:

.btn-default {

background-color: #FFFFFF;

border-color: #CCCCCC;

color: #333333;

The HTML file looks as in the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>