WT Module 4

Mahatma Education Society’s
Pillai HOC College of Engineering and

Technology, Rasayani
Department of Electronics and Computer
Science
Module 4: Bootstrap
(can be downloaded from https://getbootstrap.com/)
By Pooja Kulkarni
Introduction to Bootstrap
• Bootstrap is a free front-end framework for faster and
easier web development.
• Bootstrap includes HTML and CSS based design

templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other,
as well as optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create

responsive designs.
• Responsive web design is about creating web sites

which automatically adjust themselves to look good on
all devices, from small phones to large desktops.
Advantages of Bootstrap
 Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap
 Responsive features: Bootstrap's responsive CSS
adjusts to phones, tablets, and desktops
 Mobile-first approach: In Bootstrap, mobile-first styles
are part of the core framework
 Browser compatibility: Bootstrap 5 is compatible with
all modern browsers (Chrome, Firefox, Edge, Safari,
and Opera).
 Note: Mobile-first approach refers to an approach to

developing websites in which the mobile-enabled version
of the website is given priority over its desktop version.
First Web Page With Bootstrap 5
<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2
/dist/css/bootstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/
dist/js/bootstrap.bundle.min.js"></script>
</head>
continued
<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>
Output
 meta charset=“utf-8”: indicates the web page’s
character encoding
 <meta name="viewport" content="width=device-
 A Browser’s viewport is the area of web page in which
the content is visible to the user.
 When a page is not made responsive for smaller
viewports it looks bad or even breaks on smaller
screen.
 To fix this problem introduce a responsive tag to
control the viewport. This tag was firstly introduced by
Apple Inc. for Safari iOS.
 The width property governs the size of the viewport.
 It is possible to set it to a specific value (“width=600”) in
terms of CSS pixels. Here it is set to “width= device-
width” which is the width of the device in terms of CSS
pixels at a scale of 100%.
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can
zoom the page.
maximum-scale: Maximum zoom level to which a user can
zoom the page.
user-scalable: Flag which allows the device to zoom in or
out.(value= yes/no)..
Containers are used to pad the content inside of them,
and there are two container classes available:
 The .container class provides a responsive fixed width
container.
 Use the .container class to create a responsive, fixed-
width container.
 Its width (max-width) will change on different screen
sizes:
 The .container-fluid class provides a full width
container, spanning the entire width of the viewport
Output
<div class="container pt-5"></div>
 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 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>
You can also use the .container-sm|md|lg|xl classes to

determine when the container should be responsive.
(The max-width of the container will change on different
screen sizes/viewports:))
Example
<div class="container pt-3">

<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="container-sm border">.container-sm</div>

<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
</body>
</html>
Example (Local Scope)
<?php
function myTest()
{
$x = 5; // local scope
echo "<p>Variable x inside function is: $x</p>";
}
myTest();
// using x outside the function will generate an

error
echo "<p>Variable x outside function is: $x</p>";

?>
Bootstrap 5 Grid System
 Bootstrap's grid system is built with flexbox and allows
up to 12 columns across the page.
 If you do not want to use all 12 columns individually, you
can group the columns together to create wider columns:
 The grid system is responsive, and the columns will re-
arrange automatically depending on the screen size.
 Make sure that the sum adds up to 12 or fewer (it is not
required that you use all 12 available 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)
 The classes above can be combined to create more dynamic

and flexible layouts
Example:
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-
white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-
white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -

->
Bootstrap: Navigation
System
 A navigation bar is used in every website to make it more
user-friendly so that the navigation through the website
becomes easy and the user can directly search for the topic
of their interest.
 Bootstrap provide following various types of navigation bar:
 Basic Navbar
 Inverted Navbar
 Coloured Navigation Bar
 Right-Aligned Navbar
 Fixed Navigation Bar
 Drop-Down menu Navbar
 Collapsible Navigation Bar
Basic Navbar:
 First of all, we will initialize it by using a nav tag which is an
inbuilt tag just like the paragraph tag and the header tags.
 Within this tag, we will call the class=”navbar navbar-

default” which are the inbuilt classes of the bootstrap that give
the top space of your web page to your navigation part and the
default part is for the default view of that bar which is white in
color.
 Then going further, we will have two div tags

one class=”container-fluid” and the other class=”navbar-
header”.
 These classes are basically for the navigation bar to take the full
upper width of the page and then we add the homepage and the
other links to i
Inverted Navbar:
 It is quite similar to what we studied earlier in
the Basic Navbar section.
 The change comes inside the class associated with

the nav tag i.e. instead of the navbar-default we will
use the navbar-inverse and the colors of the navigation
bar get inverted.
Coloured navigation Bar:
 In Bootstrap 4, To change the background colour of the
navigation bar we can use various classes with the nav
tag-
 .bg-primary – Blue
 .bg-success – Green
 .bg-warning – Yellow
 .bg-danger – Red
 .bg-secondary – Grey
 .bg-dark – Black
 .bg-light – White
 Use .bg-color class to change the color of the navbar to
the above-listed colors.
Right-Aligned Navbar:
 By default, the links on a navigation bar are arranged on the
left.
 In the above navigation bar not only the space on

 the left but also in the right can be used.
 This makes the navigation bar much more interactive.
 The change comes inside the last div tag in which the list is
present to be shown on the navbar.
 We simply add a new class in the already existing class
i.e. class= “nav navbar-nav” and we add navbar-right to it.
 Now we can see the content on the right side of the
