ECAP472

WEB
TECHNOLOGIES

Dr. Pritpal Singh

Associate Professor
Responsive Web Design

• Responsive web design is about creating websites

that automatically adjust themselves to look good on
all devices, from small phones to large desktops.

• Bootstrap is the most popular HTML, CSS, and

JavaScript framework for developing responsive,
mobile-first websites.

• Bootstrap is completely free to download and use!

What is Bootstrap?

• Bootstrap is a free front-end framework for faster and

easier web development

• Also gives you the ability to easily create responsive

designs
 Bootstrap includes
HTML and CSS
based design
templates for
typography, forms,
buttons, tables,
navigation, modals,
image carousels and
many other, as well
What is Bootstrap?
as optional
JavaScript plugins.
Why to Learn Bootstrap?

Mobile first approach

Bootstrap 3, framework consists of Mobile first styles

throughout the entire library instead them of in
separate files.

Browser Support

It is supported by all popular browsers.

Why to Learn Bootstrap?

Mobile first approach

Bootstrap 3, framework consists of Mobile first styles

throughout the entire library instead them of in
separate files.

Browser Support

It is supported by all popular browsers.

Why to Learn Bootstrap?

Easy to Get
Started
With just the knowledge of HTML and CSS, anyone
can get started with Bootstrap. Also, the Bootstrap
official site has good documentation.

Responsive design

Bootstrap's responsive CSS adjusts to Desktops,

Tablets and Mobiles. More about the responsive design
is in the chapter Bootstrap Responsive Design
Why to Learn Bootstrap?

Easy to Get
Started
With just the knowledge of HTML and CSS, anyone
can get started with Bootstrap. Also, the Bootstrap
official site has good documentation.

Responsive design

Bootstrap's responsive CSS adjusts to Desktops,

Tablets and Mobiles. More about the responsive design
is in the chapter Bootstrap Responsive Design
Why to Learn Bootstrap?

• Provides a clean and uniform solution for building an

interface for developers.

• It contains beautiful and functional built-in components

which are easy to customize.

• It also provides web-based customization.

• And best of all it is open-source.

 The Developers… Bootstrap
History
Mark Jacob Developed by Mark
Otto Thornton
Otto and Jacob
Thornton at Twitter
and released as an
open-source
product in August
2011 on GitHub.
Advantages of Bootstrap

Anybody with just basic

1 Easy to use knowledge of HTML and CSS
can start using Bootstrap

Bootstrap's responsive CSS

Responsive
2 features adjusts to phones, tablets, and
desktops.
Advantages of Bootstrap

Mobile-first In Bootstrap 3, mobile-first styles

3 approach
are part of the core framework

Bootstrap is compatible with all

Responsive modern browsers (Chrome,
4 features
Firefox, Internet Explorer, Safari,
and Opera)
Applications of Bootstrap

• Scaffolding: Bootstrap provides a basic structure with

Grid System, link styles, and background.
• CSS: Bootstrap comes with the feature of global CSS settings,
fundamental HTML elements styled and enhanced with extensible
classes, and an advanced grid system.

• Components: Bootstrap contains over a dozen reusable

components built to provide iconography, dropdowns, navigation,
alerts, pop-overs, and much more.
Applications of Bootstrap

• Scaffolding: Bootstrap provides a basic structure with Grid

System, link styles, and background.

• CSS: Bootstrap comes with the feature of global CSS

settings, fundamental HTML elements styled and
enhanced with extensible classes, and an advanced
grid system.
• Components: Bootstrap contains over a dozen reusable
components built to provide iconography, dropdowns, navigation,
alerts, pop-overs, and much more.
Applications of Bootstrap

• Scaffolding: Bootstrap provides a basic structure with Grid

System, link styles, and background.

• CSS: Bootstrap comes with the feature of global CSS settings,

fundamental HTML elements styled and enhanced with extensible
classes, and an advanced grid system.

• Components: Bootstrap contains over a dozen

