Scribd
Upload
33 views28 pages

WE LAB 7 - 2k22

Software Engineering

Uploaded by

ssss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views28 pages

WE LAB 7 - 2k22

Software Engineering

Uploaded by

ssss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

WEB ENGINEERING

Laboratory # 07

10/04/2024
UET TAXILA
Engr. Sidra Shafi

CLO Learning Outcomes Assessment Item BT Level PLO


No.

1 Construct the experiments / projects of Lab Task, Mid Exam, Final


varying complexities. Exam, Quiz, Assignment, P2 / C2 3
Semester Project

2 Use modern tool and languages. Lab Task, Semester Project P2 5

3 Demonstrate an original solution of Lab Assignment, Lab Task,


A2 8
problem under discussion. Semester Project

4 Work individually as well as in teams Lab Task, Semester Project A2 9


Bootstrap

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and
JavaScript free front-end framework for creating faster and easier responsive, mobile-first
websites.

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 Versions
Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new
components, faster stylesheet and more responsiveness.

Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However,
Internet Explorer 11 and down is not supported.

The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched
to vanilla JavaScript instead of jQuery.

1. Download or Include Bootstrap:

There are two ways to start using Bootstrap 5 on your own web site.

You can:

• Include Bootstrap 5 from a CDN


• Download Bootstrap 5 from getbootstrap.com

The first way is to use a CDN or Content delivery network. Using bootstrap CDN means that we
will not download and store the bootstrap files in our server or local machine. We will just include
the bootstrap CSS and JavaScript links to our page.

jsDelivr provides CDN support for Bootstrap's CSS and JavaScript:

MaxCDN:

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


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesh
eet">

<!-- Latest compiled JavaScript -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>
The second way is downloading and storing a copy Bootstrap file in our web server or local
machine.

Downloading Bootstrap 5:
If you want to download and host Bootstrap 5 yourself, go to https://getbootstrap.com/, and follow
the instructions there.

Install via Package Manager:

Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor.
Package managed installs don’t include documentation or our full build scripts.

Terminal:
npm install [email protected]

Example: Images_local_st.html

2. First Bootstrap Web Page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Bootstrap 5 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p class="text-end">Video provides a powerful way to help you prove your point. When you
click Online Video, you can paste in the embed code for the video you want to add. You can also
type a keyword to search online for the video that best fits your document....</p>
<p class="text-start">To make your document look professionally produced, Word provides
header, footer, cover page, and text box designs that complement each other. For example, you
can add a matching cover page, header, and sidebar. Click Insert and then choose the elements
you want from the different galleries....</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p class="text-wrap">Video provides a powerful way to help you prove your point. When
you click Online Video, you can paste in the embed code for the video you want to add. You can
also type a keyword to search online for the video that best fits your document....</p>
<p>To make your document look professionally produced, Word provides header, footer,
cover page, and text box designs that complement each other. For example, you can add a
matching cover page, header, and sidebar. Click Insert and then choose the elements you want
from the different galleries....</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Video provides a powerful way to help you prove your point. When you click Online
Video, you can paste in the embed code for the video you want to add. You can also type a
keyword to search online for the video that best fits your document....</p>
<p>To make your document look professionally produced, Word provides header, footer,
cover page, and text box designs that complement each other. For example, you can add a
matching cover page, header, and sidebar. Click Insert and then choose the elements you want
from the different galleries....</p>
</div>
</div>
</div>
</body>
</html>
Output:

