how to convert bootstrap4 navbar to sidebar for mobile?

Question

i have a bootstrap 4 navbar( like the default navbar which collpase from top to bottom). Now what is want is, i want to convert this navbar into a sidebar for mobile versio

Answer 1

This question is very similar to: Create a responsive navbar sidebar "drawer" in Bootstrap 4? .. you have to implement a custom sidebar.

As explained, mobile sidebars can get complicated because there are many variations (push, overlay, auto-collapse, toggleable, icons, etc..) which is most likely the reason Bootstrap doesn't have sidebar component.

Use a CSS @media query to re-position the Navbar on mobile:
https://codeply.com/p/44bz8AG2EO

/* navbar becomes mobile sidebar under lg breakpoint */
@media (max-width: 992px) {
    
    .navbar-collapse.collapsing .navbar-nav {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -45%;
        transition: all 0.2s ease;
    }

    .navbar-collapse.show .navbar-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        height: auto;
        width: 45%;
        transition: left 0.35s ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}

Or, another option is to use the Bootstrap 4 modal as a sidebar but this also requires custom positioning and duplicate content:
https://codeply.com/p/LYPEZ5IRHH

Or, if the Navbar doesn't collapse, changing it to a sidebar can be done like this