Scribd
Upload
52 views58 pages

Chapter 7 - FSD I

This document provides information about the differences between Bootstrap 5 and earlier versions of Bootstrap. Some key points: - Bootstrap 5 is the newest version, released in 2021, with new components, faster stylesheets, and improved responsiveness compared to Bootstrap 3 and 4. - Bootstrap 5 no longer supports Internet Explorer 11 or below and uses vanilla JavaScript instead of jQuery. - Other differences include updated grid system, removal of jumbotron component, and forms that do not change appearance across browsers and operating systems.

Uploaded by

Devang Kanjaria
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
52 views58 pages

Chapter 7 - FSD I

This document provides information about the differences between Bootstrap 5 and earlier versions of Bootstrap. Some key points: - Bootstrap 5 is the newest version, released in 2021, with new components, faster stylesheets, and improved responsiveness compared to Bootstrap 3 and 4. - Bootstrap 5 no longer supports Internet Explorer 11 or below and uses vanilla JavaScript instead of jQuery. - Other differences include updated grid system, removal of jumbotron component, and forms that do not change appearance across browsers and operating systems.

Uploaded by

Devang Kanjaria
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/ 58

Full Stack Development Using Javascript-1

Unit-7 Bootstrap-5

Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new
components, faster stylesheet and more responsiveness.

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

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

Bootstrap 4 VS Bootstrap 5

BASIS OF BOOTSTRAP 4 BOOTSTRAP 5

Grid It has 5 tier (xs, sm, md, lg, It has 6 tier (xs, sm, md, lg, xl, xxl).
System xl).

It has jquery and all related Jquery is removed and switched to


Jquery plugins. vanilla JS with some working
plugins

Internet Bootstrap 4 supports both IE Bootstrap 5 doesn’t support IE 10


Explorer 10 and 11. and 11.

Radio buttons, checkboxes The look of form elements will not


have different look in different change, on different OS or browser.
Form OS and browsers. The form The forms can be customized and
elements uses whatever default browsers form controls can be added, they
provide. would not depend on browser.

Jumbotron It supports. It doesn’t support jumbotron.


7.1 Navs: Nav Menu, Tabs
Simple Navigation
Classes
.nav - Specified to take navigation as outer body. Generally, to set in <ul> tag.
.nav-item – Placed in <li> tag to denote navigation.
.nav-link – Placed in <a> tag and denotes link.

Example
<html>
<head>
<title>Bootstrap 5 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h3>simple navigation</h3>
<div class="container mt-5">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</body>
</html>

Output

Disabled Link

Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h3>Disabled link</h3>
<div class="container mt-5">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">CONTACT</a>
</li>
</ul>
</div>
</body>
</html>

Output

Alignment of Nav
- justify-content-center
- justify-content-end
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h3>Center aligned</h3>
<div class="container mt-5">
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</body>
</html>
Output

Vertical Navigation
Class .flex-column used in <ul> tag
Note: Alignment will not work.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h3>vertical navigation</h3>
<div class="container mt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT US</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT US</a>
</li>
</ul>
</div>
</body>
</html>
Output

Tabs
Class = “nav-tabs”
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script
>
</head>
<body>
<div class="container mt-5">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</body>
</html>
Output

Pills
Class = “nav-pills”. Link with active class will be shown in blue background
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script
>
</head>
<body>
<div class="container mt-5">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</body>
</html>
Output

