Scribd
Upload
27 views82 pages

Bootstrap Practical

Uploaded by

chauhanamit5018
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
27 views82 pages

Bootstrap Practical

Uploaded by

chauhanamit5018
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/ 82

Ch-5 BootstrapFramework _Practical

Bootstrap-layout
1) Responsive containers
<!DOCTYPE html>
<html>
<head>
<link href="css\bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container-sm1">
Containers
Containers are a fundamental building block of Bootstrap
that contain, pad, and align your content within a given device
or viewport.
Responsive containers
Responsive containers allow you to specify a class that is
100% wide until the specified breakpoint is reached, after
which we apply max-widths for each of the higher
breakpoints. For example, .container-sm is 100% wide to start
until the sm breakpoint is reached, where it will scale up with
md, lg, xl, and xxl.
</div>
<div class="container-xxl">Containers
Containers are a fundamental building block of Bootstrap
that contain, pad, and align your content within a given device
or viewport.

1
Ch-5 BootstrapFramework _Practical

Responsive containers
Responsive containers allow you to specify a class that is
100% wide until the specified breakpoint is reached, after
which we apply max-widths for each of the higher
breakpoints. For example, .container-sm is 100% wide to start
until the sm breakpoint is reached, where it will scale up with
md, lg, xl, and xxl.
</div>
</body>
</html>
Output

2)row
<!-- Row -->
<!DOCTYPE html>
<html>
<head>
<link href="css\bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
2
Ch-5 BootstrapFramework _Practical

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

<!-- Force next columns to break to new line -->

<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
</body>
</html>
Output

3)Column
<!-- columns -->
<!DOCTYPE html>
<html>
<head>
<link href="css\bootstrap.css" rel="stylesheet">
</head>
3
Ch-5 BootstrapFramework _Practical

<body>
<div>
<div class="row">
<div class="col-md-4">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
</body>
</html>
Output

4
Ch-5 BootstrapFramework _Practical

4) Responsive Classes
<!DOCTYPE html>
<html>
<head>
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script> -->
<link href="css\bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-2">col-8</div>
<div class="col-4">col-4</div>
</div>
</body>
</html>

5
Ch-5 BootstrapFramework _Practical

Output

5) Re-Ordering
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<script src="js/bootstrap.min.js"></script>-->
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col order-5">
1
</div>
<div class="col order-1">
200
</div>
<div class="col order-2">
2
</div>

6
Ch-5 BootstrapFramework _Practical

</div>
</div>
</body>
</html>
Output

6) offset column
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<div class="row border">
<div class="col-md-4 border">.col-md-4</div>
<div class="col-md-4 offset-md-4 border">.col-md-4
.offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-
3</div>

7
Ch-5 BootstrapFramework _Practical

<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-


3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 border">.col-md-6
.offset-md-3</div>
</div>
</div>
</body>
</html>
Output

Content-typography
1) Heading
<!-- Headings -->
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script>-->
</head>
<body>
<p class="h1"> I'm Heading1</p>
8
Ch-5 BootstrapFramework _Practical

<p class="h2">I'm Heading2</p>


<h3>I'm Heading3 </h3>
<h4>I'm Heading4 </h4>
<h5>I'm Heading5 </h5>
<h6>I'm Heading6 </h6>
</body>
</html>
Output

2) Inline Sub Heading


<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<p class="small"> I'm Heading1 h1</p>
<p class="mark">I'm secondar"y Heading2 h2</p>
9
Ch-5 BootstrapFramework _Practical

<h3 class="text-decoration-underline ">I'm Heading3 h3.


<small>I'm secondary Heading3 h3</small></h3>
<h4 class="text-decoration-line-through" >I'm Heading4 h4.
<small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5
h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1
h6</small></h6>
</body>
</html>
Output

3)Lead Body Copy


<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>

10
Ch-5 BootstrapFramework _Practical

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph
demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an
example
paragraph demonstrating the use of lead body copy.This is
an
example paragraph demonstrating the use of lead body
copy.
This is an example paragraph demonstrating the use of
lead body copy.</p>
</body>
</html>
Output

4)Emphasis
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>

11
Ch-5 BootstrapFramework _Practical

<body>
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as
italics</em><br>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-muted">This content is muted</p>
<p class="text-primary">This content carries a primary
class</p>
<p class="text-success">This content carries a success
class</p>
<p class="text-info">This content carries a info class</p>
<p class="text-warning">This content carries a warning
class</p>
<p class="text-danger">This content carries a danger
class</p>
</body>
</html>
Output

12
Ch-5 BootstrapFramework _Practical

