BOOTSTRAB (14 To 21)

Subject Code: 4330705 Subject: Responsive Web Page Design
Enrolment No: 226010307102 Name: RATHOD HETAL Date: - - -
PRACTICAL NO: 14
Aim: Create responsive web page of education website using bootstrap breadcrumb,
pagination, labels/badge, Jumbotron/page header, thumbnail components.
INPUT:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<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.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1> Breadcrumb</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item"><a href="#">RATHOD HETAL</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<br><br>
AYD/C0/2022-23/SEM-3 1
<h2>Pagination - Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
<br><br>
<h2>Badges</h2>
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>

<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-
circle">
AYD/C0/2022-23/SEM-3 2
<span class="visually-hidden">New alerts</span>
</span>
</button>
</div>
<br><br><br><br>
<div class="container">
<div class="jumbotron">
<h4>RATHOD HETAL</h4>
<h1>Bootstrap Jumbotron</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects
on the web.</p>
</div>
<p>This is First text.</p>
<p>This is Second text.</p>
<p>This is another text.</p>
<p>This is Same text.</p>
</div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 3
PRACTICAL NO: 15
Aim: Following tasks to be performed using bootstrap progress bars component.
A) Creating progress bars
B) Adding label to progress bars
C) Creating multi-color, stripped and animated progress bars
D) Changing value of progress bar dynamically using JavaScript
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
style="width:70%">
RATHOD HETAL
<span class="sr-only">70% Complete</span>
</div></div></div>
AYD/C0/2022-23/SEM-3 4
<h2>Progress Bar With Label</h2>
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
style="width:80%">
80%
</div> </div></div>
<h2>Colored Progress Bars</h2>
<p>The contextual classes colors the progress bars:</p>
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:50%">
50% Complete (success)
</div> </div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-
60% Complete (info)
</div></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
70% Complete (warning)
</div>
</div>
AYD/C0/2022-23/SEM-3 5
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-
80% Complete (danger)
</div>
</div>
</div>
<h2>Striped Progress Bars</h2>
<p>The .progress-bar-striped class adds stripes to the progress bars:</p>
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (success)
</div></div></div>
<h2>Animated Progress Bar</h2>
<p>The .active class animates the progress bar:</p>
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width:80%">
80%
</div></div>
<H2>RATHOD HETAL</H2>
</div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 6
AYD/C0/2022-23/SEM-3 7
PRACTICAL NO: 16
Aim: Use media, rounded media, Nested media object to create

responsive web page for all family members in hierarchical order.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<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.6.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></s
cript>
</head>
<body>
<h2>Nested Media Objects</h2>
<p>Media objects can also be nested (a media object inside a media

object):</p><br>
AYD/C0/2022-23/SEM-3 8
<div class="media">
<div class="media-left">
<img src="images/img_avatar1.png" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">Grand Father<small><i>Age : 68</i></small></h4>
<br>

<div class="media">
</div>
<h4 class="media-heading">Father Age :46
</h4>
<br>
<div class="media">
</div>
AYD/C0/2022-23/SEM-3 9
<h4 class="media-heading">Son Age: 17</h4>
</div>
</div>
</div>
<div class="media">
</div>
<h4 class="media-heading">Mather Age:40</h4>
</div>
</div>
</div>
</div>
<div class="media">
</div>
<h4 class="media-heading">Grand Mother Age : 65</h4>
AYD/C0/2022-23/SEM-3 10
</div>
</div>
</div>
<h2> HETAL RATHOD </h2>
</div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 11
PRACTICAL NO: 17
Aim: Create responsive webpage of various service provider

information using bootstrap panel component, List group component,
various alert messages and show message after bootstrap alert has
been closed.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
AYD/C0/2022-23/SEM-3 12
</div>
<h2>List Group With Badges</h2>
<ul class="list-group">
<li class="list-group-item">New <span class="badge">15</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">2</span></li>
</ul>
</div>
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
</div>
<h2>Alerts</h2>
<p>The a element with class="close" and data-dismiss="alert" is used to close the alert
box.</p>
<p>The alert-dismissible class adds some extra padding to the close button.</p>
<div class="alert alert-success alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div><h2> HETAL RATHOD </h2></div>
AYD/C0/2022-23/SEM-3 13
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 14
PRACTICAL NO: 18
Aim: Design a smooth page transition between homepage, about and contact us page using
bootstrap transition plugin.
INPUT:
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
#section1 {padding-top:50px;height:300px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:300px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:300px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:300px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:300px;color: #fff; background-color: #009688;}
</style>
</head>
AYD/C0/2022-23/SEM-3 15
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-

target="#myNavbar">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Home Page</a></li>
<li><a href="#section2">About Us</a></li>
<li><a href="#section3">Contact Us</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Careers