Dynamic/Togglable tabs
Classes
.tab-content – used in second <div> tag for contents to be open
.nav-tabs – used in <ul> tag
Attribute
Data-bs-toggle = “tab” used as attribute of <a> tag
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-5">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#demo" class="nav-link active" data-bs-
toggle="tab">HOME</a>
</li>
<li class="nav-item">
<a href="#demo2" class="nav-link" data-bs-
toggle="tab">ABOUT</a>
</li>
<li class="nav-item">
<a href="#demo3" class="nav-link" data-bs-
toggle="tab">CONTACT</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="demo" class="container tab-pane active">
<h3>HOME</h3>
<p>This is home page</p>
</div>
<div id="demo2" class="container tab-pane fade">
<h3>ABOUT</h3>
<p>This is about us page</p>
</div>
<div id="demo3" class="container tab-pane fade">
<h3>CONTACT</h3>
<p>This is contact us page</p>
</div>
</div>
</body>
</html>
Output
Dynamic/Togglable pills
Classes
.tab-content – used in second <div> tag for contents to be open
.nav-pills – used in <ul> tag
Attribute
data-bs-toggle = “pill” used as attribute of <a> tag
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#dem" class="nav-link active" data-bs-
toggle="pill">HOME</a>
</li>
<li class="nav-item">
<a href="#dem2" class="nav-link" data-bs-
toggle="pill">ABOUT</a>
</li>
<li class="nav-item">
<a href="#dem3" class="nav-link" data-bs-
toggle="pill">CONTACT</a>
</li>
</ul>
</div>
<div class="tab-content">
<div id="dem" class="container tab-pane active">
<h3>HOME</h3>
<p>This is home page</p>
</div>
<div id="dem2" class="container tab-pane fade">
<h3>ABOUT</h3>
<p>This is about us page</p>
</div>
<div id="dem3" class="container tab-pane fade">
<h3>CONTACT</h3>
<p>This is contact us page</p>
</div>
</div>
</body>
</html>
Output

Dropdown
Classes
.dropdown – used in <li> tag
.dropdown-toggle – used in <a> tag to set items in dropdown
.dropdown-menu
.dropdown-item
Attribute
Data-bs-toggle = “dropdown” used as attribute of <a> tag
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-5">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-
toggle="dropdown">CONTACT</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-
item">Address</a></li>
<li><a href="#" class="dropdown-item">Phone
number</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Output
Navbar
Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
Classes
.navbar - A standard navigation bar is created with this class
.navbar-expand - responsive collapsing classes xxl, xl, lg, md, sm
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
NOTE: To add white text color to all links in navbar use “.navbar-dark” class. To add
black color use “.navbar-light” class.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</nav>

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


<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
Output

Vertical Navbar
Remove the .navbar-expand-* class to create a navigation bar that will always be vertical.
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</nav>

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


<h3>Vertical Navbar Example</h3>
</div>
</body>
</html>
Output

Colored Navbar
Use any of the .bg-color classes to change the background color of the navbar (.bg-
primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-
light)
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT US</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-3">
</div>
</body>
</html>
Output
Brand/Logo
The .navbar-brand class is used to highlight the brand/logo/project name of your page
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="navbar-brand"><img src="f.jfif"
style="width:40px" class="rounded-pill"></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Output

Collapsible Navbar
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>collapsible bar</h3>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<button class="navbar-toggler" data-bs-toggle="collapse" data-
bs-target="#link">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="link">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Output
Dropdown
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-
toggle="dropdown">CONTACT</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Address</a></li>
<li><a href="#" class="dropdown-item">Phone number</a></li>
</ul>
</ul>
</div>
</nav>
</div>
</body>
</html>
Output
Carousel
The Carousel is a slideshow for cycling through elements

Class Description

.carousel Creates a carousel

.carousel-indicators Adds indicators for the carousel. These are the little
dots at the bottom of each slide (which indicates how
many slides there are in the carousel, and which slide
the user are currently viewing)

.carousel-inner Adds slides to the carousel

.carousel-item Specifies the content of each slide

.carousel-control-prev Adds a left (previous) button to the carousel, which


allows the user to go back between the slides

.carousel-control-next Adds a right (next) button to the carousel, which


allows the user to go forward between the slides

.carousel-control-prev- Used together with .carousel-control-prev to create a


icon "previous" button

.carousel-control-next- Used together with .carousel-control-next to create a


icon "next" button

.slide Adds a CSS transition and animation effect when


sliding from one item to the next. Remove this class
if you do not want this effect
Example
<html>
<head>
<title>Bootstrap 5 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>Carousel Slideshow</h3>
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button data-bs-target="#demo" data-bs-slide-to="0" class="active bg-
warning"></button>
<button data-bs-target="#demo" data-bs-slide-to="1" class="bg-
warning"></button>
<button data-bs-target="#demo" data-bs-slide-to="2" class="bg-
warning"></button>
</div>

<div class="carousel-inner">
<div class="carousel-item active">
<img src="1.jpg" style="width:100%; height:300px">
</div>
<div class="carousel-item">
<img src="2.jpg" style="width:100%; height:300px">
</div>
<div class="carousel-item">
<img src="3.jpg" style="width:100%; height:300px">
</div>
</div>
<button class="carousel-control-prev bg-success" data-bs-target="#demo"
data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next bg-success" data-bs-target="#demo"
data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</body>
</html>

