UNIT3newpptx 2023 10 13 10 47 03

Department of
Computer Engineering
Unit-3 BOOTSTRAP
Web Technology-
01CE0306
Prof. Kajal Tanchak

 Media Object,
 Grid Layouts,
 Typography,
 Buttons,
 Input Elements,
 Jumbotron,
 Cards and Navigation,
 Breadcrumb,
Outlines  List Groups,
 Progress Bars,
 Tool Tips,
 Pagination,
 Modals,
 Collapse,
 Accordion,
 Carousel.
2
CO2: Develop responsive webpages using Bootstrap.
CO Mapping (Create)
3
 Bootstrap is a free front-end framework for faster and easier web
development
 Bootstrap includes HTML and CSS-based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels, and many others, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive
Introduction designs.
to Bootstrap  Twitter Bootstrap is the most popular front-end framework in the

recent time.
 It provides a collection of CSS and JavaScript components, such as
grids, forms, buttons, navigation bars, and more, which can be easily
implemented and customized to create responsive and visually
appealing web interfaces.
 With Bootstrap, developers can save time and effort by utilizing pre-
designed components.
4
 Responsive web design is about creating websites that
automatically adjust themselves to look good on all devices,
from small phones to large desktops.
 Why Use Bootstrap?
 Easy to use: Anybody with just basic knowledge of HTML and
What is CSS can start using Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to
Responsive phones, tablets, and desktops
Web Design?  Mobile-first approach: In Bootstrap, mobile-first styles are
part of the core framework
 Browser compatibility: Bootstrap 5 is compatible with all
modern browsers (Chrome, Firefox, Edge, Safari, and Opera)
Note that if you need support for IE11 and down, you must
use either BS4 or BS3.
5
 There are two ways to start using Bootstrap 5 on your
own website.
 You can:
 Include Bootstrap 5 from a CDN
 Download Bootstrap 5 from getbootstrap.com
Where to Get  Using CDN:
Bootstrap 5?  CDN, Content Delivery Network, is a network of servers
that speeds up the loading of webpages for data-heavy
applications.
 jsDelivr provides CDN support for Bootstrap's CSS and
JavaScript
6
 
<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.
1/dist/css/bootstrap.min.css rel="stylesheet">


CDN file <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.
3.1/dist/js/bootstrap.bundle.min.js"></script>
7
 If you want to download and host Bootstrap 5 yourself, go to
https://getbootstrap.com/, and follow the instructions there.
1. Add the HTML5 doctype
Always include the HTML5 doctype at the beginning of the page,
along with the lang attribute and the correct title and character
set:
Downloading <!DOCTYPE html>
a Bootstrap <html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 is mobile-first
To ensure proper rendering and touch zooming, add the following
<meta> tag inside the <head> element: 8
 <meta name="viewport" content="width=device-width,
initial-scale=1">
 The width=device-width part sets the width of the page
to follow the screen-width of the device (which will vary
depending on the device).
 The initial-scale=1 part sets the initial zoom level when
the page is first loaded by the browser.
9
 Breakpoints are customizable widths that determine how
your responsive layout behaves across device or
viewport sizes in Bootstrap.
Breakpoint Class infix Dimensions Dimensions Range
X-Small None <576px 0px-575px
Breakpoints Small sm ≥576px 576px-767px
Medium md ≥768px 768px-991px
Large lg ≥992px 992px-1199px
Extra large xl ≥1200px 1200px-1399px
Extra extra large xxl ≥1400px 1400px - large
10
 Containers are a fundamental building block of Bootstrap that
contain, pad, and align your content within a given device or
viewport.
 How they work?
 Containers are the most basic layout element in Bootstrap and are
required when using our default grid system. Containers are used to
Containers contain, pad, and (sometimes) center the content within them. While
containers can be nested, most layouts do not require a nested
container.
 Bootstrap comes with three different containers:
 .container, which sets a max-width at each responsive breakpoint
 .container-fluid, which is width: 100% at all breakpoints
 .container-{breakpoint}, which is width: 100% until the specified
breakpoint
11
12
 Our default .container class is a responsive, fixed-width
container, meaning its max-width changes at each
breakpoint.
<div class="container">
Default 
container </div>
13
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js
"></script>
<style>
div{
border:1px solid red;
}
</style>
</head>
<body>
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div> 14
.Container
Output
Actual Screen O/P
After resizing the window
15
 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,
Responsive and xxl.
containers  <div class="container-sm">100% wide until small
breakpoint</div>
 <div class="container-md">100% wide until
medium breakpoint</div>
 <div class="container-lg">100% wide until large
breakpoint</div>
16
 <div class="container-xl">100% wide until extra large
breakpoint</div>
 <div class="container-xxl">100% wide until extra extra
large breakpoint</div>
17
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-sm border">.container-sm</div>

<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
</body>
</html>
18
 Use .container-fluid for a full width container, spanning
