How to create left and right fixed sidebar with Bootstrap 5-CodePudding

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?

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div >
  <nav >
    <div>left sidebar</div>
  </nav>
  <main >
    <div>main content</div>
  </main>
  <nav >
    <div>right sidebar</div>
  </nav>
</div>

CodePudding user response：

Are you looking for something like this:

<div >
    <div>left item, put me some width</div>
    <div >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