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?
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>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