Bootstrap Spacing:
Assign responsive-friendly margin or padding values to an element or a subset of its sides with
shorthand classes. Includes support for individual properties, all properties, and vertical and
horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Notation:

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in
them. This is because those classes are applied from min-width: 0 and up, and thus are not bound
by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-
{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

• m - for classes that set margin

• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top

• b - for classes that set margin-bottom or padding-bottom


• s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-
right in RTL

• e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in
RTL

• x - for classes that set both *-left and *-right

• y - for classes that set both *-top and *-bottom

• blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0

• 1 - (by default) for classes that set the margin or padding to $spacer * .25

• 2 - (by default) for classes that set the margin or padding to $spacer * .5

• 3 - (by default) for classes that set the margin or padding to $spacer

• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5

• 5 - (by default) for classes that set the margin or padding to $spacer * 3

• auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Horizontal centering:

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width
block level content—that is, content that has display: block and a width set—by setting the

horizontal margins to auto.

<div class="mx-auto" style="width: 200px;"> Centered element </div>

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:
If you do not want to use all 12 columns individually, you can group the columns together to create
wider columns:

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen
size: On a big screen, it might look better with the content organized in three columns, but on a
small screen it would be better if the content items were stacked on top of each other.

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.

Note: Each class scales up, so if you wish to set the same widths for sm and md, you only
need to specify sm.

Grid System Rules:


Some Bootstrap 4 grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for


proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children
of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Grid columns are created by specifying the number of 12 available columns you wish to
span. For example, three equal columns would use three .col-sm-4
• Column widths are in percentage, so they are always fluid and sized relative to their parent
element

Example: Three elements with .col-sm will each automatically be 33.33% wide from the small
breakpoint and up.

Bootstrap Grid Classes:


Grid_classes_bootstrap5.html

Basic Structure of a Bootstrap 5 Grid:

The following is a basic structure of a Bootstrap grid:

<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

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


<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

First example: create a row (<div class="row">). Then, add the desired number of columns (tags
with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg, xl
or xxl, while the second star represents a number, which should add up to 12 for each row.

Second example: instead of adding a number to each col, let bootstrap handle the layout, to create
equal width columns: two "col" elements = 50% width to each col, while three cols = 33.33%
width to each col. Four cols = 25% width, etc. You can also use .col-sm|md|lg|xl|xxl to make the
columns responsive.

Example: Grid_classes_bootstrap5_medium
Examples:
Below we have collected some examples of basic Bootstrap 5 grid layouts.

Four Equal Columns:


To create equal width columns for all devices and screen-widths, use col class without any no. and
let bootstrap decide the division for layout.

<div class="container-fluid mt-3">


<h1>Four equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width
columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
</div>
</div>

Lab Exercise: 1

1. Create two equal width columns on all devices and screen-widths.


2. Create unequal columns for all devices and screen-widths. (Hint: Use no.s)

Three Equal width Columns (stack below 576px):


The example shows 3 columns will automatically stack on top of each other when the screen is
less than 576px wide.

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width
columns.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-4 p-3 bg-dark text-white">.col</div>
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>

Below 576px, they stack on top of one another.


Lab Exercise: 2

Create two un-equal width columns (4+8) that are shown like this division on medium, large
and extra-large devices, but stack on small and extra small devices.

Note: You can turn any fixed-width layout into a full-width layout by changing the .container
class to .container-fluid:

Auto Layout Columns:


In Bootstrap 5, there is an easy way to create equal width columns for all devices: just remove the
number from .col-size-* and only use the .col-size class on a specified number of col elements.
Bootstrap will recognize how many columns there are, and each column will get the same width.
The size classes determines when the columns should be responsive:

Output:

Lab Exercise: 3

What will be the distribution of classes for a 33.3% / 66.6% split and for a 50% / 50% split?
Medium Grid Example:
Note: For medium devices we will use the .col-md-* classes:

<div class="col-sm-3 col-md-6">....</div>


<div class="col-sm-9 col-md-6">....</div>

Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those.
At the medium size, look at classes with -md- in them and use those".

The following example will result in a 25%/75% split on small devices and a 50%/50% split on
medium (and large and xlarge) devices. On extra small devices, it will automatically stack (100%):

Example:

<!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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
"></script>
</head>
<body>

<div class="container-fluid">
<h1>Medium Grid</h1>
<p>The following example will result in a 25%/75% split on small devices and a
50%/50% split on medium (and large and xlarge) devices. On extra small devices,
it will automatically stack (100%).</p>
<p>Resize the browser window to see the effect.</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 bg-success">
Video provides a powerful way to help you prove your point. When you
click Online Video, you can paste in the embed code for the video you want to
add. You can also type a keyword to search online for the video that best fits
your document.
</div>
<div class="col-sm-9 col-md-6 bg-warning">
Video provides a powerful way to help you prove your point. When you
click Online Video, you can paste in the embed code for the video you want to
add. You can also type a keyword to search online for the video that best fits
your document.
</div>
</div>
</div>
</div>

</body>
</html>

Output:

On small Devices:

Lab Exercise: 4 :- Use only the medium class in above example and check the outputs.
Large Grid Example:
Note: For large devices we will use the .col-lg-* classes:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>


<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those.
At the medium size, look at classes with -md- in them and use those. At the large size, look at
classes with the word -lg- in them and use those".

The following example will result in a 25%/75% split on small devices, a 50%/50% split on
medium devices, and a 33%/66% split on large, xlarge and xxlarge devices. On extra small devices,
it will automatically stack (100%):

Example:
<!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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>Large Grid</h1>
<p>The following example will result in a 25%/75% split on small devices and a 50%/50% split
on medium and 33%/66% split on large, xlarge and xxlarge devices. On extra small devices, it will
automatically stack (100%).</p>
<p>Resize the browser window to see the effect.</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 bg-success">
Video provides a powerful way to help you prove your point. When you click Online Video,
you can paste in the embed code for the video you want to add. You can also type a keyword to
search online for the video that best fits your document.
</div>
<div class="col-sm-9 col-md-6 col-lg-8 bg-warning">
Video provides a powerful way to help you prove your point. When you click Online Video,
you can paste in the embed code for the video you want to add. You can also type a keyword to
search online for the video that best fits your document.
</div>
</div>
</div>
</div>
</body>
</html>

Output:

Bootstrap Navigation Bar:


A navigation bar is a navigation header that is placed at the top of the page:

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing
class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or
small screens).

To add links inside the navbar, use a <ul> element with class="navbar-nav". Then
add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:

Code:

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light">


<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>

<div class="container-fluid mt-3">


<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xxl|xl|lg|md|sm class determines when the navbar should stack vertically (on
xxlarge, extra large, large, medium or small screens).</p>
</div>

</body>
</html>

Output:

Centered Navbar:
Add the .justify-content-center class to center the navigation bar.

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>

<div class="container-fluid mt-3">


<h3>Centered Navbar</h3>
<p>Use the .justify-content-center class to center the navigation bar.</p>
<p>In this example, the navbar will be centered on medium, large and extra large screens. On small
screens it will be displayed vertically and left-aligned (because of the .navbar-expand-sm class).</p>
</div>
</body>
</html>

Output:

Colored Navbar:
Use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)

Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use
the .navbar-light class to add a black text color.

