Bootstrap 5 Lessons Source Code

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/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">
</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 Grid Rows and Columns

<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<div style="height:50px"> </div>
<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">Four</div>
</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>
</div>

<div class="row">
</div>
<div class="row">
</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>
</div>

<script
</body>
</html>
Text and Typography

<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<div class="h1">Hello World 1</div>
<div class="h2">Hello World 1</div>
<div class="display-1">Display 1</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>

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

<script
</body>
</html>
How to update Image Classes
<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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 "
1Container 1</div>
<div><img src="logo.png" class="img-thumbnail img-fluid
rounded-circle" >Container 1 Container 1Container 1Container
1Container 1</div>
<div><img src="logo.png" class="rounded float-end "
1Container 1</div>
<img src="logo.png" class="img-fluid">
</div>
<p class="h1">Container 2</p>
<img src="logo.png" class="img-thumbnail">
</div>
<script
</body>

</html>
Bootstrap 5 Table Classes

<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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>
</tr>
<tr>
<td>Laurence</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<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>
</tr>
<tr>
<td>Laurence</td>
<td>Doe</td>
</tr>
</tbody>
</table></div>
</div>
<script
</body>
</html>

Bootstrap 5 Colors
<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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="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
</body>
</html>
Bootstrap 5 Alerts Components
<!doctype html>
<html lang="en">

<head>
initial-scale=1">
<link
</head>
<body>
<div class="alert alert-success">Container Alert <a
class="alert-link" href="#">Link</a></div>
<div class="alert alert-primary">Container Alert <a
<div class="alert alert-warning">Container Alert <a
<div class="alert alert-danger">Container Alert <a
<div class="alert alert-info">Container Alert</div>
<div class="alert alert-secondary">Container Alert</div>
</div>

<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
</div>
<div class="alert alert-info alert-dismissible fade
show">Container Alert
</div>
<div class="alert alert-primary alert-dismissible fade
show">Container Alert
</div>
<div></div>
</div>

<script
</body>
</html>
Bootstrap 5 Accordion Components

<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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>
Open Two
</button>
</h2>
<div id="open2" class="accordion-collapse collapse "
Hello World
</div>
</div>

</div>
Open Three
</button>
</h2>
<div id="open3" class="accordion-collapse collapse "
Hello World #3
</div>
</div>
</div>
</div>
</div>
<div></div>
</div>
<script
</body>

</html>
Bootstrap 5 Buttons Components

<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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> <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>
<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>
</div>
</div>
</div>
<script
</body>
</html>
Card Component Bootstrap 5

<!doctype html>
<html lang="en">
<head>
initial-scale=1">

<link
</head>
<body>
<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">

Author
</div>
Laurence Svekis
</div>
Contact info
</div>
</div>
</div>
<div class="col-md">
<div class="card">
<div class="card-img-overlay">
<p class="card-text">Laurence Svekis</p>
<button class="btn btn-primary">More</button>
</div>
Author
</div>
Laurence Svekis
</div>
Contact info
</div>
</div>
</div>

</div>
</div>
<script
</body>
</html>

Bootstrap 5 Nav and NavBar Responsive
<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link

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

</li>
</li>
</li>
</ul>
</div>
</div>
</nav>

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

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

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

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

<ul class="nav nav-pills bg-light nav-justified">
class="nav-link">two</a></li>
active">Four</a></li>
</ul>
<ul class="nav nav-pills bg-light ">

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

</li>
">Four</a></li>
</ul>
<ul class="nav nav-tabs bg-light ">

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

">Four</a></li>
</ul>
<script
</body>
</html>
Bootstrap 5 Carousel
<!doctype html>

<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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>
data-bs-slide-to="1"></button>
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>
</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
</body>
</html>

Bootstrap 5 Modal component
<!doctype html>
<html lang="en">
<head>

initial-scale=1">
<link
</head>
<body>
<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>
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">

<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>
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Laurence Svekis</p>
</div>
<div class="modal-footer">

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

Bootstrap 5 Utilities

<!doctype html>
<html lang="en">
<head>
initial-scale=1">
<link
</head>
<body>
<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">

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

Bootstrap 5 Lessons Source Code

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap 5 Lessons Source Code

Uploaded by

Copyright:

Available Formats

Bootstrap 5 Lessons Source Code

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

Bootstrap 5 Grid Rows and Columns

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

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

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

Text and Typography

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

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

<div>Container 1 Container 1Container 1 Container

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

How to update Image Classes

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

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

Bootstrap 5 Table Classes

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

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

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

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

Bootstrap 5 Alerts Components

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

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

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

Bootstrap 5 Accordion Components

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

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

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

Bootstrap 5 Buttons Components

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

<div> <button type="button" class="btn btn-outline-secondary

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

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

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

Card Component Bootstrap 5

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

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

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

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

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

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

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

<h1>Hello, world 1</h1>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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