Scribd
Upload
43 views43 pages

Bootstrap 5 Lessons Source Code

The document provides code examples for various Bootstrap 5 components including containers, grids, typography, images, tables, and more. Specifically, it includes code for container classes, grid rows and columns, text styling options, updating image classes, and table component classes. Each code example is contained within its own HTML document and includes headings, divs, and other elements to demonstrate the particular Bootstrap feature.

Uploaded by

kaviyakalai2938
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
43 views43 pages

Bootstrap 5 Lessons Source Code

The document provides code examples for various Bootstrap 5 components including containers, grids, typography, images, tables, and more. Specifically, it includes code for container classes, grid rows and columns, text styling options, updating image classes, and table component classes. Each code example is contained within its own HTML document and includes headings, divs, and other elements to demonstrate the particular Bootstrap feature.

Uploaded by

kaviyakalai2938
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/ 43

Bootstrap 5 Lessons Source Code

Bootstrap 5 Containers

Bootstrap 5 Grid Rows and Columns

Text and Typography

How to update Image Classes

Bootstrap 5 Table Classes

Bootstrap 5 Colors

Bootstrap 5 Alerts Components

Bootstrap 5 Accordion Components

Bootstrap 5 Buttons Components

Card Component Bootstrap 5

Bootstrap 5 Nav and NavBar Responsive

Bootstrap 5 Carousel

Bootstrap 5 Modal component

Bootstrap 5 Utilities

Bootstrap 5 Containers
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>
<body>
<div class="container box">
<h1>Hello, world 1</h1>
<div>Container 1</div>
</div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>
<div>Container 2</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

Bootstrap 5 Grid Rows and Columns


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>
<body>
<div style="height:50px"> </div>
<div class="container box">
<h1>Hello, world 1</h1>
<div class="row">
<div class="col box">One</div>
<div class="col box">Two</div>
<div class="col box">Three</div>
</div>
<div class="row">
<div class="col box">One</div>
<div class="col box">Two</div>
<div class="col box">Three</div>
<div class="col box">Four</div>
</div>
<div>Container 1</div>
<div class="row">
<div class="col-sm-2 box">One</div>
<div class="col-sm-4 box">Two</div>
<div class="col-sm-2 box">Three</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="col-sm-4 box">Four</div>
</div>
<div class="row">
<div class="col-xl-2 box">One</div>
<div class="col-xl-4 box">Two</div>
<div class="col-xl-2 box">Three</div>
<div class="col-xl-4 box">Four</div>
</div>
<div class="row">
<div class="col-sm-1 box">One</div>
<div class="col-sm-2 box">Two</div>
<div class="col-sm-3 box">Three</div>
<div class="col-sm-4 box">Four</div>
</div>
</div>
<div style="height:50px"> </div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>
<div class="row">
<div class="col box">One</div>
<div class="col box">Two</div>
<div class="col box">Three</div>
</div>
<div>Container 2</div>
<div class="row">
<div class="col-sm-2 box">One</div>
<div class="col-sm-4 box">Two</div>
<div class="col-sm-2 box">Three</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="col-sm-4 box">Four</div>
</div>
<div class="row">
<div class="col-xl-2 box">One</div>
<div class="col-xl-4 box">Two</div>
<div class="col-xl-2 box">Three</div>
<div class="col-xl-4 box">Four</div>
</div>
<div class="row">
<div class="col-sm-1 box">One</div>
<div class="col-sm-2 box">Two</div>
<div class="col-sm-3 box">Three</div>
<div class="col-sm-4 box">Four</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