navigation bar too.
 The content that will be written last will appear closer to the
center of the screen.
Fixed Navigation Bar:
 We can fix a navigation bar at the top of the webpage so
that, if you scroll down that webpage you can still view the
navigation bar from any position on the page.
 Scroll down the GeeksForGeeks HomePage to see this

effect.
 To make a navigation bar fixed at the top of the webpage,

add a navbar-fixed-top class to the navbar
Drop-Down Menu Navbar:
 This is a good approach to be used in designing a
navigation bar because if we are creating a website that
has a lot of content in it and is quite big to scroll then
we can use this approach.
 The benefit of this approach is that the whole
navigation bar does not get occupied with these links.
 In this, the only change is the introduction of a drop-
down menu after the addition of the homepage.
 We will initialize a div tag with class=”dropdown” to
make a drop-down interface and after that, we can add
the content to it.
Collapsible Navigation Bar:
 To hide links on the navigation bar and make them
visible after clicking a button, we add a collapsible
navigation bar.
 Add a navbar-toggle class to a button, then add data-

toggle=”collapse”, then add an id to the list of links
and add the name of that id inside data-target=”#id”
 Then finally, wrap all the content of the navbar inside a

div element with class navbar-collapse collapse.
Breadcrumb in Bootstrap
 Breadcrumbs are used to indicate the current page’s
location within a navigational hierarchy.
 Basic breadcrumbs
 Bootstrap allows users to easily create static breadcrumbs

layouts by adding the class .breadcrumb to ordered or
unordered lists, as demonstrated in the following example.
 Utility classes can be used to decorate the breadcrumbs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible“ content=“ IE=
edge">
width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.
0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0
alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Breadcrumb</title>
</head>
<body>
<div class="m-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current
="page"> Home</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#"> Home</a>
</li>
<li class="breadcrumb-item active" aria-
current="page">Services</li>
</ol>
</nav>
<li class="breadcrumb-item"> <a href="#"> Home </a>
</li>
<li class="breadcrumb-item"> <a href="#"> Services
</a>
</li>
<li class="breadcrumb-item active" aria
current="page"> Contact </li>
</ol>
</nav>
</div>
</body>
</html>
 Dividers
 When you want to modify the default breadcrumb

divider / with the > as a divider, then you can use
some custom CSS style rules as shown in the below
example:
 Dividers are automatically added in CSS through the

pseudo-element ::before and property content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content=
"IE=edge">
width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.
3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3
.0-
alpha3/dist/js/bootstrap.bundle.min.js"></scrip
t>
<title>Bootstrap - Breadcrumb</title>
</head>
<body>
<div class="m-4">
<nav style="--bs-breadcrumb-divider: '>';" aria-
label="breadcrumb">
<li class="breadcrumb-item"><a href ="#">Home</a>
</li>
<li class="breadcrumb-item active" aria-current=
"page">Services</li>
</ol>
</nav>
</div>
</body>
</html>
Ref program for Que 1 in Question Bank
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6
.2/dist/css/bootstrap.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/
jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.1
6.1/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6
.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Large Grid</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 bg-
success">
<ol>
<li> abc </li>
<li> abc </li>
<li> abc </li>
<li> abc </li>
</ol>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 bg-warning">
<ol>
<li> xyz </li>
<li> xyz </li>
<li> xyz </li>
<li> xyz </li>
</ol>
</div>
</div>
</div>
</div></body> </html>
Output
Ref for Que 2 in Question Bank
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.
1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.
7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1
/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">
Default</button>
<button type="button" class="btn btn-primary">
Primary</button>
<button type="button" class="btn btn-success">
Success</button>
<button type="button" class="btn btn-info"> Info</button>
<button type="button" class="btn btn-warning">
Warning</button>
<button type="button" class="btn btn-danger">
Danger</button>
<button type="button" class="btn btn-link">Link</button>
</html> </div> </body>
Output

WT Module 4

Uploaded by

Copyright:

Available Formats

WT Module 4

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

WT Module 4

Uploaded by

Copyright:

Available Formats

Mahatma Education Society’s

Pillai HOC College of Engineering and

(can be downloaded from https://getbootstrap.com/)

• Bootstrap includes HTML and CSS based design

• Bootstrap also gives you the ability to easily create

• Responsive web design is about creating web sites

 Note: Mobile-first approach refers to an approach to

<div class="container p-5 my-5 border"></div>

<div class="container p-5 my-5 bg-dark text-

<div class="container p-5 my-5 bg-primary text-

You can also use the .container-sm|md|lg|xl classes to

<div class="container pt-3">

<div class="container-sm border">.container-sm</div>

// using x outside the function will generate an

echo "<p>Variable x outside function is: $x</p>";

.col- (extra small devices - screen width less than 576px)

 The classes above can be combined to create more dynamic

<!-- Or let Bootstrap automatically handle the layout -

 Within this tag, we will call the class=”navbar navbar-

 Then going further, we will have two div tags

 The change comes inside the class associated with

 In the above navigation bar not only the space on

 Scroll down the GeeksForGeeks HomePage to see this

 To make a navigation bar fixed at the top of the webpage,

 Add a navbar-toggle class to a button, then add data-

 Then finally, wrap all the content of the navbar inside a

 Bootstrap allows users to easily create static breadcrumbs

 When you want to modify the default breadcrumb

 Dividers are automatically added in CSS through the

You might also like