Making a Collapsible Sidebar Nav in Bootstrap 4?

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>

Solution

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.

Comments

[Zim]

Sidebars are complicated as there are so many scenarios.. overlay content, push content, fluid or fixed width, fixed/sticky position, responsive large/mobile layout, scrollable, toggleable, left/right, multi-level, etc.. I recently answered a bounty question on this.. but I suspect you won't get a turn-key answer for the one shown in the template. I created this when 4.0 was released that may get you started, but I think the question is too broad for SO.

[chobo2]

Thanks, I got to look over your code and understand it. I did not know that about Bootstrap 4, I thought it is ready to go. I actually would prefer to use CSS3 grids but I need to support IE11. I was looking at bulma as it just seems simpler but I don't know if IE11 support is there(it just says on the site if you need IE support you might want to go with boostrap).

[tao]

@chobo2, Indeed. With v.3.3.*. It will a good while until v4 reaches it in terms of browser compat, examples, templates, plugins, you name it... The only thing that v4 has now is a good start. You need more before you can use it. Unless you compensate for what it's lacking, of course. Can you please explain why you would like to use CSS grids? I hear this from a lot of people, especially if their CSS knowledge is less than solid. It really baffles me.

[chobo2]

I made some layouts with CSS grid for my personal sites, I found it was alot faster to understand how to use, cleaner and overall I was able to do what I wanted to do with not too much trouble.

[tao]

That's rare. A lot of people have trouble using it.

[Kyle Vassella]

Hi Andrei, I was wondering if you still recommend Bootstrap 3 over Bootstrap 4 in a production environment. From my experience late last year, I tend to agree with you, but was wondering if any of the new Bootstrap 4 updates this year have changed your mind.

[tao]

@Kyle, it depends on a lot of factors. On project size, project target audience (browsers, devices) on how much customization you need and what plugins you need. Also, what browsers do you need to support? And it also depends on how skilled you (or your frontend engineer) are at coming up with workarounds for any problems you might have. My tagline is: "anything is possible or I'm doing it wrong". :) I haven't touched v3 in 6 months, but I still think for medium and large projects it's less expensive and more effective to use v3 and it will be so for at least 6 more months.

[tao]

@Kyle, read this and this.

[Kyle Vassella]

Ah, I see that 'anything is possible or I'm doing it wrong' is your official trademarked slogan :D . Thanks a lot Andrei!