How to create left and right fixed sidebar with Bootstrap 5

Question

In a Bootstrap 5 markup structure, can you use 2 <nav> elements to create a left and right fixed sidebar with content in the middle? Something like this:

<nav>
  <div>left sidebar</div>
</nav>
<main>
  <div>main content</div>
</main>
<nav>
  <div>right sidebar</div>
</nav>

What would the basic bootstrap5 classes look like/css to make this work?

Answer 1

Are you looking for something like this:

<div class="d-flex">
    <div>left item, put me some width</div>
    <div class="flex-fill">content item, will fill remaining</div>
    <div>right item, put me some width</div>
</div>

As you said, side bars are fixed (you need to put them in some class with width), and middle one will expand to fill remaining width of parent

Answer 2

Bootstrap uses a 12-column grid-system. One way to do this is just make assign those grid-column values into whatever you prefer inside a single row (i used 2 - 8 - 2 for this demonstration)

Then you could use position: sticky and your preferred positioning values on the nested element inside each nav . This way the content will stick to the screen while scrolling through the main content.

 /* ----- Resetting styling/demo purpose ----- */ * { padding: 0; margin: 0; box-sizing: border-box; } .wrapper.row { flex-wrap: nowrap; margin: 0; } .wrapper.row>* { padding: 0; text-align: center; } /* ----- end ----- */ .col-md-2 { background-color: tomato; } .col-md-2 div { position: sticky; top: 0; } .col-md-8 { background-color: limegreen; height: 175vh; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="wrapper row"> <nav class="col-md-2"> <div>left sidebar</div> </nav> <main class="col-md-8"> <div>main content</div> </main> <nav class="col-md-2"> <div>right sidebar</div> </nav> </div>