loading...

Bootstrap 3 – Installing and Customizing Bootstrap

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. However, there are situations where you may need to make deeper customizations such as using your own semantic CSS classes or elements. In such a scenario, including your own CSS, in addition to the Bootstrap CSS, may be cumbersome due to bloating because of huge file sizes and download time.

In this chapter, we will cover the following ways to use Bootstrap for your projects:

  • Including Bootstrap in your project
  • The Bootstrap Content Delivery Network ( CDN)
  • Overriding with custom CSS
  • The Bootstrap customizer
  • Deep customization of Bootstrap
  • Compiling LESS files

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.

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 as shown in the following directory structure:

bootstrap
|____css
| |____bootstrap.css
| |____bootstrap.min.css
| |____bootstrap.css.map
| |____bootstrap-theme.css
| |____bootstrap-theme.min.css
| |____bootstrap-theme.css.map
|____fonts
| |____glyphiconshalflings-regular.eot
| |____glyphiconshalflings-regular.svg
| |____glyphiconshalflings-regular.ttf
| |____glyphiconshalflings-regular.woff
|____js
| |____bootstrap.js
| |____bootstrap.min.js

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.

Let’s take a look at how the file structure should be if you use Bootstrap in your HTML file:

<!DOCTYPE html>
<html>
<head>
<title> Learning Bootstrap with Packt </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/custom.css" rel="stylesheet" media="screen">
</head>
<body>
<h1> Welcome to Packt </h1>

<!-- JavaScript plugins (requires jQuery) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
<!-- Inlcude HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</body>
</html>

The output of this code upon execution will be as follows:

Let’s discuss the code so that you understand how it all works.

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. You can also see that we have used the <meta charset="UTF-8"> tag. Whenever the web page is opened locally (from the disk filesystem), the text/html part will instruct the web browser of which type the document is so that it knows how to parse it, and the charset=UTF-8 value will instruct the web browser which character encoding should be used to display the characters on the web page so that it won’t use the platform default encoding. After this, we linked the jQuery and JavaScript files in the <body> section. We also added the links for 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.

If you observe the preceding code, you will find that we have used the minified versions, that is, bootstrap.min.js and bootstrap.min.css, to lower the file size resulting in faster loading of the website. You can use the full version in the development stage and the minified version in the production-ready live stage depending on your preference.

Comments are closed.

loading...