How To Use Bootstrap CSS To Make Your Website Attractive

What Is Bootstrap?

 Bootstrap is a complete tool kit from twitter which helps you in giving your website an extra charm and attractiveness in the easiest and the simplest way possible. The toolkit is made up of JavaScript, CSS and HTML5. You just have to add the CSS file and the JavaScript file to your webpage and do a little tweaking and you are done. Yup its that easy! You can add good looking pop up, drop down menus, buttons, progress bars, navigation bars and much more.


You can download bootstrap from its official website: Download Twitter Bootstrap

How To Add Bootstrap To Your Webpage?

Once you have downloaded the toolkit. You will find three folders there. CSS, JS and Images. Copy the contents of those folders to the folders of your webpage. Copy CSS files to your CSS folder, Copy JS files to your javascript folder, and copy image files to your images folder.

(Expecting you have the basic knowledge of web designing using HTML, css and JavaScript )

Now you just have to add the CSS and JavaScript files to your webpage. Here is how you can add them.

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

How To Implement Bootstrap CSS?

Once the files are added to the webpage then its a piece of cake to make the website attractive. The toolkit has its own built-in buttons, progress bars, navigation bars, text fields, popup messages and much more. Here I will show you one example how to use it and all the other features of bootstrap will be discussed in the upcoming article.

Here is an example of beautiful button you can create by bootstrap.

<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" style="width:100px; height:40px;">About Us </button>

You can change its color, texture and much more by just changing the class of the button, thats it no more confusing CSS or any thing else. Stay tuned for the complete bootstrap examples.

eColumnson				Follow @twitterapi
Subscribe to get the latest right to your inbox:

Posted in: How, Tweaks