Text and Typography


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>
<body>
<div style="height:50px"> </div>
<div class="container box">
<h1>Hello, world 1</h1>
<div class="h1">Hello World 1</div>
<h2>Hello, world 1</h2>
<div class="h2">Hello World 1</div>
<div class="display-1">Display 1</div>
<div class="display-2">Display 2</div>
<div class="display-3">Display 3</div>
<div class="display-4">Display 4</div>
<div class="display-5">Display 5</div>
<div class="display-6">Display 6</div>
<small>Small</small>
<mark>Mark</mark>
<code>Code</code>
<br>
<span class="small">Small</span>
<span class="mark">Mark</span>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<ul class="list-unstyled">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">One</li>
<li class="list-inline-item">Two</li>
<li class="list-inline-item">Three</li>
<li class="list-inline-item">Four</li>
</ul>

<dl class="row">
<dt class="col-sm-6">Title</dt>
<dd class="col-sm-2">Ele 1</dd>
<dd class="col-sm-2">Ele 2</dd>
<dd class="col-sm-2">Ele 3</dd>
<dt class="col-sm-6">Title</dt>
<dd class="col-sm-3">Ele 1</dd>
<dd class="col-sm-3">Ele 2</dd>
<dt class="col-sm-6">Title</dt>
<dd class="col-sm-6">Ele 1</dd>
</dl>
<dl>
<dt>Title</dt>
<dd>Ele 1</dd>
<dd>Ele 2</dd>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<dd>Ele 3</dd>
</dl>

<div>Container 1 Container 1Container 1 Container


1Container 1 Container 1Container 1 Container 1Container 1
Container 1Container 1 Container 1Container 1 Container
1Container 1 Container 1Container 1 Container 1Container 1
Container 1Container 1 Container 1Container 1 Container 1</div>

</div>
<div style="height:50px"> </div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>
<div>Container 2</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

How to update Image Classes

<!doctype html>
<html lang="en">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div style="height:50px"> </div>
<div class="container box">
<p class="h1">Container 1</p>
<div><img src="logo.png" class="rounded float-start "
style="width:100px" >Container 1 Container 1Container 1Container
1Container 1Container 1Container 1Container 1Container
1Container 1</div>
<div><img src="logo.png" class="rounded mx-auto d-block "
style="width:200px" >Container 1 Container 1Container 1Container
1Container 1Container 1Container 1Container 1Container
1Container 1</div>
<div><img src="logo.png" class="img-thumbnail img-fluid
rounded-circle" >Container 1 Container 1Container 1Container
1Container 1Container 1Container 1Container 1Container
1Container 1</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div><img src="logo.png" class="rounded float-end "
style="width:100px" >Container 1 Container 1Container 1Container
1Container 1Container 1Container 1Container 1Container
1Container 1</div>
<img src="logo.png" class="img-fluid">
</div>
<div style="height:50px"> </div>
<div class="container-fluid box">
<p class="h1">Container 2</p>
<div>Container 2</div>
<img src="logo.png" class="img-thumbnail">
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Table Classes


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>
<body>
<div class="container box">
<h1>Hello, world 1</h1>
<div>Container 1</div>
<table class="table table-hover table-dark
table-borderless">
<thead><tr>
<th>First</th>
<th>Last</th>
</tr></thead>
<tbody>
<tr>
<td>Laurence</td>
<td>Svekis</td>
</tr>
<tr>
<td>Larry</td>
<td>Svekis</td>
</tr>
<tr>
<td>John</td>
<td>Svekis</td>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</tr>
<tr>
<td>Laurence</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>
<div><table class="table table-striped table-bordered
table-primary">
<thead class="table-success"><tr>
<th>First</th>
<th>Last</th>
</tr></thead>
<tbody>
<tr >
<td>Laurence</td>
<td>Svekis</td>
</tr>
<tr>
<td>Larry</td>
<td>Svekis</td>
</tr>
<tr>
<td>John</td>
<td>Svekis</td>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</tr>
<tr>
<td>Laurence</td>
<td>Doe</td>
</tr>
</tbody>
</table></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