5)abbr
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<abbr title="World Wide Web"
class="initialism">WWW</abbr><br>
<abbr title="Real Simple Syndication" >RSS</abbr>
</body>
</html>
Output

6) Addresses
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
13
Ch-5 BootstrapFramework _Practical

<!-- <script src="js/bootstrap.min.js"></script> -->


</head>
<body>
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>
Output

14
Ch-5 BootstrapFramework _Practical

7) blockquote
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from
another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of
nature. The world's leading conservation organization, WWF
works in 100 countries and is supported by 1.2 million
members in the United States and close to 5 million
globally.</p>
<p class="blockquote-footer">From WWF's website</p>
</blockquote>
</div>
</body>
</html>

15
Ch-5 BootstrapFramework _Practical

Output

Table
1)Basic Table
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<table class="table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>

16
Ch-5 BootstrapFramework _Practical

<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
</body>
</html>
Output

3) Striped Table
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>

17
Ch-5 BootstrapFramework _Practical

<table class="table table-striped">


<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
18
Ch-5 BootstrapFramework _Practical

<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
Output

3) Bordered Table
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<table class="table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>

19
Ch-5 BootstrapFramework _Practical

<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
20
Ch-5 BootstrapFramework _Practical

</html>
Output

4) Hover Table
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<table class="table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>

21
Ch-5 BootstrapFramework _Practical

</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
Output

22
Ch-5 BootstrapFramework _Practical

5) Contextual Table
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script>-->
</head>
<body>
<table class="table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Product1</td>

23
Ch-5 BootstrapFramework _Practical

<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class="table-success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class="table-warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class="table-danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
24
Ch-5 BootstrapFramework _Practical

6) Responsive Table
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
25
Ch-5 BootstrapFramework _Practical

<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
26
Ch-5 BootstrapFramework _Practical

<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output

Image
<!DOCTYPE html>
<html>
27
Ch-5 BootstrapFramework _Practical

<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<img src="2.jpg" class="rounded float-start"><br>
<img src="1.jpg" class="rounded-circle float-end"><br>
<img src="2.jpg" class="img-thumbnail mx-auto d-
block">
</body>
</html>
Output

Form
1) Stacked Form
<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->

28
Ch-5 BootstrapFramework _Practical

</head>
<body>
<div class="container">
<h2>Stacked form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd"
placeholder="Enter password" name="pswd">
</div>
<div >
<label class="form-check-label">
<input class="form-check-input" type="checkbox"
name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
29
Ch-5 BootstrapFramework _Practical

</div>
</body>
</html>
Output

2) Inline Form
<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="container">
<h2>Inline form</h2>
<p>Make the viewport larger than 576px wide to see that all
of the form elements are inline and left-aligned. On small
screens, the form groups will stack horizontally.</p>
<form class="form-inline">
<label for="email2" >Email:</label>

30
Ch-5 BootstrapFramework _Practical

<input type="text" class="form-control " id="email2"


placeholder="Enter email" name="email">
<label for="pwd2" class="mb-2 mr-sm-
2">Password:</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="pwd2" placeholder="Enter password" name="pswd">
<label class="form-check-label mb-2 mr-sm-2">
<input type="checkbox" class="form-check-input mb-2
mr-sm-2" name="remember"> Remember me
</label>
<button type="submit" class="btn btn-primary mb-
2">Submit</button>
</form>
</div>
</body>
</html>
Output

3) Form inputs
<!DOCTYPE html>
<html>
<head>
31
Ch-5 BootstrapFramework _Practical

<link href="css/css3/bootstrap.css" rel="stylesheet">


<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="container">
<form>
<div class="form-group">
</div>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group form-check">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5"
id="comment"></textarea>
</div>
<div class="form-check">
<label for="comment">CheckBox:</label><br>

32
Ch-5 BootstrapFramework _Practical

<label class="form-check-label">
<input type="checkbox" class="form-check-input"
value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
value="" disabled>Option 3
</label>
</div>
<label for="comment">Redio Button:</label><br>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 1
</label>
</div>
33
Ch-5 BootstrapFramework _Practical

<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input"
name="optradio" disabled>Option 3
</label>
</div>
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class = "form-group">
<h3>Form Control Sizing</h3>

34
Ch-5 BootstrapFramework _Practical

<input class = "form-control input-lg" type = "text"


placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder
= "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text"
placeholder = ".input-sm">
</div>
<div class="form-group">
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>
</body>
</html>
Output

35
Ch-5 BootstrapFramework _Practical

Utilities
1)Color Utilities
<!DOCTYPE html>
<html>
<head>
<!-- <link href="css/css3/bootstrap.css" rel="stylesheet"> -->
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<p class="text-primary">R.P.Bhalodiy</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
36
Ch-5 BootstrapFramework _Practical

