How can I create a responsive navbar sidebar drawer in Bootstrap 4?

Use the built-in Offcanvas component for Bootstrap 5

Bootstrap 5 Beta 3 introduced a new Offcanvas component. This component makes it straightforward to create sidebars.

You can view an example of this component in use on the Bootstrap website.

Creating a responsive navbar sidebar drawer in Bootstrap 4

To create a responsive navbar sidebar drawer in Bootstrap 4, you can use a combination of collapse, stacked pills, and flexbox.

Begin by creating a container div with a class of container-fluid and height of 100vh.

<div class="container-fluid h-100">
  ...
</div>

Inside the container div, create two rows. The first row will contain the sidebar and the second row will contain the main content.

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">

The sidebar should be given a class of collapse to hide it by default. You can add a button to toggle the sidebar's visibility.

<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>

For the main content, use a col class to fill the rest of the available space.

<div class="col">
  ...
</div>

To make the sidebar sticky, add the sticky-top class to the sidebar's navbar.

<ul class="nav flex-column navbar-dark sticky-top">
  ...
</ul>

Finally, add some CSS to style the sidebar and make it responsive.

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

This will make the sidebar 250px wide on screens wider than 768px.

The above is the detailed content of How can I create a responsive navbar sidebar drawer in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!