D4mations.com

Bootstrap 4 sidebar menu with submenu responsive with code 2018

[ad_1]
https://i.ytimg.com/vi/82ub3brCJRU/hqdefault.jpg



In this video tutorial, We going to learn about Bootstrap 4 sidebar. We can easily create bootstrap 4 sidebar nav by using some custom CSS. Where I create three layers of the submenu in this sidebar. By using collapse session and toggle function of bootstrap 4 I designed this sidebar or sidenav.

Link for download the code:
https://drive.google.com/drive/folders/1PjsYB0wuSFC5uWvx5SE0soMhKaZ8EKFI?usp=sharing

Tags:
bootstrap 4 sidebar
bootstrap 4 sidebar collapse
bootstrap 4 sidebar nav
bootstrap 4 sidebar template
bootstrap 4 sidebar responsive
bootstrap 4 sidebar tutorial
bootstrap 4 sidebar menu responsive
bootstrap 4 sidebar menu toggle
bootstrap 4 sidebar dropdown
bootstrap 4 sidebar and navbar
bootstrap 4 sidebar nav collapse
bootstrap 4 sidebar navigation
bootstrap 4 sidebar layout
bootstrap 4 sidebar menu

Original source

d4mer

,
, , , , , , , , ,

24 responses to “Bootstrap 4 sidebar menu with submenu responsive with code 2018”

  7. Bro first of all I will appreciate for your efforts to make this video in sidebar bootstrap.However,I found a lot of loopholes in the video like the video is not informative means while you writing the css classes it feels like you have just mugged up the css classes and you are just recalling them and writing it down.As a newbie to bootstrap I need to understand that changing the css classes leads to what change in the DOM. Next you need give some info(a two liner info would be enough) whenever you are introducing some not so frequently used css classes like transform, translate,media queries….like why we should use them .Also I feel like there should be a wrapper class which should hold up your sidebar markup and you page content markup.And lastly you need to improve your pronunciation and increase your vocab.Its a big turn off for the audience when they are actually hearing it.If you can work on these aspects ….I guess it will be a great source of learning.Best of luck 🙂

  13. Excelente tutorial. me gusto mucho. hice uan pequeña modificacion en la parte del jquery. que opinas?
    /*

    //JQUERY

    $(document).ready(function(){

    $('#sidebarCollapse').on('click', function(){

    $('#sidebar').toggleClass("active");

    });

    });

    */

    //Vainilla JS

    document.addEventListener('DOMContentLoaded', function() {

    //alert("dR")

    [].forEach.call(document.querySelectorAll('#sidebarCollapse'), function(el) {

    el.addEventListener('click', function() {

    //document.querySelector("#sidebar").classList.toggle("active");

    [].forEach.call(document.querySelectorAll('#sidebar'), function(el) {

    el.classList.toggle("active");

    })

    })

    })

    })

Leave a Reply