Bootstrap 5 Colors
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">
<h1>Hello, world 1</h1>
<div class="text-muted">Container muted</div>
<div class="text-primary">Container primary</div>
<div class="text-success">Container success</div>
<div class="text-info">Container Info</div>
<div class="text-warning">Container Warning</div>
<div class="text-danger">Container Danger</div>
<div class="text-secondary">Container secondary</div>
<div class="text-dark">Container Dark</div>
<div class="text-light">Container Light</div>
</div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>
<div class="bg-muted">Container muted</div>
<div class="bg-primary">Container primary</div>
<div class="bg-success">Container success</div>
<div class="bg-info">Container Info</div>
<div class="bg-warning">Container Warning</div>
<div class="bg-danger">Container Danger</div>
<div class="bg-secondary">Container secondary</div>
<div class="bg-dark text-light">Container Dark</div>
<div class="bg-light text-dark">Container Light</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Alerts Components

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="container box">
<h1>Hello, world 1</h1>
<div class="alert alert-success">Container Alert <a
class="alert-link" href="#">Link</a></div>
<div class="alert alert-primary">Container Alert <a
class="alert-link" href="#">Link</a></div>
<div class="alert alert-warning">Container Alert <a
class="alert-link" href="#">Link</a></div>
<div class="alert alert-danger">Container Alert <a
class="alert-link" href="#">Link</a></div>
<div class="alert alert-info">Container Alert</div>
<div class="alert alert-secondary">Container Alert</div>
</div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>
<div class="alert alert-success alert-dismissible">Container
Alert
<a class="alert-link" href="#">Link</a>
<button type="button" class="btn-close"
data-bs-dismiss="alert"></button>
</div>
<div class="alert alert-danger alert-dismissible">Container
Alert
<a class="alert-link" href="#">Link</a>
<button type="button" class="btn-close"
data-bs-dismiss="alert"></button>
</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="alert alert-info alert-dismissible fade
show">Container Alert
<a class="alert-link" href="#">Link</a>
<button type="button" class="btn-close"
data-bs-dismiss="alert"></button>
</div>
<div class="alert alert-primary alert-dismissible fade
show">Container Alert
<a class="alert-link" href="#">Link</a>
<button type="button" class="btn-close"
data-bs-dismiss="alert"></button>
</div>
<div></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Accordion Components


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">
<h1>Hello, world 1</h1>
<div class="accordion" id="acc1">
<div class="accordion-item">
<h2 class="accordion-header" id="head1">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#open1">
Open One
</button>
</h2>
<div id="open1" class="accordion-collapse collapse"
data-bs-parent="#acc1">
<div class="accordion-body">
This is where the content goes!!
</div>
</div>
</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="accordion-item">
<h2 class="accordion-header" id="head2">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#open2">
Open Two
</button>
</h2>
<div id="open2" class="accordion-collapse collapse "
data-bs-parent="#acc1">
<div class="accordion-body">
Hello World
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header" id="head3">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#open3">
Open Three
</button>
</h2>
<div id="open3" class="accordion-collapse collapse "
data-bs-parent="#acc1">
<div class="accordion-body">
Hello World #3
</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</div>
</div>

</div>
</div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>

<div></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Buttons Components


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">
<h1>Hello, world 1</h1>
<div class="btn btn-primary">Button</div>
<button type="button" class="btn btn-secondary">Button
1</button>
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-success">Button
1</button>
<div class="d-grid">
<div class="btn btn-danger btn-block">Button 1</div>
</div>
<button type="button" class="btn btn-warning">Button
1</button>
<button type="button" class="btn btn-dark">Button 1</button>
<button type="button" class="btn btn-link">Button 1</button>
</div>
</div>
<div class="container-fluid box">
<h1>Hello, world 2</h1>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div> <button type="button" class="btn btn-outline-secondary
active">Button 1</button>
<button type="button" class="btn btn-outline-info btn-lg
disabled">Button 1</button>
<button type="button" class="btn
btn-outline-success">Button 1</button>
<button type="button" class="btn btn-outline-danger
btn-sm">Button 1</button>
<button type="button" class="btn
btn-outline-warning">Button 1</button>
<button type="button" class="btn btn-outline-dark">Button
1</button>
<button type="button" class="btn btn-outline-link">Button
1</button>
</div>
<div class="btn btn-primary">
<div class="spinner-border"></div>
Loading...
</div>
<div class="btn btn-danger">
<div class="spinner-border spinner-border-sm"></div>
Loading...
</div>
<div class="btn btn-success">
<div class=" spinner-grow"></div>
Loading...
</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="btn-group-vertical">
<div class="btn btn-success">Click</div>
<div class="btn btn-danger">Click</div>
<div class="btn btn-primary">Click</div>
<div class="btn btn-info">Click</div>
</div>

