Creating Customize Default Buttons Using Bootstrap

Rohatash Kumar
8y
11.9k
0
1

Article

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">

<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>

</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>

</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>

<style>

</style>

</head>

<body>

Default</button>

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>

<style>

</style>

</head>

<body>

Default</button>

<br />

btn-default Class</button>

<br />

btn-success Class</button>

<br />

btn-info Class</button>

<br />

btn-warning Class</button>

<br />

btn-danger Class</button>

<br />

btn-sm Class</button>

</body>

</html>

The HTML will be rendered with Bootstrap as in the following:

Button Class

Up Next

Ebook Download

View all

Mastering Bootstrap: A Comprehensive Guide to Responsive Web Design

Read by 0 people

Download Now!

Learn

View all