<p class="text-info bg-dark">.text-info</p>


<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
</body>
</html>
Output

Background
1)
<!DOCTYPE html>
<html>
<head>

37
Ch-5 BootstrapFramework _Practical

<!-- <link href="css/css3/bootstrap.css" rel="stylesheet"> -->


<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- p=padding,mb=Margin bottom -->
<div class="p-3 mb-2 bg-primary text-white">.bg-
primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-
secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-
success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-
danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-
warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-
transparent</div>
</body>
</html>

38
Ch-5 BootstrapFramework _Practical

Output

2)
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="bg-success p-2 text-white">This is default
success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity:
0.5;">This is 50% opacity success background</div>
</body>
</html>
Output

39
Ch-5 BootstrapFramework _Practical

Border Utilities
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body> <!-- border = 6826 -- dotted,dashed,double-->
<span class="border border-2 border-primary
">hello</span>
<span class="border border-secondary">hello</span>
<span class="border border-success">hello</span>
<span class="border border-danger">hello</span>
<span class="border border-warning">hello</span>
<span class="border border-info">hello</span>
<span class="border border-light">hello</span>
<span class="border border-dark">hello</span>
<span class="border border-white">hello</span>
</body>
</html>
Output

40
Ch-5 BootstrapFramework _Practical

Display Utilities
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/css3/bootstrap.css" rel="stylesheet"> -
->
</head>
<body> <!-- change d-inline to d-inline-block,d-block,d-
table,d-flex,d-none -->
<div class="d-inline p-2 bg-primary">d-inline</div><!--
6689 -->
<div class="d-block p-2 bg-secondary">d-inline</div>
</body>
</html>
Output

Overflow utility
<!DOCTYPE html>
<html>
<head>

41
Ch-5 BootstrapFramework _Practical

<link href="css/bootstrap.css" rel="stylesheet">


<!-- <link href="css/css3/bootstrap.css" rel="stylesheet">
-->
</head>
<body><!-- Change class=overflow-scroll -->
<div class="container p-3">
<h4 class="text-start text-primary">
Overflow utility example</h4>
<div class="overflow-auto mt-3 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
is a class applied
on an element with set width and height dimensions.
By design, this content will vertically scroll, if
overflowing.
</div>
<div class="overflow-hidden mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
is a utility class that is applied
on an element with set width and height dimensions.
This will hide the contents, when overflowing.
</div>
<div class="overflow-visible mt-5 pb-5 bg-light"
style="max-width: 160px; max-height: 40px;">
is a utility class that is applied
42
Ch-5 BootstrapFramework _Practical

on an element with set width and height dimensions.


This will not hide the contents, when overflowing.
</div>
<div class="overflow-scroll mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
is a utility class that is applied
on an element with set width and height dimensions.
This will always show a scroll bar irrespective of whether the
content will overflow or not.
</div>
<div class="overflow-scroll mt-5 pb-5 bg-light"
style="max-width: 360px; max-height: 80px;">
is a utility class that shows a scroll bar always.
</div>
</div>
</body>
</html>
Output

43
Ch-5 BootstrapFramework _Practical

Position utility
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h4 class="mb-4">Position values</h4>
<div class="container mt-4 bg-light border border-
dark">
Position: static states that the top, right,bottom, and
left properties will be the same no matter
<p class="position-static bg-info top-80 text-
light">position: static</p>
This part is out of the paragraph.
</div>
<div class="container mt-4 bg-light border border-
dark">Position: relative sets its position to be relative with
respect to the elements on top of it
<p class="position-relative bg-success top-50
text-light w-30">
position: relative;
</p>
This means that the top, right, bottom, and

44
Ch-5 BootstrapFramework _Practical

left properties will


affect the position of the Paragraph.
</div>
<div class="container mt-4 bg-light border border-
dark">
Position: absolute sets its position relative to
the closest parent and it set its position absolute
with that.
<p class="position-absolute bg-warning bottom-0
end-50 text-light">
position: absolute;
</p>
This means that the top, right, bottom, and left
properties will get adjusted with respect to the
nearest ancestor and then the position is set.
</div>
</body>
</html>
Output

45
Ch-5 BootstrapFramework _Practical

Spacing utility
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body><!-- Change gap-4,5 -->
<div class="d-grid gap-3"><!--6701 p=padding p-4/p-5 -->
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
</body>
</html>
Output

46
Ch-5 BootstrapFramework _Practical