Output
Add Caption
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Carousel -->


<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<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>

<!-- The slideshow/carousel -->


<div class="carousel-inner">
<div class="carousel-item active">
<img src="ahm.jfif" alt="AHMEDABAD" class="d-block" style="width:100%;
height:50%">
<div class="carousel-caption">
<h3>AHMEDABAD</h3>
<p>We had such a great time at historical places</p>
</div>
</div>
<div class="carousel-item">
<img src="gn.jfif" alt="Gandhinagar" class="d-block" style="width:100%; height:50%">
<div class="carousel-caption">
<h3>Gandhinagar</h3>
<p>AKSHARDHAM TEMPLE</p>
</div>
</div>
</div>

<!-- Left and right controls/icons -->


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

Output
Modal
The Modal component is a dialog box/popup window that is displayed on top of the current
page.
Components of modal – Header, Body, Footer
Classes
.modal
.modal-dialog
.modal-content
.modal- header
.modal-body
.modal-footer
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#ex">CLICK HERE
</button>
<div class="modal" id="ex">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">MODAL TITLE</h5>
<button class="close" data-bs-
dismiss="modal">&times;</button>
</div>
<div class="modal-body">
LJ UNIVERSITY
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Add animation
Use the .fade class to add a fading effect when opening and closing the modal
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ex">
CLICK HERE</button>
<div class="modal fade" id="ex">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">MODAL TITLE</h5>
<button class="close" data-bs-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
LJ UNIVERSITY
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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. There is no class for xxl.
Add the size class to the <div> element with class .modal-dialog
If you want the modal to span the whole width and height of the page, use the .modal-
fullscreen class
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Small Modal Example</h3>
<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 modal-sm">
<div class="modal-content">
<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>
Output
Scrollspy
Scrollspy is used to automatically update links in a navigation list based on scroll position.
Add data-bs-spy="scroll" to the element that should be used as the scrollable area (often this is
the <body> element).
Then add the data-bs-target attribute with a value of the id or the class name of the navigation
bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's list items (<div
id="section1"> matches <a href="#section1">).
.fixed-top – Given in <nav> tag to freeze the navbar at top
Example
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styl
esheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</head>
<body data-bs-spy="scroll">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white"
style="padding:200px">
<h1>You are in section-1</h1>
<p>Enjoy scrolling</p>
<pre>
a
b
c
d
e
f
g
h
a
b
c
d
e
f
g
h
</pre>
</div>
<div id="section2" class="container-fluid bg-warning text-white"
style="padding:200px">
<h1>You are in section-2</h1>
<p>Enjoy scrolling</p>
<pre>
a
b
c
d
e
f
g
h
a
b
c
d
e
f
g
h
</pre>
</div>
<div id="section3" class="container-fluid bg-info text-white" style="padding:200px">
<h1>You are in section-3</h1>
<p>Enjoy scrolling</p>
<pre>
a
b
c
d
e
f
g
h
a
b
c
d
e
f
g
h
</pre>
</div>
</body>
</html>
Output
Flex: Horiizontal, Vertical, Justified
The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses
flexbox, instead of floats, to handle the layout.
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure
without using float or positioning
d-flex - To create a flexbox container and to transform direct children into flex items
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Flex</h3>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-danger">
ITEM-3
</div>
</div>
</div>
</body>
</html>
d-inline-flex - To create an inline flexbox container
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Inline Flex</h3>
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-danger">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-row - to display the flex items horizontally (side by side). This is default.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Flex row</h3>
<div class="d-flex flex-row p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-danger">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-row - reverse to right-align the horizontal direction
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Revrese Flex row</h3>
<div class="d-flex flex-row-reverse p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-danger">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-column - to display the flex items vertically (on top of each other)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Flex column</h3>
<div class="d-flex flex-column p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-danger">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-column-reverse - to reverse the vertical direction
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Flex column</h3>
<div class="d-flex flex-column-reverse p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-danger">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-fill – Use on flex items to force them into equal widths
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Flex fill</h3>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 flex-fill bg-info">
ITEM-1
</div>
<div class="p-2 flex-fill bg-info">
ITEM-2
</div>
<div class="p-2 flex-fill bg-info">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-grow-1 - Useon a flex item to take up the rest of the space. In the example below, the first
two flex items take up their necessary space, while the last item takes up the rest of the available
space
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>grow</h3>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
</div>
<div class="p-2 bg-warning flex-grow-1">
ITEM-2
</div>
<div class="p-2 bg-success">
ITEM-3
</div>
</div>
</div>
</body>
</html>
Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-
wrap or .flex-wrap-reverse.
.flex-nowrap
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-3">
<h3>no wrap</h3>
<div class="d-flex flex-nowrap p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
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.
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-success">
ITEM-3
</div>
</div></div></body>
</html>
.flex-wrap
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>wrap</h3>
<div class="d-flex flex-wrap p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
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.