the entire width of the viewport.
<div class="container-fluid">
...
Fluid </div>
containers
19
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css“
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css ">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js "></script>
<style>
div{
border:1px solid red;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
20
.container-
fluid Output Actual Screen O/P
After resizing the window
21
 Bootstrap's grid system 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.
Bootstrap  Bootstrap's grid system is responsive, and the columns
Grid System will re-arrange automatically depending on the screen
size.
22
NOTE: To create the layout you want, create a container
(<div class="container">).
Next, create a row (<div class="row">). Then, add the
desired number of columns (tags with appropriate .col-*-
* classes). Numbers in .col-*-* should always add up to 12
for each row
23
 Bootstrap’s grid system uses a series of containers, rows, and columns to
layout and align content. It’s built with flexbox and is fully responsive.
Below is an example and an in-depth explanation for how the grid
system comes together.
<div class="row">
<div class="col">
Grid system Column

</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
24
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css ">
<style>
.yellow{
background-color:yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container yellow">
<div class="row">
<div class="col">col1</div>
</div>
</div>
</body> 25
</html>
<!DOCTYPE html>
<html lang="en">
<head>
Grid <link rel="stylesheet" type="text/css"

href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.
Example-1 min.css
">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min
.js
"></script>
</head>
26
<body>
<div class="container" style="border: 1px solid red;">
<div class="row" style="border: 1px solid lightblue;">
<div class="col-3" style="border: 1px solid lightgreen;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis expedita quas
officia, illum necessitatibus aut repudiandae quae maiores magni?</p>
</div>
Grid <div class="col-9" style="border: 1px solid lightgreen;">

Example-1 officia, illum necessitatibus aut repudiandae quae maiores magni?</p>
</div>
Continue… <div class="col-6" style="border: 1px solid lightgreen;">
officia, illum necessitatibus aut repudiandae quae maiores magni?</p>
</div>
</div>
27
<div class="col-8" style="border: 1px solid lightgreen;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. In nobis expedita quas officia, illum necessitatibus aut
Grid repudiandae quae maiores magni?</p>
</div>
Example-1
</div>
Continue…
28
<div class="col-1">1</div>
Continue… <div class="col-1">9</div>
</div>
</div>
</body>
</html>
29
Ex-1 Output
30
<!DOCTYPE html>
<html lang="en">
<head>
Grid Layout <link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.m
Example-2 in.css
">
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.
js
"></script>
</head>
31
<body>
<div class="row">
<div class="col-12" id="header">
<h1>Website Name</h1>
</div>
</div>
Grid Layout <div class="row">
<div class="col-12" id="menu">
Example-2 <ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Get Quotes</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
32
<div class="row">
<div class="col-8" id="content">
<h2>Sub Heading</h2>
<p>
Lorem ipsum dolor, sit amet
</p>
Grid Layout </div>

<div class="col-4" id="sidebar">
Example-2 <ul>
</ul>
</div>
</div>
33
<div class="row">
<div class="col-8" id="content">
<p>
Lorem ipsum dolor, sit amet
</p>
Grid Layout </div>

<div class="col-4" id="sidebar">
Example-2 <ul>
</ul>
</div>
</div>
34
<div class="row">
<div class="col-12" id="footer">
&copy All rights reserved by Website Name
</div>
Grid Layout </div>
Example-2 </div>
</body>
</html>
35
Style.css
.container{ border: 5px solid #000; } #menu{

background: pink;
.row{ border: 3px solid red; } padding: 3px 0;
}
.col{ border: 3px solid green; } #menu ul{
list-style: none;
/* .container{ border: 0px solid #000; } margin: 0;
.row{ border: 0px solid red; } }
#menu ul li{
.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8 display: inline-block;
,.col-9,.col-10,.col-11,.col-12{ }
border: 0px solid green; #content{
} background: white;
body{ }
background: grey; #sidebar{
} background: lightblue;
}
#header{ #footer{
background: orange; background: orange;
padding: 10px 0 10px 10px; } */
} 36
Grid Layout
Example-2
Output
37
Grid Layout Option:
XXL
Large Extra Large
Extra small (<576px) Small (>=576px) Medium (>=768px) (>=1400px
(>=992px) (>=1200px)
)
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Collapsed
Collapsed to
to start,
Collapsed to start, Collapsed to start, start, Collapsed to start,
horizontal
Grid behaviour Horizontal at all times horizontal above horizontal above horizontal horizontal above
above
breakpoints breakpoints above breakpoints
breakpoint
breakpoints
s
Container width None (auto) 540px 720px 960px 1140px 1320px
Laptops
Laptops and
Suitable for Portrait phones Landscape phones Tablets Laptops and
Desktops
Desktops
# of columns 12 12 12 12 12 12
1.5rem
1.5rem (.75rem on 1.5rem (.75rem on 1.5rem (.75rem 1.5rem (.75rem on (.75rem on
1.5rem (.75rem on each
Gutter width each side of a each side of a on each side of each side of a each side
side of a column)
column) column) a column) column) of a
column)
Nestable Yes Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes Yes
Column
Yes Yes Yes Yes Yes Yes 38
ordering
 The Bootstrap 5 grid system has five classes:
 .col- (extra small devices - screen width less than 576px)

 .col-sm- (small devices - screen width equal to or greater than
576px)
GridLayout  .col-md- (medium devices - screen width equal to or greater
Option 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)
39
Just change the
class name
<div class="row">
<div class="col-md-8" id="content">

<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam dolorem minima
sint consectetur! Fugiat natus quis, dignissimos te </p>
Grid Layout </div>
<div class="col-md-4" id="sidebar">
Responsive <ul>
Layout EX-3 <li><a href="#">About us</a></li>
</ul>
</div>
</div>
40
Grid Layout
Responsive
Layout EX-3
41
Grid Layout
Responsive
Layout EX-3
42
 Bootstrap 5 Columns Reordering Offset classes are
used to give some offset to the column. The offset class
sets the left margin of the column they are applied to the
total width of the offset columns.
 Bootstrap 5 Columns Reordering Offset Classes:
Offset  offset-*: This class is used to give offset to the column
position.
 offset-**-*: This class is used to define offset to the
column for various screen sizes.
 Note: * can range from 1-11 position and ** replace the
screen size like “sm”, “md”, “lg”, “xl”, “xxl”.
43
 <div class="row">
 <div class="col-3 offset-6">...</div>
 </div>
 style.css
Syntax  .container{ border: 5px solid #000; }
 .row{ border: 3px solid red; }
 .pink{ background: pink; }
 .orange{ background: orange; }
 .blue{ background: #0000ff; }
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href="css/style.css">
<title>Bootstrap Offset</title>
</head>
<body>

<div class="row">
<div class="col-5 pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec. Aliquam erat volutpat.</div>
<div class="col-md-4 offset-lg-1 offset-md-3 pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec. Aliquam
erat volutpat.</div>
<div class="col-md-3 blue offset-md-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec. Aliquam erat
volutpat.</div>
</div>
</div>
</body>
</html>
45
46
Bootstrap 5 Spacing Margin and padding is used to create space around the
element and inside the border of an element. Bootstrap5 provides useful classes
to do so we do not have to use CSS explicitly.
 Notations: These are used to choose what styling is to be applied, where the
Bootstrap styling is to be applied and the size of the formatting. Basic notation is
Margin and [property][sides]-[size], and for sm, md, lg, xl, and xxl size screens
Padding breakpoints are mentioned before the size to make the webpage responsive.
The notation is [property][sides]-[breakpoint]-[size]. Here property can
be margin or padding
 Horizontal Centering: In horizontal centering .mx auto is used for
horizontally centering the element by setting the margins to auto on the
horizontal side.
47
 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
48
 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
49
Property Notation Breakpoint Sizes
Margin .m-* .m-sm-* .m-sm-1
Margin-top .mt-* .mt-sm-* .mt-sm-2
Margin-bottom .mb-* .mb-sm-* .mb-sm-1
Margin-left .ms-* .ms-sm-* .ms-sm-2
Margin-right .me-* .me-sm-* .me-sm-3
Breakpoints:
sm,md,lg,xl,xxl
Sizes:
0 to 5, auto for margin
Property Notation Breakpoint Sizes
Padding .p-* . p-sm-* . p-sm-1
Padding-top . pt-* . pt-sm-* . pt-sm-2
Padding . pb-* . pb-sm-* . pb-sm-1
-bottom
Padding . ps-* . ps-sm-* . ps-sm-2
-left
Padding . pe-* . pe-sm-* . pe-sm-3
-right 50
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet“ href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<script src= https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js> </script>
<style>
.container{ border: 5px solid #000; }
.row{ border: 3px solid red; }
.green{ background: yellowgreen; }
.orange{ background: orange; }
</style>
</head>
<body>
<div class="container mt-3">
<div class="col-sm-3 mr-lg-5 mb-md-4 ml-md-4 orange">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil iusto aspernatur eius, eaque perspiciatis
laborum, ear voluptatem recusandae ab quidem.
</div>
<div class="col-sm-4 mt-md-4 green">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, sunt!
</div> 51
52
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<script src= https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js></script>
<style>
.row{ border: 3px solid red; }
.green{ background: yellowgreen; }
.orange{ background: orange; }
</style>
</head>
<body>
<div class="row">
<div class="col-md-2 green pt-5">
This article is about bootstrap padding and margin classes to give you guys detailed knowledge about how to give
margin and padding in bootstrap 5 using classes.
</div>
53
<div class="col-md-2 orange ps-5">
</div>
<div class="col-md-2 green pe-5">
</div>
<div class="col-md-2 orange pb-5">
</div>
<div class="col-md-2 green p-5">
</div>
</div>
</div>
</div>
</body>
</html>
54
55
 Bootstrap provides an easy way to align media objects
(like images or videos) to the left or to the right of some
content.
 This can be used to display blog comments and tweets.
Media Objects
 NOTE: MEDIA OBJECT IS DEPRECATED FROM
BOOTSTRAP 4
56
<!DOCTYPE html>
<html lang="en">
<head>
Media Object <meta name="viewport" content="width=device-width, initial-
scale=1">
Example <link rel="stylesheet"
Ex-1 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo
otstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot
strap.min.js"></script>
</head>
57
<body>
<h2>Media Object</h2>
<p>Use the "media-left" class to left-align a media object. Text that
should appear next to the image, is placed inside a container with
Continue… class="media-body".</p>
<p>Tip: Use the "media-right" class to right-align the media
object.</p>
<br>
58

<div class="media">
<div class="media-left">
<img src="cat.jpg" class="media-object" style="width:60px">
</div>
<div class="media-body">
Continue.. <h4 class="media-heading">Left-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
</div>
</div>
<hr>
59

<div class="media">
<h4 class="media-heading">Right-aligned</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Continue… <div class="media-right">
<img src="dog.jpg" class="media-object" style="width:60px">
</div>
</div>
</div>
</body>
</html>
60
Media Object
Output
61
By default Image will be aligned at TOP, media-top class to
be used
 To align it in the middle, media-middle class to be used
 To align it in the bottom, media-bottom class to be used
Media Object
Ex-2
62
<!DOCTYPE html>
<html lang="en">
<head>
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
">
Ex-2 <link rel="stylesheet" type="text/css" href="style.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js
"></script>
</head>
<body>
63
<h2>Media Object</h2>
<p>
Use the "media-left" class to left-align a media object. Text that
should appear next to the image, is placed inside a container with
class="media-body".
Continue… </p>
<p>Tip: Use the "media-right" class to right-align the media
object.
</p>
<br>
64

<div class="media">
<div class="media-left">
<img src="cat.jpg" class="media-object" style="width:60px">
</div>
Continue.. <h4 class="media-heading">Left-aligned</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Totam, nihil porro recusandae laboriosam repudiandae
</div>
</div>
<hr>
65

<div class="media">
<div class="media-left media-middle">
<img src="dog.jpg" class="media-object" style="width:60px">
</div>
Continue.. <h4 class="media-heading">Right-aligned</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Facilis assumenda sequi, nisi exercitationem, ex temporibus earum
<p>
</div>
</div>
<hr>
66

<div class="media">
<div class="media-left media-bottom">
<img src="eagle.jpg" class="media-object" style="width:60px">
</div>
<h4 class="media-heading">Right-aligned</h4>
Continue.. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorem deserunt delectus facilis non ea ullam fuga praesentium
tempora <p>
</div>
</div>
</div>
</body>
</html>
67
Output
68
 Bootstrap 5 Default Settings
 Bootstrap 5 uses a default font-size of 1rem (16px by
default), and its line-height is 1.5.
 In addition, all <p> elements have margin-top: 0 and

Typography margin-bottom: 1rem (16px by default).
 <h1> - <h6> Headings:
 Bootstrap 5 styles HTML headings (<h1> to <h6>) with a
bolder font-weight and a responsive font-size.
69
70
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window
to see the effect.</p>
<h1>h1 Bootstrap heading</h1>
</div>
</body>
</html> 71
 You can also use .h1 to .h6 classes on other elements to
make them behave as headings if you want:
 <p class="h1">h1 Bootstrap heading</p>
72
 Display headings are used to stand out more than normal
headings (larger font-size and lighter font-weight), and
there are six classes to choose from: .display-1 to
.display-6:
Display
Headings
73
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Display Headings</h1>
<h1 class="display-1">Display 1</h1>
</div></body>
</html>
74
 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
 <p><del>This line of text is meant to be treated as deleted text.</del></p>
 <p><s>This line of text is meant to be treated as no longer
accurate.</s></p>
 <p><ins>This line of text is meant to be treated as an addition to the
Inline text 
document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
elements  <p><small>This line of text is meant to be treated as fine
print.</small></p>
 <p><strong>This line rendered as bold text.</strong></p>
 <p><em>This line rendered as italicized text.</em></p>
75
output
76
 Beware that those tags should be used for semantic purpose:
 <mark> represents text which is marked or highlighted for
reference or notation purposes.
 <small> represents side-comments and small print, like copyright
and legal text.
 <s> represents element that are no longer relevant or no longer
accurate.
 <u> represents a span of inline text which should be rendered in a
way that indicates that it has a non-textual annotation.
 If you want to style your text, you should use the following
classes instead:
 .mark will apply the same styles as <mark>.
 .small will apply the same styles as <small>.
 .text-decoration-underline will apply the same styles as <u>.
 .text-decoration-line-through will apply the same styles as <s>.
77
 <abbr>
 Bootstrap 5 will style the HTML <abbr> element with a
dotted border bottom and a cursor with question mark
on hover.
Abbreviations  Add .initialism to an abbreviation for a slightly smaller
font-size.
 <p><abbr title="attribute">attr</abbr></p>
 <p><abbr title="HyperText Markup Language"
class="initialism">HTML</abbr></p>
78
 For quoting blocks of content from another source within
your document. Wrap <blockquote class="blockquote">
around any HTML as the quote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote
Blockquotes element.</p>
</blockquote>
79
 The HTML spec requires that blockquote attribution be placed
outside the <blockquote>.
 When providing attribution, wrap your <blockquote> in a <figure>
and use a <figcaption> or a block level element (e.g., <p>) with the
.blockquote-footer class.
Naming a  Be sure to wrap the name of the source work in <cite> as well.
<figure>
source <blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
80
 Use text utilities as needed to change the alignment of
your blockquote.
<figure class="text-center">
Alignment element.</p>
</blockquote>
Someone famous in <cite title="Source Title">Source
Title</cite>
</figcaption>
</figure>
81
<figure class="text-end">
element.</p>
</blockquote>
Someone famous in <cite title="Source Title">Source
Title</cite>
</figcaption>
</figure>
82
 Unstyled
 Remove the default list-style and left margin on list items
(immediate children only). This only applies to
immediate children list items, meaning you will need to
add the class for any nested lists as well.
Lists  Inline
 Remove a list’s bullets and apply some light margin with
a combination of two classes, .list-inline and .list-inline-
item.
83
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul class="list-unstyled">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</div>
</body> 84
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul class="list-inline">
<li class="list-inline-item" >tea</li>
<li class="list-inline-item">coffee</li>
<li class="list-inline-item">milk</li>
</ul>
</div>
</body>
</html>
85
 Bootstrap 5 provides different styles of buttons.
 The button classes can be used on <a>, <button>, or <input>

elements:
 <a href="#" class="btn btn-success">Link Button</a>
Buttons  <button type="button" class="btn btn-success">Button</button>
 <input type="button" class="btn btn-success" value="Input Button">
 <input type="submit" class="btn btn-success" value="Submit
Button">
 <input type="reset" class="btn btn-success" value="Reset Button">
86
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div></body></html>
87
 Bootstrap 5 also provides eight outline/bordered buttons.
 Move the mouse over them to see an additional "hover" effect.
 <button type="button" class="btn btn-outline-primary">Primary</button>

 <button type="button" class="btn btn-outline-
secondary">Secondary</button>
 <button type="button" class="btn btn-outline-success">Success</button>
Button Outline 

<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
 <button type="button" class="btn btn-outline-danger">Danger</button>
 <button type="button" class="btn btn-outline-dark">Dark</button>
 <button type="button" class="btn btn-outline-light text-
dark">Light</button>
88
 Use the .btn-lg class for large buttons or .btn-sm class for
small buttons.
 <button type="button" class="btn btn-primary btn-
lg">Large</button>
 <button type="button" class="btn btn-
Button Sizes primary">Default</button>
 <button type="button" class="btn btn-primary btn-
sm">Small</button>
89
 Create responsive stacks of full-width, “block buttons” like those in
Bootstrap 4 with a mix of our display and gap utilities.
 To create a block level button that spans the entire width of the
parent element, use the .d-grid "helper" class on the parent element.
 If you have many block-level buttons, you can control the space
Block Level between them with the .gap-* class.
 <div class="d-grid gap-5">
Buttons  <button type="button" class="btn btn-primary btn-block">Full-
Width Button</button>
 <button type="button" class="btn btn-primary btn-block">Full-
 <button type="button" class="btn btn-primary btn-block">Full-
 </div>
90
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Block Level Buttons</h2>
<p>To create a block level button that spans the entire width of the parent element, use the .d-grid "helper" class
on the parent element:</p>
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
</div>
</body></html>
91
92
 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

Active/Disabled disabled attribute makes a button unclickable. Note that
Buttons <a> elements do not support the disabled attribute and
must therefore use the .disabled class to make it visually
appear disabled
93
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div></body></html>
94
 Bootstrap’s form controls expand on our Rebooted form styles
with classes. Use these classes to opt into their customized
displays for a more consistent rendering across browsers and
devices.
 Bootstrap supports the following form controls:
Bootstrap 5 

BS 5 forms
BS 5 select menus
Input  BS 5 radio and checkboxes
 BS 5 Range
Elements  BS 5 Input Groups
 BS 5 Floating Labels
 BS 5 Form Validation
 We can create a form using multiple way using BS.
 Stack Based Forms
 Inline Based Forms (using row/col i.e with grid system)
95
 All textual <input> and <textarea> elements with class
.form-control get proper form styling
 we add a .form-label class to each label element to ensure
correct padding.
 Checkboxes have different markup. They are wrapped
Stacked Form around a container element with .form-check, and labels
have a class of .form-check-label, while checkboxes and
radio buttons use .form-check-input.
96
Stacked Form
97
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
Stacked Form <input type="password" class="form-control" id="pwd" placeholder="Enter

password" name="pswd">
</div>
<div class="form-check mb-3">
<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>
98
 If you want your form elements to appear side by side, use .row and .col
Form
Row/Grid  <form>
(Inline  <div class="row">
Forms) 

<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
 </div>
 <div class="col">
 <input type="password" class="form-control" placeholder="Enter password"
name="pswd">
 </div>
 </div>
 </form>
99
 <label for="comment">Comments:</label>
 <textarea class="form-control" rows="5" id="comment"
name="text"></textarea>
Textarea
100
 <input type="text" class="form-control"
placeholder="Normal input">
 <input type="text" class="form-control"
placeholder="Disabled input" disabled>
Disabled and  <input type="text" class="form-control"
Readonly placeholder="Readonly input" readonly>
101
 Use the .form-control-plaintext class to style an input
field without borders, but keep proper marigins and
padding.
Plain text
Inputs  <input type="text" class="form-control-plaintext"
placeholder="Plaintext input">
102
 Select menus are used if you want to allow the user to
pick from multiple options.
 To style a select menu in Bootstrap 5, add the .form-select
class to the <select> element.
 <select class=“form-select”>
Select Menu  <option>1</option>
 <option>2</option>
 </select>
103
 Multiple: to select multiple menu (hold ctrl or shift (or
drag with the mouse) to select more than one) use
attribute Multiple.
 <select multiple class=“form-select”>
Select Menu  <option>2</option>
 </select>
104
105
 Checkboxes are used if you want the user to select any number of options
from a list of preset options.
<div class="form-check">
Checkboxes <input class="form-check-input" type="checkbox" id="check1"
name="option1" value="something" checked>
<label class="form-check-label">Option 1</label>
</div>
<input type="checkbox" class="form-check-input" id="check2"
name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
106
 To style checkboxes, use a wrapper element with
class="form-check" to ensure proper margins for labels
and checkboxes.
 Then, add the .form-check-label class to label elements,

and .form-check-input to style checkboxes properly
inside the .form-check container.
 Use the checked attribute if you want the checkbox to

be checked by default.
107
 Radio buttons are used if you want to limit the user to just one
selection from a list of preset options.
<input type="radio" class="form-check-input" id="radio1"
name="optradio" value="option1" checked>
Radio buttons <label

1</label>
class="form-check-label" for="radio1">Option
</div>
<input type="radio" class="form-check-input" id="radio2"
name="optradio" value="option2">
<label class="form-check-label" for="radio2"> Option
2</label>
</div>
108
 To style a range menu, add the .form-range class to the input
element with type="range”.
 <label for="customRange" class="form-label">Custom

range</label>
 <input type="range" class="form-range“>
Range
 Min and Max
 By default, the minimum value is 0 and maximum value is 100.
You can use the min and/or max attribute change it.
 <input type="range" class="form-range" min="0"
max="4">
109
File input
110
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file“>
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input
example</label>
<input class="form-control" type="file" multiple>
</div>
<div class="mb-3">
File input <label for="formFileDisabled" class="form-label">Disabled file input
example</label>
<input class="form-control" type="file" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input
example</label>
<input class="form-control form-control-sm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" type="file"> 111
 Set the type="color" and add .form-control-color to the
<input>. We use the modifier class to set fixed heights
and override some inconsistencies between browsers.
 <label for="exampleColorInput" class="form-

Color label">Color picker</label>
 <input type="color" class="form-control form-control-
color" value="#563d7c" title="Choose your color">
112
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css“
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.
min.css">
Form Example
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/boots
trap.min.js"></script>
</head>
<body>
<form action="#" method="POST">
<div class="col-6 mb-3">
<label for="name" class="form-label">Enter Your
Name:</label>
<input type="text" name="unm" class="form-control">
</div>
<label for="email" class="form-label">Enter Your
Email:</label>
<input type="email" name="eml" class="form-control">
113
<label for="Password" class="form-label">Enter Your Passwordme:</label>
<input type="password" name="pass" class="form-control">
<small class="form-text">password must be between 8 to 12 characters long</small>
</div>
<label for="select" class="form-label">Select your city:</label>
<select class="form-select">
Form Example <option value="rajkot">Rajkot</option>
<option value="rajkot">Rajkot</option>
<option value="rajkot">Rajkot</option>
</select>
</div>
<label for="hobbies" class="form-label">Select your Hobbies:</label>
<input class="form-check-input" type="checkbox" name="chk1" value="Reading">
<label class="form-check-label">Reading</label>
</div>
114
<input class="form-check-input" type="checkbox" name="chk1" value="Reading">
<label class="form-check-label">Cooking</label>
</div>
<input class="form-check-input" type="checkbox" name="chk1" value="Reading" checked>
<label class="form-check-label">Travelling</label>
</div>
</div>
Form Example <label for="gender" class="form-label">Select your Gender:</label>

<input type="radio" class="form-check- input" name="gen" value="Male"
checked>
<label class="form-check-label" for="radio1">Male</label>
</div>
<input type="radio" class="form-check-input" name="gen"
value="option2">
<label class="form-check-label“
for="radio2">Female</label>
</div>
</div>
115
<label for="addres" class="form-label">Enter Your
Address:</label>
<textarea class="form-control"></textarea>
</div>
<label for="exampleColorInput" class="form-
Form Example label">Color picker</label>
<input type="color" class="form-control form-control-
color" value="#563d7c" title="Choose your color">
</div>
<label for="formFile" class="form-label">Default file
input example</label>
<input class="form-control" type="file“>
</div>
116
<label for="ranhe" class="form-label">Enter Your
Range:</label>
<input type="range" name="eml" class="form-
range" min="0" max="100">
</div>
Form Example <div class="d-grid mb-3">
<button type="button" class="btn btn-primary
btn-block col-6">Primary</button>
</div>
</form>
</div>
</body>
</html>
117
118
 A jumbotron was introduced in Bootstrap 3 as a big
padded box for calling extra attention to some special
content or information.
 Jumbotrons are no longer supported in Bootstrap 5.

Jumbotron However, you can use a <div> element and add special
helper classes together with a color class to achieve the
same effect
119
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>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..</p>
</div>
</div>
</body>
</html>
120
 Bootstrap’s cards provide a flexible and extensible
content container with multiple variants and options.
 A card is a flexible and extensible content container. It
includes options for headers and footers, a wide variety
of content, contextual background colors, and powerful
Cards display options.
121
 Basic Card:
 A basic card is created with the .card class, and content
inside the card has a .card-body class.
<div class="card">
<div class="card-body">Basic card</div>
</div>
Header and Footer

The .card-header class adds a heading to the card and the
.card-footer class adds a footer to the card
122
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
123
 Use .card-title to add card titles to any heading element.
 The .card-text class is used to remove bottom margins for a <p>
element if it is the last child (or the only one) inside .card-body.
 The .card-link class adds a blue color to any link, and a hover
effect.
Titles, text, <div class="card">
and links <div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example
text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
124
 Add .card-img-top or .card-img-bottom to an <img> to
place the image at the top or at the bottom inside the
Card Images card.
 Note that we have added the image outside of the .card-
body to span the entire width.
 Card Image Overlays
 Turn an image into a card background and use .card-
img-overlay to add text on top of the image
125
<!DOCTYPE html>
<html lang="en">
<head>
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="card mb-3 border-success">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle text-muted">Subtitle </h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur a
dipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
126
<a href="" class="card-link">Read more</a>
<a href="" class="card-link">Another Link</a>
</div>
</div>
<div class="card">
<div class="card-header">Header Goes Here</div>
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Voluptate distinctio totam quis voluptatibus
</div>
<div class="card-footer text-muted">Footer Goes Here</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<img src="img.png" class="card-img-top" alt="">
<div class="card-img">
<h4 class="card-title">Image Top</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur 127
<button class="btn btn-primary">Read More</button>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<h4 class="card-title">Image Bottom</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
<button class="btn btn-primary">Read More</button>
</div>
<img src="img.png" class="card-img-bottom" alt="">
</div>
</div>
<div class="card" style="width:500px">
<img class="card-img-top" src="img.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Image overlay</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a> 128
</div>
</div>
</div>
</div>
</body>
</html>
129
 If you want to create a simple horizontal menu, add the .nav class to a <ul> element,
followed by .nav-item for each <li> and add the .nav-link class to their links.
<ul class="nav">
<li class="nav-item">
<a href="" class="nav-link active">Home</a>
</li>
<a href="" class="nav-link">About Us</a>
Navigation(Na </li>
vs) <li class="nav-item">
<a href="" class="nav-link">Gallery</a>
</li>
<a href="" class="nav-link">Blog</a>
</li>
<a href="" class="nav-link disabled">Contact Us</a>
</li>
</ul> 130
 Add the .justify-content-center class to center the nav,
and the .justify-content-end class to right-align the nav.
 
 <ul class="nav justify-content-center">
Aligned Nav
& Vertical  
Nav  <ul class="nav justify-content-end“>
 Vertical Nav:
 Add the .flex-column class to create a vertical nav:

 <ul class="nav flex-column">
131
132
Navigation CSS
<style>
.nav{ background: darkcyan; }
.nav-link{ color:#fff;}
.nav-link:hover,
.nav-link.active{
color:#fff;
background:sandybrown;
}
</style>
133
 Turn the nav menu into navigation tabs with the .nav-tabs class. Add the
.active class to the active/current link. If you want the tabs to be togglable,
see the last example on this page.
<ul class="nav nav-tabs">
<a class="nav-link active" href="#">Active</a>
</li>
Tabs <a class="nav-link" href="#">Link</a>
</li>
<a class="nav-link" href="#">Link</a>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
134
 Turn the nav menu into navigation pills with the .nav-pills
class. If you want the pills to be togglable, see the last example
on this page.
 <ul class="nav nav-pills">
Pills  Justified Tabs/pills

 Justify the tabs/pills with the .nav-justified class (equal width)
 <ul class="nav nav-pills nav-justified">..</ul>

<ul class="nav nav-tabs nav-justified">..</ul>
135
 if the order of your items is important, or roll your own
with a <nav> element. Because the .nav uses display:
flex, the nav links behave the same as nav items would,
but without the extra markup.
<nav class="nav">
Navbar with <a href="" class="nav-link">Home</a>
nav tag <a href="" class="nav-link active">About Us</a>
<a href="" class="nav-link">Gallery</a>
</nav>
136
 A navigation bar is a navigation header that is placed at the top of the
page.
 Basic Navbar
 With Bootstrap, a navigation bar can extend or collapse, depending on

the screen size.
Navigation
 A standard navigation bar is created with the .navbar class, followed by
Bar a responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm (stacks
the navbar vertically on xxlarge, extra large, large, medium or small
screens).
 To add links inside the navbar, use either an <ul> element (or a <div>)
with class="navbar-nav". Then add <li> elements with a .nav-item class
followed by an <a> element with a .nav-link class
137
 .navbar-brand for your company, product, or project name.
 .navbar-nav for a full-height and lightweight navigation
(including support for dropdowns).
 .navbar-toggler for use with our collapse plugin and other
navigation toggling behaviors.
Supported  Flex and spacing utilities for any form controls and actions.
content  .navbar-text for adding vertically centered strings of text.
 .collapse.navbar-collapse for grouping and hiding navbar
contents by a parent breakpoint.
 Add an optional .navbar-scroll to set a max-height and scroll
expanded navbar content.
138
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mb-5">
<div class="row py-3">
<div class="col">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<a href="#" class="navbar-brand">Bootstrap</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs
target="#mydiv">
<span class="navbar-toggler-icon"></span>
</button>
139
<div class="collapse navbar-collapse" id="mydiv">
<ul class="navbar-nav me-auto">
<a href="" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown
toggle" role="button"data-bs-toggle="dropdown">About Us</a>
<div class="dropdown-menu">
<a href="" class="dropdown-item">Link One</a>
<a href="" class="dropdown-item">Link Two</a>
<a href="" class="dropdown-item">Link Three</a>
</div>
</li>
<a href="" class="nav-link">Gallary</a>
</li>
</li>
</ul>
140
<form class="d-flex" action="">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
141
 Indicate the current page’s location within a navigational hierarchy
that automatically adds separators via CSS.
 Use an ordered or unordered list with linked list items to create a
minimally styled breadcrumb. Use our utilities to add additional
styles as desired.
 <nav>
 <ol class="breadcrumb">
Breadcrumb 

<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
 </nav>
 <nav >
 <ol class="breadcrumb">
 <li class="breadcrumb-item"><a href="#">Home</a></li>
 <li class="breadcrumb-item active" >Library</li>
 </ol>
 </nav>
142
<nav>
<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 active">Data</li>
</ol>
</nav>
143
 Dividers are automatically added in CSS through ::before
and content. They can be changed by modifying a local
CSS custom property --bs-breadcrumb-divider, or
through the $breadcrumb-divider Sass variable — and
$breadcrumb-divider-flipped for its RTL counterpart
Dividers  <nav style="--bs-breadcrumb-divider: '>';“>
144
<!DOCTYPE html>
<html lang="en">
<head>
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="col">
<nav >
<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 active">Data</li>
</ol> 145
</nav>
</div>
</div>
</div>
</body>
</html>
<nav style="--bs-breadcrumb-divider: '>';">
146
 List groups are a flexible and powerful component for
displaying a series of content. Modify and extend them to
support just about any content within.
 Basic List Groups
 The most basic list group is an unordered list with list items
 To create a basic list group, use an <ul> element with class
List Groups .list-group, and <li> elements with class .list-group-item.
 <ul class="list-group">
 <li class="list-group-item">First item</li>
 <li class="list-group-item">Second item</li>
 <li class="list-group-item">Third item</li>
 </ul>
147
 Use the .active class to highlight the current item.
 <ul class="list-group">
 <li class="list-group-item active">Active item</li>
Active State  <li class="list-group-item">Second item</li>
 </ul>
148
 To create a list group with linked items, use <div> instead
of <ul> and <a> instead of <li>. Optionally, add the .list-
group-item-action class if you want a grey background
color on hover.
List Group
 <div class="list-group">
With Linked <a href="#" class="list-group-item list-group-item-
Items action">First item</a>
<a href="#" class="list-group-item list-group-item-
action">Second item</a>
<a href="#" class="list-group-item list-group-item-
action">Third item</a>
</div>
149
 The .disabled class adds a lighter text color to the
disabled item. And when used on links, it will remove the
hover effect.
<div class="list-group">
Disabled <a href="#" class="list-group-item
Item disabled">Disabled item</a>
<a href="#" class="list-group-item
disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
150
 Use the .list-group-flush class to remove some borders
and rounded corners.
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
Flush /
<li class="list-group-item">Second item</li>
Remove <li class="list-group-item">Third item</li>
Borders <li class="list-group-item">Fourth item</li>
</ul>
151
 Use the .list-group-numbered class to create list items
with numbers in front of them
 <ol class="list-group list-group-numbered">
 <li class="list-group-item">First item</li>
Numbered  <li class="list-group-item">Second item</li>
List Groups  <li class="list-group-item">Third item</li>
 </ol>
152
 If you want the list items to display horizontally instead
of vertically (side by side instead of on top of each other),
add the .list-group-horizontal class to .list-group.
 <ul class="list-group list-group-horizontal">
Horizontal  <li class="list-group-item">First item</li>
List Groups  <li class="list-group-item">Second item</li>
 <li class="list-group-item">Fourth item</li>
 </ul>
153
 Basic Progress Bar
 A progress bar can be used to show how far a user is in a
process.
 To create a default progress bar, add a .progress class to
a container element and add the .progress-bar class to
Progress Bars its child element. Use the CSS width property to set the
width of the progress bar.
 <div class="progress">
 <div class="progress-bar" style="width:70%"></div>
 </div>
154
 The height of the progress bar is 1rem (usually 16px) by
default. Use the CSS height property to change it.
 <div class="progress" style="height:20px">
 <div class="progress-bar" style="width:40%;"></div>
Progress Bar  </div>
Height and
Labels  Progress Bar Labels
 Add text inside the progress bar to show the visible
percentage.
 <div class="progress-bar" style="width:70%">70%</div>
 </div>
155
 By default, the progress bar is blue (primary). Use any of the
contextual background classes to change its color.
 <div class="progress-bar bg-success" style="width:20%"></div>
 </div>
Colored
 
Progress  <div class="progress">
Bars  <div class="progress-bar bg-info" style="width:30%"></div>
 </div>
 

 <div class="progress-bar bg-warning" style="width:40%"></div>
 </div>
156
 Use the .progress-bar-striped class to add stripes to the
progress bars.
 <div class="progress-bar progress-bar-striped"
Striped style="width:40%"></div>
Progress  </div>
Bars
 Animated Progress Bar
 Add the .progress-bar-animated class to animate the
progress bar.
 <div class="progress-bar progress-bar-striped progress-
bar-animated" style="width:40%"></div>
157
 Progress bars can also be stacked.
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
Multiple </div>
Progress <div class="progress-bar bg-warning" style="width:10%">
Bars Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
158
 The Tooltip component is small pop-up box that appears when
the user moves the mouse pointer over an element.
 How To Create a Tooltip
 To create a tooltip, add the data-bs-toggle="tooltip" attribute
to an element.
 Use the title attribute to specify the text that should be
Tool Tips displayed inside the tooltip.
 <button type="button" class="btn btn-primary" data-bs-

toggle="tooltip" title="Hooray!">Hover over me!</button>
 Note: Tooltips must be initialized with JavaScript to work.
159
 By default, the tooltip will appear on top of the element.
 Use the data-bs-placement attribute to set the position

of the tooltip on top, bottom, left or the right side of the
element.
Positioning <a href="#" data-bs-toggle="tooltip" data-bs-placement="top"
Tooltips title="Hooray!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Hooray!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left"
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right"
160
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<h3>Tooltip Example</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">

Hover over me!
</button>
</div>
161
<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
</html>
162
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="E:\college work\MU\2023-24\3 rd sem
WT\material\bootstrap\bootstrap-5.1.3-dist\bootstrap-5.1.3-dist\css\bootstrap.css">
<script src="E:\college work\MU\2023-24\3 rd sem WT\material\bootstrap\bootstrap-5.1.3-
dist\bootstrap-5.1.3-dist\js\bootstrap.bundle.js"></script>
<script src="E:\college work\MU\2023-24\3 rd sem
WT\material\bootstrap\jquery.js"></script>
</head>
<script>
$(function()
{
$('[data-bs-toggle="tooltip"]').tooltip();
});
$(function()
{
$('#example').tooltip();
});
163
</script>
<body>
<input type="submit" class="btn btn-primary" data-bs-placement="bottom"
title="Tooltip goes here" data-bs-toggle="tooltip">
</div>
</div>
</div>
<input type="submit" class="btn btn-primary" data-bs-placement="bottom"
title="Tooltip goes here" data-bs-toggle="tooltip">
<input type="submit" class="btn btn-primary" data-bs-placement="top" title="Tooltip
goes here" id="example">
</div>
</div>
</div>
</body>
</html>
164
165
 Basic Pagination
 If you have a web site with lots of pages, you may wish to add
some sort of pagination to each page.
 To create a basic pagination, add the .pagination class to an

<ul> element. Then add the .page-item to each <li> element
and a .page-link class to each link inside <li>.
Pagination
<ul class="pagination">
<li class="page-item"><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="#">Next</a></li>
</ul>
166
 The .active class is used to "highlight" the current page.
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
Active State <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
167
 The .disabled class is used for un-clickable links.
<li class="page-item disabled"><a class="page-link"
href="#">Previous</a></li>
Disabled <li class="page-item"><a class="page-link" href="#">2</a></li>
State <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
168
 Pagination blocks can also be sized to a larger or a
smaller size.
 Add class .pagination-lg for larger blocks or
.pagination-sm for smaller blocks.
 <ul class="pagination pagination-lg"></ul>
Pagination  <ul class="pagination pagination-sm"></ul>
Sizing
169
 Use utility classes to change the alignment of the pagination.
 <ul class="pagination" style="margin:20px 0">
 <li class="page-item">...</li>
 </ul>
 

Pagination  <ul class="pagination justify-content-center" style="margin:20px
Alignment 0">
 </ul>
 

 <ul class="pagination justify-content-end" style="margin:20px 0">
 </ul>
170
171
 The Modal component is a dialog box/popup window that is
displayed on top of the current page.
 Add animation
 Use the .fade class to add a fading effect when opening and closing
the modal.
 
Modals  <div class="modal fade"></div>
 Modal Size
 Change the size of the modal by adding the .modal-sm class for small
modals (max-width 300px), .modal-lg class for large modals (max-
width 800px), or .modal-xl for extra large modals (max-width
1140px). Default is 500px max-width.
 Add the size class to the <div> element with class .modal-dialog
172
 <div class="modal-dialog modal-sm">
 <div class="modal-dialog modal-lg">
 <div class="modal-dialog modal-xl">
 Fullscreen Modals
 If you want the modal to span the whole width and height
of the page, use the .modal-fullscreen class.
 <div class="modal-dialog modal-fullscreen">
173
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">

Open modal
</button>
</div>

<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
174

<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>


<div class="modal-body">
Modal body..
</div>


<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
175
 Basic Collapsible
 Collapsibles are useful when you want to hide and show large amount of
content.
<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Collapse  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
176
177
 The following example shows a simple accordion by
extending the card component.
 Note: Use the data-bs-parent attribute to make sure that

all collapsible elements under the specified parent will be
Accordion closed when one of the collapsible item is shown.
178
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
179
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
</div>
</div>
<div class="card">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
consequat.
</div>
</div>
</div>
180
<div class="card">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
181
<!DOCTYPE html>
<html lang="en">
<head>
href="E:\college work\MU\2023-24\3 rd sem WT\material\bootstrap\bootstrap-5.1.3-
dist\bootstrap-5.1.3-dist\css\bootstrap.css">
<script
src="E:\college work\MU\2023-24\3 rd sem WT\material\bootstrap\bootstrap-5.1.3-
dist\bootstrap-5.1.3-dist\js\bootstrap.bundle.js"></script>
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
182
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-
parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown
by default, until the collapse
plugin adds the appropriate classes that we use to style each element.
These classes control the
overall appearance, as well as the showing and hiding via CSS
transitions. You can modify any of
this with custom CSS or overriding our default variables. It's also
worth noting that just about any
HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
</div>
</div>
</div>
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-
toggle="collapse" data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
183
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-
<strong>This is the second item's accordion body.</strong> It is hidden
by default, until the
collapse plugin adds the appropriate classes that we use to style each
element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can
modify any of this with custom CSS or overriding our default variables.
It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit
overflow.
</div>
</div>
</div>
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-
toggle="collapse" data-bs-target="#collapseThree">
Accordion Item #3
</button>
184
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-
<strong>This is the third item's accordion body.</strong> It is hidden
by default, until the
collapse plugin adds the appropriate classes that we use to style each
element. These classes
control the overall appearance, as well as the showing and hiding via
CSS transitions. You can
modify any of this with custom CSS or overriding our default variables.
It's also worth noting that
just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit
overflow.
</div>
</div>
</div>
</div>
</body>
</html>
185
186
Carousel
187
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>


<div id="demo" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>

<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
188
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
</div>
</div>


<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</body>
</html>
189
190

UNIT3newpptx 2023 10 13 10 47 03

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

UNIT3newpptx 2023 10 13 10 47 03

Uploaded by

Copyright:

Available Formats

Department of

Prof. Kajal Tanchak

to Bootstrap  Twitter Bootstrap is the most popular front-end framework in the

After resizing the window

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

After resizing the window

Grid system Column

Grid <link rel="stylesheet" type="text/css"

Grid <div class="col-9" style="border: 1px solid lightgreen;">

Grid Layout </div>

Grid Layout </div>

.container{ border: 5px solid #000; } #menu{

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

<div class="col-md-8" id="content">

 .row{ border: 3px solid red; }

 .pink{ background: pink; }

 .orange{ background: orange; }

 .blue{ background: #0000ff; }

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

 In addition, all <p> elements have margin-top: 0 and

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

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

 The class .active makes a button appear pressed, and the

Stacked Form <input type="password" class="form-control" id="pwd" placeholder="Enter

 Then, add the .form-check-label class to label elements,

 Use the checked attribute if you want the checkbox to

Radio buttons <label

 <label for="customRange" class="form-label">Custom

 <label for="exampleColorInput" class="form-

Form Example <label for="gender" class="form-label">Select your Gender:</label>

 Jumbotrons are no longer supported in Bootstrap 5.

Header and Footer

 Add the .flex-column class to create a vertical nav:

.nav{ background: darkcyan; }

Pills  Justified Tabs/pills

 <ul class="nav nav-pills nav-justified">..</ul>

 With Bootstrap, a navigation bar can extend or collapse, depending on

<nav style="--bs-breadcrumb-divider: '>';">



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

 Note: Tooltips must be initialized with JavaScript to work.

 Use the data-bs-placement attribute to set the position

<div class="container mt-3">

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">

 To create a basic pagination, add the .pagination class to an





<div class="container mt-3">

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">

 Note: Use the data-bs-parent attribute to make sure that

<div class="container mt-3">

You might also like