Scribd
Upload
104 views

Bootstrap 5 Lessons Source Code

The document contains code snippets from Bootstrap 5 lessons on containers, grids, text formatting, images, tables, and colors. The snippets demonstrate various Bootstrap components like containers, rows, columns, typography elements, image classes, table styles, and color utilities.

Uploaded by

Kelly Hounga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
104 views

Bootstrap 5 Lessons Source Code

The document contains code snippets from Bootstrap 5 lessons on containers, grids, text formatting, images, tables, and colors. The snippets demonstrate various Bootstrap components like containers, rows, columns, typography elements, image classes, table styles, and color utilities.

Uploaded by

Kelly Hounga
Copyright
© © All Rights Reserved
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
<!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/[email protected]/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>

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


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/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>

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


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

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


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

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


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

Text and Typography


<!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/[email protected]/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>

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


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

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

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


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

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


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

How to update Image Classes

<!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/[email protected]/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>

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


<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>
<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/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>

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


</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">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/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>

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


<tr>
<td>Laurence</td>
<td>Svekis</td>
</tr>
<tr>
<td>Larry</td>
<td>Svekis</td>
</tr>
<tr>
<td>John</td>
<td>Svekis</td>
</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>

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


<tr >
<td>Laurence</td>
<td>Svekis</td>
</tr>
<tr>
<td>Larry</td>
<td>Svekis</td>
</tr>
<tr>
<td>John</td>
<td>Svekis</td>
</tr>
<tr>
<td>Laurence</td>
<td>Doe</td>
</tr>
</tbody>
</table></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>
</html>

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


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/[email protected]/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="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>

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


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

<div></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Alerts Components

<!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/[email protected]/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="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>

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


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

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


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Accordion 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/[email protected]/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">

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


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

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

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


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

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

<div></div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>

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


</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">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/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>

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


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

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

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


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

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

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


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/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</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">

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


<link
href="https://cdn.jsdelivr.net/npm/[email protected]/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
</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">

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


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

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


</div>
<h1>Hello, world 1</h1>

</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

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


Bootstrap 5 Nav and NavBar Responsive

<!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/[email protected]/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">

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

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

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


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

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


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

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


<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>
</div>
<div>
<a href="#" class="dropdown-item">2</a>
</div>
<div>
<a href="#" class="dropdown-item">3</a>
</div>
</div>

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


</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>
<div>
<a href="#" class="dropdown-item">3</a>
</div>
</div>
</li>
<li class="nav-item"><a href="#"
class="nav-link">Three</a></li>

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


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

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootst
rap.bundle.min.js"></script>
</body>

</html>

Bootstrap 5 Carousel

<!doctype html>

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


<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/[email protected]/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="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">

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


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

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


<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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