bootstrap left side bar - html

Question

I have created a left side bar. Is it possiable to make the side bar fixed on the screen. Whenever i make the screen smaller, the left side bar disappears.
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Categories <span class="sr-only">(current)</span></li>
This is my code for the side bar. it gets the categories name using php from mySql.

Answer 1

You'll need to use media queries to avoid the sidebar go all weird and stuff in smaller screens. For example let's say that we have this:
<div class="container">
<div class="leftSidebar">Left Sidebar</div>
<div class="mainContent">Main Content</div>
<div class="clear"></div>
</div>
I can give my mainContent class a float:right; to be floating on the right side, and then a float:left; to the leftSidebar to be floating on the left side. But we want the sidebar to be fixed so, float:left; doesn't really do nothing here anymore as soon as we say the leftSidebar to be position:fixed;. So here's how we gonna style these both divs:
.leftSidebar {
width: 100px;
height: 300px;
/* Making sidebar fixed */
position:fixed;
}
.mainContent {
width: 400px;
height: 300px;
float: right;
}
Allright!!! We have now a fixed sidebar and a div with the main content align to the right.
What about now? I don't want the sidebar acting all weird and being above the main content when I resize the window or visit the website in smaller screens!
Well this is where the media queries comes in. With media queries we can tell the sidebar to not be fixed anymore
/* Media query to create a fix for smaller screens */
#media (max-width: 450px){
.leftSidebar {
width: 80%; /* Meet your new width Sidebar! */
margin: 0 auto;
position:inherit; /* No more Fixed position for you sidebar!! */
}
.mainContent {
width: 80%; /* Meet your new width mainContent! */
margin: 0 auto;
float:none; /* What are you doing float right? I don't want .mainContent to float right anymore! Now it's float:none; !! */
}
}
An here's the final result and online example
At last we can change the order of the sidebar, either if we want it to appear first than the .mainContent or after .mainContent. For the sidebar appear first:
<div class="leftSidebar">Left Sidebar</div>
<div class="mainContent">Main Content</div>
For the sidebar appear after the .mainContent, just reverse order of the classes:
<div class="mainContent">Main Content</div>
<div class="leftSidebar">Left Sidebar</div>

Answer 2

If I got you right, the sidebar is always visible? If so, add it to your whole grid system.
<div class="container-fluid" id="page">
<div class="row">
<div class="col-xs-9" id="content">MAIN CONTENT</div>
<div class="col-xs-3" id="sidebar">SIDEBAR</div>
</div>
</div>
Based on bootstrap documentation, col-xs is the lowest col size and should also be defined. I've assumed, that you have a 12 column grid. Else you have to change the column settings.

Answer 3

Sidebar doesn't disappear. It falls underneath main content which is good for smaller screen sizes. If you don't need responsive layout you can find more information at bootstrap documentation page.