Example: centerednavbar.html
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light justify-content-center">
<!-- Blue background with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center">

Fixed Navigation-Bar:
The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .fixed-top class makes the navigation bar fixed at the top:

Example:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">.. </nav>

Use the .fixed-bottom class to make the navbar stay at the bottom of the page:

Active / Disabled Links:

Collapsing The Navigation Bar:

Very often, especially on small screens, you want to hide the navigation links and replace them
with a button that should reveal them when clicked on.

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-bs-


toggle="collapse" and data-bs-target="#thetarget". Then wrap the navbar content (links, etc)
inside a <div> element with class="collapse navbar-collapse", followed by an id that matches
the data-bs-target of the button: "thetarget".

Example:

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container-fluid mt-3">


<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top
right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display
the toggler button.</p>
</div>

</body>
</html>

Note: You can also remove the .navbar-expand-sm class to ALWAYS hide navbar links and
display the toggler button.
Output:

Navigation Bar with Dropdown:


Navbars can also hold dropdown menus:

Example:

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-
toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
</body>
</html>

Output:
Example explanation:
The .dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-
toggle="dropdown" attribute.
Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

Why do we put a # in the href attribute of the link?

Since we do not have any page to link it to, and we do not want to get a "404" message, we put #
as the link. In real life it should of course been a real URL to the "Search" page.