<div class="btn-group btn-group-lg">


<div class="btn btn-success">Click</div>
<div class="btn btn-danger">Click</div>
<div class="btn btn-primary">Click</div>
<div class="btn-group">
<div class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown">
Open
</div>
<div class="dropdown-menu">
<div class="dropdown-item">Click 1</div>
<div class="dropdown-item">Click 2</div>
<div class="dropdown-item">Click 3</div>
</div>
</div>
</div>

</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</body>

</html>

Card Component Bootstrap 5


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">
<div class="row">
<div class="col">
<div class="card">
<img class="card-img-top" src="logo.png">
<div class="card-header bg-primary text-light">
Author

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</div>
<div class="card-body">
Laurence Svekis
</div>
<div class="card-footer">
Contact info
</div>
</div>
</div>
<div class="col">
<div class="card">
<img class="card-img-top" src="logo.png">
<div class="card-header bg-primary text-light">
Author
</div>
<div class="card-body">
Laurence Svekis
</div>
<div class="card-footer">
Contact info
</div>
</div>
</div>
<div class="col-md">
<div class="card">
<img class="card-img-top" src="logo.png">
<div class="card-img-overlay">
<p class="card-text">Laurence Svekis</p>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<button class="btn btn-primary">More</button>
</div>
<div class="card-header bg-primary text-light">
Author
</div>
<div class="card-body">
Laurence Svekis
</div>
<div class="card-footer">
Contact info
</div>
</div>
</div>
</div>
<h1>Hello, world 1</h1>

</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Nav and NavBar Responsive

<!doctype html>
<html lang="en">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">

<nav class="navbar navbar-expand-md bg-light navbar-light


justify-content-center">
<div class="container-fluid">
<div class="navbar-brand">
<img src="logo.png" width="50">
Bootstrap 5
</div>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


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

<h1>Hello, world 1</h1>


</div>
<nav class="navbar navbar-expand-md bg-light navbar-light
justify-content-center">
<ul class="navbar-nav">
<li class="nav-item">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


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

<ul class="nav justify-content-center bg-light">


<li class="nav-item"><a href="#"
class="nav-link">One</a></li>
<li class="nav-item"><a href="#"
class="nav-link">two</a></li>
<li class="nav-item"><a href="#"
class="nav-link">Three</a></li>
<li class="nav-item"><a href="#"
class="nav-link">Four</a></li>
</ul>

<ul class="nav nav-tabs bg-light">


<li class="nav-item"><a href="#"
class="nav-link">One</a></li>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<li class="nav-item"><a href="#" class="nav-link
active">two</a></li>
<li class="nav-item"><a href="#"
class="nav-link">Three</a></li>
<li class="nav-item"><a href="#"
class="nav-link">Four</a></li>
</ul>

<ul class="nav nav-pills bg-light nav-justified">


<li class="nav-item"><a href="#"
class="nav-link">One</a></li>
<li class="nav-item"><a href="#"
class="nav-link">two</a></li>
<li class="nav-item"><a href="#"
class="nav-link">Three</a></li>
<li class="nav-item"><a href="#" class="nav-link
active">Four</a></li>
</ul>

<ul class="nav nav-pills bg-light ">


