Set a specific sidebar width in Bootstrap dashboard template example - html

Question

I'm using the dashboard template example that comes with Bootstrap. Sidebar disappears after a certain screen size and that's fine. But I want to set a specific width until that point. Now it's kind of responsive and stretches in width on bigger screens (it's a bit nasty on large monitors.) A good width would be 250px.
CSS
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.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: #31373d;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
color: #98a7b5;
}
.nav-sidebar > li > a:hover {
background: transparent;
color: #fff;
}
.nav-sidebar > .active > a, .nav-sidebar > li > a:hover {
color: #fff;
background-color: #272c30;
}
/*
* Main content
*/
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
Any ideas? Thanks.
Source code is avaliable at getbootstrap.com

Answer 1

How about a max-width: 250px in your .sidebar CSS?

Answer 2

You could use a CSS media query to set a max-width on larger screens..
#media (min-width: 992px){
.sidebar {
max-width:250px;
}
}
Demo: http://www.bootply.com/126485

Answer 3

I just ran into the same issue. For me I was happy for the sidebar to remain fluid for the small and medium viewports. At a large viewport of 1200px or more I want to have a fixed width of 250px and then have the main content area cover the rest.
In the HTML give your main content div a class name or id. This will make it easy to select it in your css media query. Here i've used a class called 'content'.
<div class="col-sm-3 sidebar"> ... </div>
<div class="col-sm-9 col-sm-offset-3 content"> ... </div>
Then add your css:
#media(min-width:1200px){ // breakpoint where I set a fixed sidebar width. You can change this to whatever you want.
.sidebar {width:250px}
.content {margin-left:0;padding-left:265px;width:100%;} // reset the width and margin, overwriting the bootstrap grid. Add padding to the left to equal the width of your fixed width sidebar + half your defined grid gutter width. For me that is the default 15px.
}