reusable components built to provide iconography,
dropdowns, navigation, alerts, pop-overs, and much
more.
Where to Get Bootstrap?

EITHER:

Download Bootstrap from getbootstrap.com

• If you want to download and host Bootstrap
yourself, go to getbootstrap.com, and follow the
instructions there.
Where to Get Bootstrap?

OR:

Include Bootstrap from a CDN

• If you don't want to download and host Bootstrap
yourself, you can include it from a CDN (Content
Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS
and JavaScript. You must also include jQuery.
Bootstrap CDN

You must include the following Bootstrap’s CSS, JavaScript, and

jQuery from MaxCDN into your web page.

<!-- Latest compiled and minified Bootstrap CSS -->

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/boots
trap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled Bootstrap JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/
bootstrap.min.js"></script>

<!-- latest jQuery library -->

<script src="https://code.jquery.com/jquery-latest.js"></script>
Advantage of Using Bootstrap CDN

• Many users already have downloaded Bootstrap from

MaxCDN when visiting another site.

• As a result, it will be loaded from cache when they visit your

site, which leads to faster loading time.

• Also, most CDN's will make sure that once a user requests
a file from it, it will be served from the server closest to
them, which also leads to faster loading time.
Create Web Page with Bootstrap (1)

Add the HTML5 doctype

• Bootstrap uses HTML elements and CSS properties that
require the HTML5 doctype.
• Always include the HTML5 doctype at the beginning of
the page, along with the lang attribute and the correct
character set:
Create Web Page with Bootstrap (1)

Add the HTML5 doctype

• Bootstrap uses HTML elements and CSS properties that require the HTML5
doctype.

• Always include the HTML5 doctype at the beginning of the page, along with
the lang attribute and the correct character set:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
 Create Web Page with Bootstrap (2)

Bootstrap is mobile-first
Bootstrap 3 is designed to be responsive to mobile
devices. Mobile-first styles are part of the core
framework.
 Create Web Page with Bootstrap (2)

Bootstrap is mobile-first
To ensure proper rendering and touch zooming, add
the following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

Create Web Page with Bootstrap (2)

Bootstrap is mobile-first
• The width=device-width part sets the width of the
page to follow the screen-width of the device (which
will vary depending on the device).
• The initial-scale=1 part sets the initial zoom level
when the page is first loaded by the browser.
Create Web Page with Bootstrap (3)

Containers
• Bootstrap also requires a containing element to wrap site
contents.

• There are two container classes to choose from:

• The .container class provides a responsive fixed width container.

• The .container-fluid class provides a full width container,

spanning the entire width of the viewport.
Create Web Page with Bootstrap (3)

Containers
• Bootstrap also requires a containing element to wrap site
contents.

• There are two container classes to choose from:

• The .container class provides a responsive fixed width container.

• The .container-fluid class provides a full-width container,

spanning the entire width of the viewport.

*Note: Containers are not nestable (you cannot put a container

inside another container).
Bootstrap Grids

Bootstrap’s grid system allows up to 12 columns

across the page.
Bootstrap Grids

If you do not want to use all 12 columns individually, you can

group the columns together to create wider columns:

<div class="col-md-12">Span 12 columns</div>

<div class="col-md-6">Span 6</div><div class="col-md-
6">Span 6</div>
<div class="col-md-4">Span 4</div><div class="col-md-
8">Span 8</div>
<div class="col-md-4">Span 4</div><div class="col-md-
4">Span 4</div> <div class="col-md-4">Span 4</div>
Bootstrap Grids

Bootstrap's grid system is responsive, and the

columns will re-arrange automatically depending
on the screen size.
Grid Classes

• The Bootstrap grid system has four classes:

• xs (for phones)

• sm (for tablets)

• md (for desktops)

• lg (for larger desktops)

• The classes above can be combined to create more

dynamic and flexible layouts.
First Bootstrap Example

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type"
content="text/html; charset=windows-1252">
<title>Any title</title>
</head>
<body>
//write code
</body>
</html>
First Bootstrap Example

Add the HTML 5 doctype:

Bootstrap uses HTML elements and CSS
properties, so you have to add the HTML 5
doctype at the beginning of the page with lang
attribute and correct character set.
 Bootstrap is mobile friendly

• Bootstrap 3 is designed to be responsive to mobile

devices.

• Mobile-first styles are part of the core framework of

Bootstrap.You have to add the following <meta> tag
inside the <head> element for proper rendering and
touch zooming:

<meta name="viewport" content="width=device-width, initial-

scale=1">
Bootstrap is mobile friendly

• Note: The "width=device-width" part is used to set the

width of the page to follow the screen-width of the
device (vary according to the devices).

• The initial-scale=1 part is used to set the initial zoom

level when the page is first loaded by the browser.
What is Bootstrap?

Bootstrap is a free front-end framework for faster

and easier web development

Also gives you the ability to easily create responsive

designs
What is Bootstrap?

Bootstrap is a free front-end framework for faster

and easier web development

Also gives you the ability to easily create responsive

designs
 Bootstrap includes HTML
and CSS based design
templates for typography,
forms, buttons, tables,
navigation, modals, image
carousels and many
other, as well as optional
What is Bootstrap?
JavaScript plugins.
Advantages of Bootstrap

Anybody with just basic

1 Easy to use knowledge of HTML and CSS
can start using Bootstrap

Bootstrap's responsive CSS

Responsive
2 features adjusts to phones, tablets, and
desktops.
Advantages of Bootstrap

In Bootstrap 3, mobile-first
Mobile-first
3 approach styles are part of the core
framework

Bootstrap is compatible with all

Responsive modern browsers (Chrome,
4 features
Firefox, Internet Explorer,
Safari, and Opera)
Where to Get Bootstrap?

EITHER
Download Bootstrap from getbootstrap.com
• If you want to download and host Bootstrap
yourself, go to getbootstrap.com, and follow the
instructions there.
Where to Get Bootstrap?

OR
Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap
yourself, you can include it from a CDN (Content
Delivery Network).
• MaxCDN provides CDN support for Bootstrap's
CSS and JavaScript. You must also include jQuery.
Bootstrap Grid

In graphic design, a grid is a structure (usually two-

dimensional) made up of a series of intersecting straight
(vertical, horizontal) lines used to structure the content.
It is widely used to design layout and content structure
in print design. In web design, it is a very effective
method to create a consistent layout rapidly and
effectively using HTML and CSS.
Bootstrap Grid System

The Bootstrap Grid System allows up to 12 columns

across the page. You can use all 12 columns individually
or you can group the columns together to create wider
columns.
Example
Bootstrap Grid System

Bootstrap Grid System is responsive, and the columns

are re-arranged automatically according to the screen
size
Grid Classes

There are four classes in

Bootstrap Grid System:

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

You can combine the above classes to create more dynamic

and flexible layouts.
Basic Structure of a Bootstrap Grid

<div class="row">

<div class="col-*-*"></div>

</div>

<div class="row">

<div class="col-*-*"></div>

<div class="col-*-*"></div>

<div class="col-*-*"></div>

</div>

<div class="row">

...

</div>
Instructions while creating a Bootstrap
Grid

• Create a row (<div class="row">).

• Add the number of columns, you want in the grid

(tags with appropriate .col-*-* classes).

• Note that numbers in .col-*-* should always add up

to 12 for each row.
Bootstrap Navigation Bar

• A navigation bar is like a navigation header that is

placed at the top of the page. You can collapse or
extend it according to the screen size.
Bootstrap Navigation Bar

You can create a standard navigation bar at the top of

the page with with :

<NAV CLASS="NAVBAR NAVBAR-DEFAULT">.

Bootstrap Inverted Navigation Bar

• Inverted navigation bar provides an alternative black

navbar. It can be used to style the default navigation
bar by changing .navbar-default class into .navbar-
inverse class.
That’s all for
now…