Making a Collapsible Sidebar Nav in Bootstrap 4? - html

Question

I am wondering if someone can help me get started on how I could create a sidebar nav like on this template. I was thinking of buying the template and going through the code that way but I think it comes with a ton of stuff that might just confuse me.
I am trying to understand how make it so on a large screen you will see
or
but on mobile you will see the hamburger menu
So far I got this
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 collapse d-md-flex bg-light pt-2 h-100" id="sidebar">
<ul class="nav flex-column flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-cog"></i>
<span class="badge badge-dark">4</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
</div>
<div class="col pt-2">
<div class="row w-100">
<div class="col-12 pt-2" style="background:coral;">
</div>
</div>
<div class="row w-100">
fakdfkaf
</div>
</div>
</div>
</div>

Answer 1

This should get you started:
#sidebar {
max-width: 240px;
}
#sidebar nav {
width: 100%;
}
#media (max-width: 768px) {
#sidebar {
max-width: 48px;
}
#sidebar .nav-link span {
position: absolute;
opacity: 0;
}
}
#media (max-width: 576px) {
#sidebar {
max-width: 0;
overflow-x: hidden;
}
}
Proof of concept (I had to tweak your markup):
body,html {height: 100%;}
#sidebar {
max-width: 240px;
}
#sidebar nav {
width: 100%;
}
#media (max-width: 768px) {
#sidebar {
max-width: 48px;
}
#sidebar .nav-link span {
position: absolute;
opacity: 0;
}
}
#media (max-width: 576px) {
#sidebar {
max-width: 0;
overflow-x: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col d-md-flex bg-light h-100 p-0" id="sidebar">
<ul class="nav flex-column flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-cog"></i>
<span class="badge badge-dark">4</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-chart-line"></i>
<span>Analytics</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-random"></i>
<span>Export</span>
</a>
</li>
</ul>
</div>
<div class="col pt-2">
<div class="row">
<div class="col-12 pt-2" style="background:coral;">
</div>
</div>
<div class="row">
<div class="col-12">
fakdfkaf
</div>
</div>
</div>
</div>
</div>
Note: I strongly recommend against using Bootstrap v4 in a production env today. It's not bug-free cross-browser/cross-device. If you need a production ready, flexible and solid library to compensate for the lack of a frontend dev in your team, v4 is not that library. You should definitely stick with v3 for at least one more year.
v4 currently requires solid CSS knowledge (and a lot of work!) to be used into a prod env.