How to Create Vertical Sidebar in Bootstrap 5?
Bootstrap 5 Sidebar created is very simple.
This very easy adds container and add a navbar col-lg-3 Add. Example here see and copy past in your index.html File.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="htmlcss bootstrap aside menu, vertical, sidebar nav menu CSS examples" />
<meta name="description" content="Bootstrap 5 sidebar navigation menu example" />
<title>Bootstrap 5 sidebar vertical menu sample.</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- ======= Icons used for dropdown (you can use your own) ======== -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sidebar{
background: yellow;
}
.sidebar .nav-link {
font-weight: 500;
color: var(--bs-dark);
}
.sidebar .nav-link:hover {
background: var(--bs-light);
color: var(--bs-primary);
}
</style>
</head>
<body>
<header class="section-header py-4 pt-5 text-center">
<div class="container">
<h1>Bootstrap 5 sidebar vertical menu sample.</h1>
</div>
</header> <!-- section-header.// -->
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-3 col-12">
<nav class="sidebar card py-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"> Link name </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About page </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Category name </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Another page </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Demo link </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Menu item </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Something </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Other link </a>
</li>
</ul>
</nav>
</div>
<div class="col-lg-9 col-12">
<h1>Demo for sidebar nav menu links. <br> Based on Bootstrap 5 CSS framework. </h1>
<p>For this demo page you should connect to the internet to receive files from CDN like Bootstrap5 CSS, Bootstrap5 JS</p>
<p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. 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. </p>
</div>
</div>
</div><!-- container // -->
</body>
</html>