<li class="nav-item"><a href="#"
class="nav-link">One</a></li>
<li class="nav-item dropdown">
<a href="#" data-bs-toggle="dropdown" class="nav-link
dropdown-toggle">Open</a>
<div class="dropdown-menu">
<div>
<a href="#" class="dropdown-item">1</a>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</div>
<div>
<a href="#" class="dropdown-item">2</a>
</div>
<div>
<a href="#" class="dropdown-item">3</a>
</div>
</div>
</li>
<li class="nav-item"><a href="#"
class="nav-link">Three</a></li>
<li class="nav-item"><a href="#" class="nav-link
">Four</a></li>
</ul>

<ul class="nav nav-tabs bg-light ">


<li class="nav-item"><a href="#" class="nav-link
active">One</a></li>
<li class="nav-item dropdown">
<a href="#" data-bs-toggle="dropdown" class="nav-link
dropdown-toggle">Open</a>
<div class="dropdown-menu">
<div>
<a href="#" class="dropdown-item">1</a>
</div>
<div>
<a href="#" class="dropdown-item">2</a>
</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div>
<a href="#" class="dropdown-item">3</a>
</div>
</div>
</li>
<li class="nav-item"><a href="#"
class="nav-link">Three</a></li>
<li class="nav-item"><a href="#" class="nav-link
">Four</a></li>
</ul>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


Bootstrap 5 Carousel

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<body>
<div class="container box">
<div class="display-1 ">Bootstrap 5</div>
<div class="carousel slide" data-bs-ride="carousel"
id="car1">
<div class="carousel-indicators">
<button type="button" data-bs-target="#car1"
class="active" data-bs-slide-to="0"></button>
<button type="button" data-bs-target="#car1"
data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#car1"
data-bs-slide-to="2"></button>
</div>

<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://via.placeholder.com/500x300?text=First"
class="d-block img-fluid">
</div>
<div class="carousel-item ">
<img src="https://via.placeholder.com/500"
class="d-block img-fluid" height="300">
</div>
<div class="carousel-item ">
<img src="logo.png" class="d-block img-fluid"
height="300">
</div>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


</div>

<button class="carousel-control-prev" type="button"


data-bs-target="#car1" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>

<button class="carousel-control-next" type="button"


data-bs-target="#car1" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>

</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


Bootstrap 5 Modal component

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">
<div class="display-1 ">Bootstrap 5</div>
<div class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#mod1">Open Mod1</div>
<div class="btn btn-success" data-bs-toggle="modal"
data-bs-target="#mod2">Open Mod2</div>
</div>

<div class="modal fade" id="mod1">


<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Heading</h2>
<button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<p>Laurence Svekis</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success"
>Save</button>
<button type="button" class="btn btn-primary"
>Edit</button>
<button type="button" class="btn btn-danger"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="mod2">


<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Heading</h2>
<button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Laurence Svekis</p>
</div>
<div class="modal-footer">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


Bootstrap 5 Utilities

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/boot
strap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<title>Bootstrap 5</title>
</head>

<body>
<div class="container box">
<div class="display-1 ">Bootstrap 5</div>
<div class="border border-1 border-primary
text-decoration-underline">Element 1</div>
<div class="border border-2 border-danger fw-bold">Element
2</div>
<div class="border border-3 border-warning fst-italic
lh-lg">Element 3</div>
<div class="border border-4 border-info">Element 4</div>
<div class="border-start">Element 5</div>
</div>

<div class="container box text-center" style="height:600px">

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/


<div class="display-1 ">Bootstrap 5</div>
<div class="border rounded bg-primary m-5
text-uppercase">Element 1</div>
<div class="border rounded-circle bg-danger w-25 h-25
text-lowercase">Element 2</div>
<div class="border rounded-pill w-50 bg-warning h-25 mx-auto
text-capitalize fs-1">laurence svekis hello World</div>
<div class="border border-4 border-info p-4
shadow-lg">Element 4</div>
<div class="border-start pt-4 fs-2">Element 5</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Laurence Svekis Courses Source Code for Bootstrap 5 https://basescripts.com/

You might also like