Text utility
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<p class="text-start text-info">Text aligned at starting
position across all viewports sizes.</p>
<p class="text-center text-danger">Text aligned at center
position across all viewports sizes.</p>
<p class="text-end text-warning">Text aligned at end
position across all viewports sizes.</p>
</body>
</html>
Output

Vertical_align Utility
<!DOCTYPE html>
<html>
<head>
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<link href="css/bootstrap.css" rel="stylesheet">
47
Ch-5 BootstrapFramework _Practical

</head>
<body>
<table class="border" style="height: 100px;">
<tbody>
<tr >
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-text-top">text-top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
</tr>
</tbody>
</table>
</body>
</html>
Output

48
Ch-5 BootstrapFramework _Practical

Bootstrap Components
Navbar
<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<nav class = "navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>

<!-- <nav class="navbar navbar-expand-sm bg-dark navbar-


dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="1.png" alt="Logo" style="width:40px;"
class="rounded-pill">
</a>
</div>
</nav>-->

49
Ch-5 BootstrapFramework _Practical

<div class = "collapse navbar-collapse" id = "example-


navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li>
<a href = "#" >java
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Output

2) fixed-top navbar
<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->

50
Ch-5 BootstrapFramework _Practical

</head>
<body style="height:1500px">

<nav class="navbar navbar-default navbar-fixed-top">


<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

<div class="container" style="margin-top:50px">


<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>

51
Ch-5 BootstrapFramework _Practical

<p>A fixed navigation bar stays visible in a fixed position


(top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</body>
</html>
Output

52
Ch-5 BootstrapFramework _Practical

3) navbar-fixed-bottom
<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body style="height:1500px">
<nav class = "navbar navbar-default navbar-fixed-bottom"
role = "navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">

53
Ch-5 BootstrapFramework _Practical

