Bootstrap

Let's now look at why Bootstrap is a promising framework for web design:
• Reusability: In web designing, a modular pattern is favored as you do not have to

rewrite code for various portions of your design. Bootstrap has ready-made
components, CSS styles, and plugins that can be included directly in your code.
This aspect saves you a considerable amount of time and effort resulting in rapid
development. Moreover, this results in easy code maintenance and helps you
organize your code efficiently.
• 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.
• Customization: You can customize Bootstrap significantly using the built-in

Customize option, where you can choose the features that you want to use and
uncheck features you don't want, making it as bloat-free as possible. You can use a
Custom CSS sheet to override Bootstrap's default styles in addition to using LESS
files for CSS preprocessing. Using LESS, you can use variables and mixins to alter
almost every defined default attribute. Moreover, you can customize the way
plugins such as Modals and Alerts work using advanced JavaScript. As SaaS
compatibility and customization were introduced in the latest version of Bootstrap,
you can create complex and interactive websites with Bootstrap.
• Vibrant community with extensive third-party initiatives: Bootstrap has an active

community of developers as well as immense third-party support wherein there is
continuous improvisation. Bootlint, an HTML linting tool for projects using
Vanilla Bootstrap, was released recently, which helps you identify incorrect
Bootstrap usage errors. JavaScript frameworks such as AngularJS are used in
conjunction with Bootstrap resulting in the creation of Mobile Angular UI
specifically tailored for mobile-based designing. Another recent development is the
installation of Bootstrap using the Node package manager. Bootstrap Bay
(http://bootstrapbay.com/), Bootply (http://www.bootply.com/), and Bootsnipp
(http://bootsnipp.com/) are some of the third-party websites that host a wide range
of templates, editors and builders, and tailor-made snippets that help you
streamline your web designing using Bootstrap.
• Futuristic outlook and open development: The development of Bootstrap is

explicitly carried out on GitHub. You can follow all the changes implemented and
view the records of outstanding issues with the facility of reporting Bootstrap-
related errors and bugs, in addition to contributing to the future development of
Bootstrap. The project roadmap can also be found on the official website along
with facets such as backward compatibility among the challenges to be addressed
in the near future. Bootstrap is a framework that incorporates HTML5 and CSS3 in
addition to a plethora of toolsets and utilities thereby shaping up to becoming a
benchmark and a vital cog in the wheel for futuristic design and development.
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">

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

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/
1.11.1/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<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>
<title>BootStrap with Packt</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/
bootstrap.min.css">
</head>
<body>
<h1>Welcome to Packt</h1>
<button type="button" class="btn btn-default btn-sm"
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.
The output of the code on execution will be as follows:
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.

Bootstrap

Uploaded by

Copyright:

Available Formats

Bootstrap

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

Let's now look at why Bootstrap is a promising framework for web design:

• Reusability: In web designing, a modular pattern is favored as you do not have to

• Customization: You can customize Bootstrap significantly using the built-in

• Vibrant community with extensive third-party initiatives: Bootstrap has an active

• Futuristic outlook and open development: The development of Bootstrap is

<title>BootStrap with Packt</title>

<meta name="viewport" content="width=device-width, initialscale=1.0">

<button type="button" class="btn btn-default btn-sm"

The output of the code on execution will be as follows:

You might also like