<span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
</ul>
AYD/C0/2022-23/SEM-3 16
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Home Page</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this
section and look at the
navigation bar while scrolling!</p>
<h2>HETAL RATHOD </h2>
</div>
<h1>About Us</h1>
</div>
AYD/C0/2022-23/SEM-3 17
<h1>Contact Us</h1>
</div>
<h1>Careers</h1>
</div>
<h1>Section 4 Submenu 2</h1>
<h2>HETAL RATHOD </h2>
AYD/C0/2022-23/SEM-3 18
</div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 19
PRACTICAL NO: 19
Aim: Design a webpage with different modal dialog for “Save record
confirmation”,“Delete record confirmation” using model dialog plugin of bootstrap.
INPUT:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
crossorigin="anonymous">

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
AYD/C0/2022-23/SEM-3 20
</script>
<style>
body{
margin-left:10px;
margin-right:10px;
</style>
</head>
<body>
<h1 style="color:green">A Y Dadabhai Technical Institute</h1>

<button type="button" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#idName"> Sample Button</button><BR><BR>
<H2>HETAL RATHOD</H2>

<div class="modal fade" id="idName" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"> Modal title</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button></div>
<div class="modal-body">This is a demo Modal.(HETAL RATHOD)</div>
AYD/C0/2022-23/SEM-3 21
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> Close</button>
<button type="button" class="btn btn-primary"> Save changes</button>
</div></div></div></div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 22
PRACTICAL NO: 20
Aim: Design news story page to demonstrate usage of Scrollspy for multiple section,
Tooltip for different photos, Collapsible and popover plugins of bootstrap.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head> <title>Bootstrap Example</title>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
ul.nav-pills {
top: 20px;
position: fixed;
div.col-sm-9 div {
height: 250px;
font-size: 28px;
AYD/C0/2022-23/SEM-3 23
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container"><div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span

class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section42">Section 4-2</a></li> </ul> </li></ul></nav>
AYD/C0/2022-23/SEM-3 24
<div class="col-sm-9"><div id="section1"> <h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p><h2>HETAL
RATHOD </h2> </div>
<div id="section2"> <h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p> </div>
<div id="section3"> <h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p> </div>
<div id="section41"> <h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p></div>
<div id="section42"> <h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p><h2>HETAL
RATHOD </h2></div>
</div> </div></div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 25
PRACTICAL NO: 21
Aim: Design animated photo gallery page using Carousel bootstrap plugin with
minimum seven photos.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Carousel Example (HETAL RATHOD)</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
AYD/C0/2022-23/SEM-3 26
<li data-target="#myCarousel" data-slide-to="2"></li></ol>

<div class="carousel-inner">
<div class="item active">
<img src="indoor.jpg" alt="chess" style="width:100%;">
<div class="carousel-caption">
<h3>Chess</h3>
<p>Chess</p></div></div>
<div class="item">
<img src="images/3.jpg" alt="badminton" style="width:100%;">
<h3>Badminton</h3>
<p>Badminton</p></div></div>
<div class="item">
<img src="images/4.jpg" alt="table tennis" style="width:100%;">
<h3>Table Tennis</h3>
<p>Table Tennis</p> </div></div></div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span></a>
AYD/C0/2022-23/SEM-3 27
</div></div>
</body>
</html>
OUTPUT:
AYD/C0/2022-23/SEM-3 28
AYD/C0/2022-23/SEM-3 29

BOOTSTRAB (14 To 21)

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

BOOTSTRAB (14 To 21)

Uploaded by

Copyright:

Available Formats

Subject Code: 4330705 Subject: Responsive Web Page Design

Enrolment No: 226010307102 Name: RATHOD HETAL Date: - - -

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

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

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

<div class="container mt-3">

<li class="breadcrumb-item"><a href="#">Home</a></li>

<li class="breadcrumb-item"><a href="#">Library</a></li>

<li class="breadcrumb-item"><a href="#">RATHOD HETAL</a></li>

<li class="breadcrumb-item active" aria-current="page">Data</li>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

<li class="page-item active"><a class="page-link" href="#">1</a></li>

<li class="page-item"><a class="page-link" href="#">2</a></li>

<li class="page-item"><a class="page-link" href="#">3</a></li>

<li class="page-item"><a class="page-link" href="#">Next</a></li>

<h1>Example heading <span class="badge bg-secondary">New</span></h1>

<button type="button" class="btn btn-primary">

Notifications <span class="badge bg-secondary">4</span>

<button type="button" class="btn btn-primary position-relative">

<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">

<span class="visually-hidden">unread messages</span>

<button type="button" class="btn btn-primary position-relative">

<p>This is First text.</p>

<p>This is Second text.</p>

<p>This is another text.</p>

<p>This is Same text.</p>

A) Creating progress bars

B) Adding label to progress bars

C) Creating multi-color, stripped and animated progress bars

D) Changing value of progress bar dynamically using JavaScript

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

<h2>Basic Progress Bar</h2>

<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"

<span class="sr-only">70% Complete</span>

<h2>Progress Bar With Label</h2>

<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"

<h2>Colored Progress Bars</h2>

<p>The contextual classes colors the progress bars:</p>

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-

50% Complete (success)

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-

60% Complete (info)

<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-

70% Complete (warning)

80% Complete (danger)

<h2>Striped Progress Bars</h2>

<p>The .progress-bar-striped class adds stripes to the progress bars:</p>

<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40"

aria-valuemin="0" aria-valuemax="100" style="width:50%">

50% Complete (success)

<h2>Animated Progress Bar</h2>

<p>The .active class animates the progress bar:</p>

<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0"

Aim: Use media, rounded media, Nested media object to create

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

<h2>Nested Media Objects</h2>

<p>Media objects can also be nested (a media object inside a media

<img src="images/img_avatar1.png" class="media-object" style="width:45px">

<h4 class="media-heading">Grand Father<small><i>Age : 68</i></small></h4>

<img src="images/img_avatar2.png" class="media-object" style="width:45px">

<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>