How to install bootstrap and customize it

Twitter-Bootstrap

Previous Post Link: Few things about bootstrap you should know

There are several ways to incorporate Bootstrap into your projects. You can customize Bootstrap depending on your requirement and how you intend to utilize it. At times, you need to make minor changes such as adding colors or changing the font size. For these customizations, you need to create your custom CSS and add it after the Bootstrap CSS file.

Including Bootstrap in your HTML file

Download Bootstrap from the official website http://getbootstrap.com/ and include it in your HTML file with little or no customization.

download bootstrap

Click on the Download Bootstrap button and the file will be downloaded in the ZIP format. The ZIP files contain the Bootstrap CSS, JavaScript, and font files. You need to extract the Bootstrap .zip file and copy the contents to your project folder. The next step is to include the CSS and JavaScript files in your HTML file.

In the preceding code example, in the <head> section, the Bootstrap CSS is linked to the HTML file and then there is a custom CSS file after the Bootstrap CSS, which will help you override the Bootstrap styles.

After this, we linked the jQuery and JavaScript files in the <body> section. We also added the links to the HTML shiv element along with the respond.js file for IE support and media queries. The respond.js script provides a quick and lightweight script to enable responsive web designs in browsers (specifically Internet Explorer versions 6 to 8), which do not support CSS3 Media Queries.

We have used the minified versions, to lower the file size resulting in faster loading of the website.

Next Post Link: Bootstrap grid system, column, row, and many more

Comments