</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-success">
ITEM-3
</div>
</div>
</div>
</body>
</html>
.flex-wrap-reverse
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-3">
<h3>wrap reverse</h3>
<div class="d-flex flex-wrap-reverse p-3 bg-secondary text-white">
<div class="p-2 bg-info">
ITEM-1
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.
</div>
<div class="p-2 bg-warning">
ITEM-2
</div>
<div class="p-2 bg-success">
ITEM-3
</div>
</div>
</div>
</body>
</html>
7.2 Forms
Stacked form: All controls will be in next line
Some classes related to bootstrap 5 form
.form-control- Used in textfield, password field.
.form-check- Used in outer <div> tag
.form-check-label- Label for checkbox.
.form-check-input- This works in checkbox control
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Stacked form</h2>
<form action="">
<div class="mt-3">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div class="mt-3">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd">
</div>
<div class="form-check mt-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>
</div>
</body>
</html>
Output

Dropdown(Select Menu)
Classes: .form-group, .form-select
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form action="">
<div class="form-group">
<label>Select Country
<select class="form-select">
<optgroup label="Asia">
<option>India</option>
<option>China</option>
</optgroup>
</select>
</label>
</div>
</form>
</div>
</body>
</html>
Output
Textarea
Note: By default textarea renders full width, so there is no significance of giving cols attribute
in <textarea> tag.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Textarea</h2>
<form action="">
<div class="mt-3">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>
Output
Inline Forms
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Inline Form</h2>
<form>
<div class="row">
<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>
</div>
</body>
</html>

Output
Radio button
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Radio Button</h2>
<form>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio"
value="option1" checked>
<label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio"
value="option2">
<label class="form-check-label" for="radio2">Option 2</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
</form></div>
</body>
</html>
Output
Checkbox
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1"
value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2"
value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Option 3</label>
</div>
</form>
</div>
</body>
</html>
Output
Toggle Switch
If you want your checkbox to be styled as a toggle switch, use the .form-switch class together
with the .form-check container
Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" checked>
<label class="form-check-label" for="mySwitch">ON/OFF</label>
</div>
</form>
</div>
</body>
</html>
Output
Form Validation
You can use different validation classes to provide valuable feedback to users.
Add either .was-validated or .needs-validation to the <form> element, depending on whether
you want to provide validation feedback before or after submitting the form.
The input fields will have a green (valid) or red (invalid) border to indicate what's missing in
the form.
You can also add a .valid-feedback or .invalid-feedback message to tell the user explicitly
what's missing, or needs to be done before submitting the form

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form class="was-validated">
<div class="mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username"
name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mt-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="myCheck" name="remember"
required>
<label class="form-check-label" for="myCheck">I agree on terms and conditions</label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>

Example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container mt-3">
<h3>Needs-validated</h3>
<form action="post" class="needs-validated">
<div class="mt-3">
<label>Email
<input type="email" class="form-control"
placeholder="[email protected]" required/>
</label>
</div>
<div class="mt-3">
<label>Password
<input type="password" class="form-control" placeholder="Enter
Password" required/>
</label>
</div>
<div class="mt-3">
<label>
<input type="submit" class="btn btn-secondary" value="Click Me"/>
</label>
</div>
</form>
</div>
</body>
</html>
Output
On clicking button
7.3 Grid system: Classes, Stacked and Horizontal, Small, Medium and Large
Grid
Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to
create wider columns
The Bootstrap 5 grid system has six classes:
• .col- (extra small devices - screen width less than 576px)
• .col-sm- (small devices - screen width equal to or greater than 576px)
• .col-md- (medium devices - screen width equal to or greater than 768px)
• .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
• .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

You might also like