Bootstrap is a CSS framework that thousands of websites use to help speed up development, enforce consistency, and keep their sites responsive.
Bootstrap is used by all kinds of websites, from marketing websites, web applications, intranets, HTML based windows applications, you name it – someone somewhere has probably used bootstrap on it at some point.
One of the great things about Bootstrap is that it is responsive by default. Unfortunately, this can also cause some small issues when the layout has a sidebar.
If the side menu has a fixed set of items, it doesn’t make sense for this part of the page to have its width changed as the screen size changes.
You may still have it disappear into a hamburger menu on the smallest size for mobile, but if it’s there, it should be fixed width.
Let’s take a look at the dashboard example on the Bootstrap website and see this in action.
Here is an animated gif of it scaling. Pay attention to the sidebar. You will notice that as the page width gets smaller, so does the sidebar.
Up until the breakpoint between medium and small, then it snaps wider, then scales down again until it disappears. The maximum sensible width of this sidebar is known. The items never change, and when we are on a widescreen, we are actually wasting potentially useful screen space on the sidebar.
First, let’s take a quick look at how the dashboard example works.
(download original dashboard example)
<nav>...</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
...
</div>
</div>
</div>
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
What is going on here is we have a Bootstrap row, with 2 columns. The first column is 2/3 units wide and is used to hold the sidebar, and the second is 9/10 units wide and is used for the main content.
You will notice that col-sm-offset-3 and col-md-offset-2 classes are used in the second column. What are these doing? I’m glad you asked!
The sidebar column has position: fixed which means that it is taken out of the standard flow, so the content column now has nothing to the left of it and will appear under the sidebar column. To fix this, these offset bootstrap classes will set the left-padding of the content column so that it is no longer under the fixed sidebar.
What we actually want is a sidebar that is always 180px wide, then the rest of the page should flow as normal. This can be achieved by removing the col classes from the first column, then making the second column 12 units wide, like this…
Bootstrap Fixed Width Sidebar
(download dashboard fixed-width example)
<nav>...</nav>
<div class="container-fluid">
<div class="row">
<div class="sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
</div>
<div class="col-sm-12 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
</div>
We still have the same issue with the sidebar overlapping the content, so we need to set the left-padding ourselves.
CSS additions
.sidebar {
width: 180px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 220px; /* 180 + 40 */
}
}
We now have this…
Which in my opinion is a much more pleasant experience.
I hope you found this post on how to make fixed-width sidebar in Bootstrap responsive helpful – if you have any feedback, please get in touch.