<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position
(top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>

54
Ch-5 BootstrapFramework _Practical

</body>
</html>
Output

Navs and tabs


<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<p>Tabs Example</p>
<ul class="nav nav-tabs"><!-- 3974 40..-->

55
Ch-5 BootstrapFramework _Practical

<li ><a href="#">Home</a></li>


<li class="active"><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
Output

Dropdown
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>

56
Ch-5 BootstrapFramework _Practical

<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
Output

Button
<!DOCTYPE html>
<html>
<head>

57
Ch-5 BootstrapFramework _Practical

<link rel="stylesheet" href="css\bootstrap.min.css">


<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<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>

<br>
<br>
<br>

58
Ch-5 BootstrapFramework _Practical

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


lg">Large</button>
<button type="button" class="btn btn-
primary">Normal</button>
<button type="button" class="btn btn-primary btn-
sm">Small</button>
<button type="button" class="btn btn-primary btn-
xs">XSmall</button>
<br>
<br>
<br>
<button type="button" class="btn btn-primary active">Active
Primary</button>
<button type="button" class="btn btn-primary
disabled">Disabled Primary</button>
</body>
</html>
Output

59
Ch-5 BootstrapFramework _Practical

Button group
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-
primary">Apple</button>
<button type="button" class="btn btn-
primary">Samsung</button>
<button type="button" class="btn btn-
primary">Sony</button>
</div>
<br>
<br>
<br>
<div class="btn-group-vertical">
<button type="button" class="btn btn-
primary">Apple</button>

60
Ch-5 BootstrapFramework _Practical

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


primary">Samsung</button>
<button type="button" class="btn btn-
primary">Sony</button>
</div>
<br>
<br>
<br>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
</body>
</html>
Output

61
Ch-5 BootstrapFramework _Practical

breadcrumb
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\bootstrap.css">
<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<div>
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-
current="page">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Home</a></li>
<li class="breadcrumb-item active" aria-
current="page">Services</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Home</a></li>
62
Ch-5 BootstrapFramework _Practical

<li class="breadcrumb-item"><a
href="#">Services</a></li>
<li class="breadcrumb-item active" aria-
current="page">Contact</li>
</ol>
</div>
</body>
</html>
Output

Pagination
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>
<body>

63
Ch-5 BootstrapFramework _Practical

<div class="container mt-4">


<ul class="pagination">
<li class="page-item active"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a class="page-link"
href="#">1</a></li>
<li class="page-item"><a class="page-link"
href="#">2</a></li>
<li class="page-item disabled"><a class="page-link"
href="#">3</a></li>
<li class="page-item"><a class="page-link"
href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Output

Labels
<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
64
Ch-5 BootstrapFramework _Practical

<!-- <script src="js/bootstrap.min.js"></script> -->


</head>
<body><!-- 4845 -->
<h1>Example Heading <p class="label label-
default">Label</p></h1>
<h2>Example Heading <p class="label label-
default">Label</p></h2>
<h3>Example Heading <p class="label label-
default">Label</p></h3>
<h4>Example Heading <p class="label label-
default">Label</p></h4>
</body>
</html>
Output

<!DOCTYPE html>
<html>
<head>
<link href="css/css3/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>

65
Ch-5 BootstrapFramework _Practical

<body>
<p class="label label-default">Default Label</p>
<p class="label label-primary">Primary Label</p>
<p class="label label-success">Success Label</p>
<p class="label label-info">Info Label</p>
<p class="label label-warning">Warning Label</p>
<p class="label label-danger">Danger Label</p>
</body>
</html>
Output

Alerts
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\bootstrap.min.css">
<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>
<body>

66
Ch-5 BootstrapFramework _Practical

<div class="alert alert-primary" role="alert">


A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
67
Ch-5 BootstrapFramework _Practical

</div>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-
link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-
link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert
message. This example text is going to run a bit longer so that
you can see how spacing within an alert works with this kind
of content.</p>
</div>
</body>
</html>
Output

68
Ch-5 BootstrapFramework _Practical

Progress Bars
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\bootstrap.css">
<script src="Jquery\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
</head>
<body>
<h4>Progress Bar</h4><br>
<div class="progress">
<div class="progress-bar role="progressbar"
style="width: 15%" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100"></div>

69
Ch-5 BootstrapFramework _Practical

</div><br>
<div class="progress" style="height: 20px;">
<div class="progress-bar progress-bar-info progress-bar-
striped" role="progressbar" style="width: 25%" aria-
valuenow="25" aria-valuemin="0" aria-
valuemax="100"></div>
</div><br>
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-info" role="progressbar"
style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">50%</div>
</div><br>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 75%" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</body>
</html>
Output

70
Ch-5 BootstrapFramework _Practical

Accordion
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="accordion accordion-flush"
id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-
bs-toggle="collapse" data-bs-target="#firstCollapse" aria-
expanded="false" aria-controls="firstCollapse">
Bootstrap - Accordian
</button>
</h2>

71
Ch-5 BootstrapFramework _Practical

<div id="firstCollapse" class="accordion-collapse


collapse show" data-bs-parent="#basicAccordion">
<div class="accordion-body">
The <b>accordion</b> collapses elements vertically,
shown and hidden by class change.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
type="button" data-bs-toggle="collapse" data-bs-
target="#secondCollapse" aria-expanded="false" aria-
controls="secondCollapse">
Bootstrap - Buttons
</button>
</h2>
<div id="secondCollapse" class="accordion-collapse
collapse" data-bs-parent="#basicAccordion">
<div class="accordion-body">
You can use Bootstrap’s custom button styles for
actions in forms, dialogs and many more.
</div>
</div>
</div>
72
Ch-5 BootstrapFramework _Practical

</div>
</body>
</html>
Output

Card
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="card" style="width: 18rem;"> <!-- 4489-->
<img src="2.jpg" class="card-img-top" alt="..."> <!--
4593 -->
<div class="card-body"> <!-- 4523 -->
<h5 class="card-title">Card title</h5><!-- 4528 -->

73
Ch-5 BootstrapFramework _Practical

<p class="card-text">Some quick example text to build


on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>
</body>
</html>
Output

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

74
Ch-5 BootstrapFramework _Practical

</head>
<body>
<div class="container mt-3">
<h2>Cards with Contextual Classes</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
75
Ch-5 BootstrapFramework _Practical

<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
</body>
</html>
Output

76
Ch-5 BootstrapFramework _Practical

modal
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-
toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>

77
Ch-5 BootstrapFramework _Practical

<!-- Modal --><!-- fade 3474 -->


<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><!--
5468 -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">Modal title</h5><!-- Js File -->
<button type="button" class="btn-close" data-bs-
dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
hello its a modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>

78
Ch-5 BootstrapFramework _Practical

</body>
</html>
Output

<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>

</head>
<body>

<div class="container mt-3"><!-- 624,7292 -->


<h2>Modal Scroll Example</h2>
<p>Click on the button to open the modal.</p>

79
Ch-5 BootstrapFramework _Practical

<button type="button" class="btn btn-primary" data-bs-


toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-scrollable"><!--
5468 -->
<div class="modal-content"><!-- 5507 -->
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body"> <!-- 5556 -->
<h3>Some text to enable scrolling..</h3>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat

80
Ch-5 BootstrapFramework _Practical

nulla pariatur. Excepteur sint occaecat cupidatat non proident,


sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>

81
Ch-5 BootstrapFramework _Practical

</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Output

82

You might also like