Name of the School: School of Computer Science and
Engineering
Course Code: E2UC304C Course Name:Java & Java Script
DEPARTMENT OF COMPUTER SCIENCE
& ENGINEERING
Subject Name: Web Technology
Day: 26
Topics Covered: BootStrap
1
Faculty Name: Programe Name: [Link] (CSE,AI &ML)
Prerequisites, Objectives and Outcomes
Prerequisite of topic: Basic concepts related to java programming
Objective: To make students aware about the development of responsive
website.
Outcome :
1. Framework
2. Students will be able to understand various exception handling
mechanisms.
3. Students will be able to implement in practical applications.
2
Bootstrap is the popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
3
Bootstrap
Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
It is absolutely free to download and use.
It is a front-end framework used for easier and faster web development.
It includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many others.
It can also use JavaScript plug-ins.
It facilitates you to create responsive designs.
4
Why use Bootstrap
Following are the main advantage of Bootstrap:
It is very easy to use. Anybody having basic knowledge of HTML and CSS can use
Bootstrap.
It facilitates users to develop a responsive website.
It is compatible on most of browsers like Chrome, Firefox, Internet Explorer,
Safari and Opera etc.
What is a responsive website
A website is called responsive website which can automatically adjust itself to look
good on all devices, from smart phones to desktops etc.
5
Bootstrap
Bootstrap is a free and open-source CSS framework
directed at responsive, mobile-first front-end web
development.
It contains HTML, CSS and JavaScript-based design
templates for typography, forms, buttons, navigation, and
other interface components.
6
How to Use
A basic understanding of HTML is required to start learning
Bootstrap. Some familiarity with how CSS works (CSS
Selectors
and Visual Rules) would be helpful,
1. Download Bootstrap from [Link]
2. Include Bootstrap from a CDN(Content Delivery Network)
7
What Bootstrap package contains
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 style and an advanced grid system.
Components: Bootstrap contains a lot of reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-overs, and much more.
JavaScript Plugins: Bootstrap also contains a lot of custom jQuery [Link]
can easily include them all, or one by one.
Customize: Bootstrap components are customizable and you can customize
Bootstrap's components, LESS variables, and jQuery plugins to get your own style.
8
Viewport
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
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.
9
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.
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
1.<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Any title</title>
</head> Note: The "width=device-width" part is used to set the width of the page to follow
<body> the screen-width of the device (vary according to the devices).
//write code The initial-scale=1 part is used to set the initial zoom level when the page is first
</body> loaded by the browser.
</html>
Bootstrap is mobile friendly: Bootstrap 3 is designed to be responsive to mobile devices.
Mobile-first styles are part of the core framework of [Link] have to add the following <meta> tag inside the
<head> element for proper rendering and touch zooming:
10
Containers
Bootstrap 5 Containers requires a containing element to wrap site contents.
Container is used to wrap the site contents. There are two container classes.
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: A container cannot be placed inside a container.
11
Using Container
<!DOCTYPE html>
<html lang="en">
<head> <title>Bootstrap Example</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="[Link] rel="stylesheet">
<script src="[Link]
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>
</body> </html>
12
Container: container-fluid
<!DOCTYPE html>
<html lang="en"> <head>
<title>Bootstrap Example</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="[Link]
rel="stylesheet">
<script
src="[Link]
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1> <p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the
viewport.</p>
</div>
</body> </html>
13
Container Padding
By default, containers have left and right padding, with no top or bottom padding.
Therefore, we often use spacing utilities, such as extra padding and margins to make
them look even better.
For example, .pt-5 means "add a large top padding":
<div class="container pt-5"></div>
Container Border and Color
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
14
Bootstrap Grid (12 columns): Grid Classes
The Bootstrap 5 grid system has six classes:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
15
Create First Web Page With Bootstrap
Add the HTML5 doctype
Bootstrap 4 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>
16
Bootstrap is mobile-first
• Bootstrap is designed to be responsive to mobile devices. Mobile-first styles are part of the core
framework.
• 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">
• HTML5 introduced a method to let web designers take control over the viewport, through the
<meta> tag.
• The viewport is the user's visible area of a web page. It varies with the device, and will be smaller
on a mobile phone than on a computer screen. •
A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.
•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.0 part sets the initial zoom level(known as the number of zooms) is a value
representing the magnification of a web page, when the page is first loaded by the browser.
17
Containers
• Bootstrap also requires a containing element to wrap site contents.
• There are two container classes to choose from:
• The .container class provides a fixed width container
• The .container-fluid class provides a full width container, spanning the entire width
of the viewport
• Both .container and .container-fluid are responsive (i.e. they change the layout
based on the screen width), but in different ways
18
Responsive Web Design - Grid-View
Many web pages are based on a grid-view, which means that the page is divided into
columns:
Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
A responsive grid-
view often has 12
columns, and has a
total width of 100%,
and will shrink and
expand as you
resize the browser
19 window.
Example
<!DOCTYPE html>
<html> <head> .main { width: 75%; float: left; padding: 15px; border: 1px solid red;
<meta name="viewport" content="width=device- }
width, initial-scale=1.0"> </style> </head>
<body>
<style> * { box-sizing: border-box; }
<div class="header"> <h1>Galgotias University</h1> </div>
.header { border: 1px solid red; padding: 15px;
} <div class="menu">
<ul>
<li>CSE</li>
.menu { <li>IT</li>
<li>CNCS</li>
width: 25%; <li>AI</li>
float: left; </ul>
padding: 15px; </div>
border: 1px solid red; <div class="main">
} <h1>Location</h1>
<p>Greater Noida University</p>
<p>Third year Students</p>
</div>
20 </body> </html>
CSS Class
<!DOCTYPE html> <html>
<head><style>
.name { background: pink;}
[Link] {
background: yellow;
}
</style> </head><body>
<h1>Demo of the .class selector</h1>
<h1 class="name">My University</h1>
<p class="name">My name is Rajiv.</p>
<p class="hometown">I live in Greater Noida.</p>
<p class="name">My name is Manish.</p>
<p class="hometown">I live in Noida.</p>
</body> </html>
21
The CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It
consists of: content, padding, borders and margins. The image below illustrates the
box model:
Content - The content of the box, where
text and images appear
Padding - Clears an area around the
content. The padding is transparent
Border - A border that goes around the
padding and content
Margin - Clears an area outside the
border. The margin is transparent
The box model allows us to add a border
around elements, and to define space
between elements.
22
<!DOCTYPE html> <html> <head><style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style> </head>
<body> <h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML
element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border. </div>
</body> </html>
23
Bootstrap Basic Table
<!DOCTYPE html> <div class="container"> <h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal
<html lang="en"> dividers) to a table:</p>
<head> <table class="table">
<title>Bootstrap Example</title> <thead>
<tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th>
<meta charset="utf-8">
</tr> </thead>
<meta name="viewport" content="width=device-width, initial- <tbody>
scale=1"> <tr> <td>John</td> <td>Doe</td> <td>john@[Link]</td></tr>
<link rel="stylesheet" <tr> <td>Mary</td> <td>Moe</td> <td>mary@[Link]</td></tr>
href="[Link] <tr> <td>July</td> <td>Dooley</td> <td>july@[Link]</td> </tr>
.[Link]"> </tbody>
<script </table> </div> </body>
src="[Link] </html>
></script>
<script
src="[Link]
[Link]"></script>
</head>
<body>
24
References:
[Link]
[Link]
[Link]
The complete reference, eleventh edition, available at:
[Link]
[Link]
25
Thank you
26