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.
In this article we use some built-in Twitter Bootstrap CSS to customize default buttons.
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:
![Button in html]()
To make Customize Buttons more attractive than defaul buttons using Bootstrap, open the bootstrap.css file and check out the following Bootstrap CSS class.
- btn-default
- btn-success
- btn-info
- btn-warning
- btn-danger
- 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>
<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>
<style>
</style>
</head>
<body>
<button type="button">
Default</button>
<button type="button" class="btn-default">
btn-default Class</button>
</body>
</html>
The HTML will be rendered with Bootstrap as in the following:
![Default button class]()
2. Using bootstrap CSS classbtn-info, btn-warning, btn-danger, btn-sm
The HTML file looks as in the following:
<!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>
<style>
</style>
</head>
<body>
<button type="button">
Default</button>
<br />
<br />
<button type="button" class="btn-default">
btn-default Class</button>
<br />
<br />
<button type="button" class="btn-success">
btn-success Class</button>
<br />
<br />
<button type="button" class="btn-info">
btn-info Class</button>
<br />
<br />
<button type="button" class="btn-warning">
btn-warning Class</button>
<br />
<br />
<button type="button" class="btn-danger">
btn-danger Class</button>
<br />
<br />
<button type="button" class="btn-sm">
btn-sm Class</button>
</body>
</html>
The HTML will be rendered with Bootstrap as in the following:
![Button Class]()