Scribd
Upload
98 views5 pages

Bootstrap 5 Sidebar

The document shows code for a sidebar navigation component with Bootstrap. It includes HTML, CSS, and JavaScript for the sidebar layout and functionality. The sidebar has navigation links and can open/close on mobile via JavaScript.

Uploaded by

newsletter
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
98 views5 pages

Bootstrap 5 Sidebar

The document shows code for a sidebar navigation component with Bootstrap. It includes HTML, CSS, and JavaScript for the sidebar layout and functionality. The sidebar has navigation links and can open/close on mobile via JavaScript.

Uploaded by

newsletter
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Youtube - Sidebar Bootstrap 5 | Coding

League
HTML
<div class="main-container d-flex">
<div class="sidebar" id="side_nav">
<div class="header-box px-2 pt-3 pb-4 d-flex justify-content-between">
<h1 class="fs-4"><span class="bg-white text-dark rounded shadow px-2 me-2">CL</span>
<span
class="text-white">Coding League</span></h1>
<button class="btn d-md-none d-block close-btn px-1 py-0 text-white"><i
class="fal fa-stream"></i></button>
</div>

<ul class="list-unstyled px-2">


<li class="active"><a href="#" class="text-decoration-none px-3 py-2 d-block"><i
class="fal fa-home"></i> Dashboard</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
list"></i>
Projects</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block d-flex justify-
content-between">
<span><i class="fal fa-comment"></i> Messages</span>
<span class="bg-dark rounded-pill text-white py-0 px-2">02</span>
</a>
</li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i
class="fal fa-envelope-open-text"></i> Services</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
users"></i>
Customers</a></li>
</ul>
<hr class="h-color mx-2">
<ul class="list-unstyled px-2">
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
bars"></i>
Settings</a></li>
<li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="fal fa-
bell"></i>
Notifications</a></li>

</ul>

</div>
<div class="content">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<div class="d-flex justify-content-between d-md-none d-block">
<button class="btn px-1 py-0 open-btn me-2"><i class="fal fa-stream"></i></button>
<a class="navbar-brand fs-4" href="#"><span class="bg-dark rounded px-2 py-0 text-
white">CL</span></a>

</div>
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fal fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end"
id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Profile</a>
</li>

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

<div class="dashboard-content px-3 pt-4">


<h2 class="fs-5"> Dashboard</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, totam? Sequi alias
eveniet ut quas
ullam delectus et quasi incidunt rem deserunt asperiores reiciendis assumenda
doloremque provident,
dolores aspernatur neque.</p>
</div>
</div>
</div>
CSS
body{
background: #eee;
}

#side_nav{
background: #000;
min-width: 250px;
max-width: 250px;
transition: all 0.3s;
}
.content{
min-height: 100vh;
width: 100%;
}
hr.h-color{
background: #eee;
}
.sidebar li.active{
background: #eee;
border-radius: 8px;
}

.sidebar li.active a, .sidebar li.active a:hover {


color: #000;
}
.sidebar li a{
color: #fff;
}

@media(max-width: 767px){
#side_nav{
margin-left: -250px;
position: absolute;
min-height: 100vh;
z-index: 1;

}
#side_nav.active{
margin-left: 0;
}
}
JS
$(".sidebar ul li").on('click', function () {
$(".sidebar ul li.active").removeClass('active');
$(this).addClass('active');
});

$('.open-btn').on('click', function () {
$('.sidebar').addClass('active');

});

$('.close-btn').on('click', function () {
$('.sidebar').removeClass('active');

})

You might also like