Bootstrap
Bootstrap
Bootstrap
• Consistency: Easy code readability is crucial for a designer. It also helps that the
designers working with you or assigned the same project can understand the code
well so as to implement modifications and alterations. As Bootstrap uses ready-
made code snippets and is compatible across different browsers, there is a high
degree of uniformity in your designing process. This also lowers the learning curve
for new designers who want to build on the same project or implement a similar
functionality on different projects.
• Flexible grid layout: Bootstrap has a default Grid system that can scale up to 12
columns with the relative increase in the screen size and with the flexibility to opt
for a fixed or fluid responsive grid. Apart from this, Bootstrap is flexible as you
can add any number of customized columns that you may need on a row-by-row
basis using its built-in LESS variables and mixins. Using the variables and mixins,
you can determine the number of columns and the gutter width as well as the
media query point, which decides the threshold for floating columns in addition to
generating semantic CSS for individual grid columns. Offsetting and nesting can
be implemented easily, with a few lines of code. Using Media Queries and
responsive utility classes, you can also manipulate certain blocks of content by
making them appear or hide based on the screen size.
Summary
In this chapter, we had a look at Bootstrap and the reasons to incorporate it in your
web designing projects. You understood Bootstrap's mobile-first approach and its
relevance in this era where mobiles and tablets are increasingly becoming the first
medium for browsing the Web. In the next chapter, we will look at the different
ways to install Bootstrap in your projects, which also includes customizing it to
build impressive websites.
Let's take a look at how the ile 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, initialscale=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:
Welcome to Packt
Overriding with custom CSS The easiest way to customize Bootstrap is to create
your custom CSS file where you will put your own CSS code. The link to this
customized CSS file needs to be added after the Bootstrap CSS in your HTML
document for it to override the Bootstrap CSS declarations. Look at the following
code to understand it better:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/
bootstrap.min.css">
</head>
<body>
<h1>Welcome to Packt</h1>
id="packt">PACKT LESSONS</button>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.
min.js"></script>
</body>
</html>
In the preceding code example, we did not include the external style sheet.
PACKT LESSONS
Welcome to packt
The Bootstrap CDN In the previous code example, you can see that we have used
CDN for the HTML5 shiv element and the respond.js file. A CDN is a large
distributed system of servers deployed in multiple data centers across the Internet.
Using a CDN means that you save significant bandwidth as the files are not loaded
from your server. You can leverage the benefit of a blazing-fast performance, as
the files loaded from the CDN are loaded in parallel and not queued by the
browser, as they are in a different domain. In addition, the CDN provides data
centers closer to the users, meaning that, the server selected is typically based on
the user's location and faster routes. Thus, files are loaded faster. In some cases, it
abstracts the need to load the files. Plenty of websites use the Bootstrap CDN and
if the website users have previously visited one of these websites, then the browser
will use that same copy of the Bootstrap files abstracting the need to load
Bootstrap again, thereby increasing the performance of your website.