How to create a fixed sidebar layout with Bootstrap 4?
HtmlCssTwitter BootstrapBootstrap 4Html Problem Overview
I'm trying to create a layout like the screenshot using Bootstrap 4 but I'm having some problems with making the sidebar fixed and achieving this layout at the same time.
Going with a basic example:
<div class="container">
<div class="row">
<div class="col-m-4" id="sticky-sidebar">
Sidebar
</div>
<div class="col-m-8" id="main">
Main Area
</div>
</div>
</div>
It's possible to get this layout but things get tricky once I declare:
.sidebar {
position: fixed // or absolute
}
Once I make the sidebar sticky, the main div starts appearing behind the sidebar instead of next to it. Of course it's possible to declare some margin and push it back to it's original position but it makes things complicated for responsiveness.
I feel like I'm missing something, I read the Bootstrap 4 documentation but I couldn't find a simple way to achieve this layout.
Html Solutions
Solution 1 - Html
Updated 2020
Here's an updated answer for the latest Bootstrap 4.0.0. This version has classes that will help you create a sticky or fixed sidebar without the extra CSS....
Use sticky-top
:
<div class="container">
<div class="row py-3">
<div class="col-3 order-2" id="sticky-sidebar">
<div class="sticky-top">
...
</div>
</div>
<div class="col" id="main">
<h1>Main Area</h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/go/O9GMYBer4l
or, use position-fixed
:
<div class="container-fluid">
<div class="row">
<div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
...
</div>
<div class="col offset-3" id="main">
<h1>Main Area</h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/p/0Co95QlZsH
Also see:
https://stackoverflow.com/questions/49281623/fixed-and-scrollable-column-in-bootstrap-4-flexbox/49282391<br>
https://stackoverflow.com/questions/48972833/bootstrap-col-fixed-position/48974617#48974617<br>
https://stackoverflow.com/questions/38382043/how-to-use-css-position-sticky-to-keep-a-sidebar-visible-with-bootstrap-4/49111934<br>
https://stackoverflow.com/questions/48996084/create-a-responsive-navbar-sidebar-drawer-in-bootstrap-4/48996139
Solution 2 - Html
something like this?
#sticky-sidebar {
position:fixed;
max-width: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="col-xs-8" id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div
Solution 3 - Html
I used this in my code:
<div class="sticky-top h-100">
<nav id="sidebar" class="vh-100">
....
this cause your sidebar height become 100% and fixed at top.
Solution 4 - Html
I'm using the J.S. to fix a sidebar menu. I've tried a lot of solutions with CSS but it's the simplest way to solve it, just add J.S. adding and removing a native BootStrap class: "position-fixed".
The J.S.:
var lateral = false;
function fixar() {
var element, name, arr;
element = document.getElementById("minhasidebar");
if (lateral) {
element.className = element.className.replace(
/\bposition-fixed\b/g, "");
lateral = false;
} else {
name = "position-fixed";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
lateral = true;
}
}
The HTML:
Sidebar:
<aside>
<nav class="sidebar ">
<div id="minhasidebar">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active"
th:href="@{/hoje/inicial}"> <i class="oi oi-clipboard"></i>
<span>Hoje</span>
</a></li>
</ul>
</div>
</nav>
</aside>
Solution 5 - Html
My version:
div#dashmain { margin-left:150px; }
div#dashside {position:fixed; width:150px; height:100%; }
<div id="dashside"></div>
<div id="dashmain">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">Content</div>
</div>
</div>
</div>