Bootstrap 5 Buttons:
Bootstrap 5 provides different styles of buttons:

The button classes can be used on <a>, <button>, or <input> elements:


Button Outline:

<button type="button" class="btn btn-outline-primary">Primary</button>

Button Sizes:
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:

Block Level Buttons:


Add class .btn-block to create a block level button that spans the entire width of the parent
element.

Active/Disabled Buttons:
A button can be set to an active (appear pressed) or a disabled (unclickable) state.

The class .active makes a button appear pressed, and the disabled attribute makes a button
unclickable. Note that <a> elements do not support the disabled attribute and must therefore use
the .disabled class to make it visually appear disabled.

Spinner Buttons:
You can also add "spinners" to a button.

<button class="btn btn-primary">


<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

Disabled Buttons:

Bootstrap Collapse:

Collapsibles are useful when you want to hide and show large amount of content:

Code:

<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-
target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Video provides a powerful way to help you prove your point. When you click Online Video, you can
paste in the embed code for the video you want to add. You can also type a keyword to search online for
the video that best fits your document.
</div>
</div>
</body> </html>

Output:
Example Explained:
The .collapse class indicates a collapsible element (a <div> in our example); this is the content
that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-bs-toggle="collapse" attribute to an
<a> or a <button> element. Then add the data-bs-target="#id" attribute to connect the button with
the collapsible content (<div id="demo">).

Note: For <a> elements, you can use the href attribute instead of the data-bs-target attribute:

<a href="#demo" data-bs-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse"> Lorem ipsum dolor text.... </div>

By default, the collapsible content is hidden. However, you can add the .show class to show the
content by default.

Image:

Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of
the screen.

Create responsive images by adding an .img-fluid class to the <img> tag. The image will then
scale nicely to the parent element.
The .img-fluid class applies max-width: 100%; and height: auto; to the image.

Example:

<img src="WD.jpg" width="304" height="236" class="img-fluid alt=" cannot show image">

Centered Image:

Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block)
to the image:

Example: <img src="web development.png" class="mx-auto d-block" style="width:70%">

Aligning Images:

Float an image to the left with the .float-start class or to the right with .float-end:

Example:

<img src="WD.jpg" width="304" height="236" class="img-fluid rounded float-end" alt=" cannot


show image">
Image Shapes:

Thumbnail:

The .img-thumbnail class shapes the image to a thumbnail (bordered).

Example:

<img src="WD.jpg" width="304" height="236" class="img-thumbnail" alt=" cannot show


image">

Circle: The .rounded-circle class shapes the image to a circle:

Rounded_corners: The .rounded class adds rounded corners to an image:

Lab Task
Design a web page as shown below using Bootstrap. Marks: 10

Part 1: Add Bootstrap


• Open the cookiestore.html file in your code editor.
• Link the Bootstrap CSS file in the <head> section of cookiestore.html.

Part 2. Responsive layouts


1. Apply the bootstrap grid classes to the cookies on the page in the <main> section. The
resulting responsive layout should display as follows:
• On mobile screens, 1 cookie per row
• Starting on medium md screens, 2 cookies per row
• Starting on large lg screens, 4 cookies per row
2. Apply styling and classes so that the title text is displayed centered within
the <header> section. Below are some hints on how to do this:

• Use custom styles for this section


• Give the header section a fixed height, I used 450px
• Check about how to center a div block
• Choose a background image of your own or use the image provided
• There are multiple ways to solve this section

3. Style the "About us" section and the <footer> section of the page to display similar to
the screenshots

• Use a grid for the "About us" section


• style the footer as you like or like given

4. Read about offsetting columns, position and opacity in the bootstrap documentation link
is https://getbootstrap.com/docs/5.2/utilities/opacity/

IMPORTANT:

• Don't change the order of the 3 main cookie html tags, the <h3>, followed by
the <p>, and then the <img> tags. Remember, we want to keep semantic
order.

• You can add <div>'s and bootstrap classes as needed, you can wrap the tags
in div's as needed, as long as you don't change the order.
*****************************************

You might also like