Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes
Twitter BootstrapTwitter Bootstrap-3Twitter Bootstrap Problem Overview
I am learning how to use Bootstrap. Currently, I'm wading my way through layouts. While Bootstrap is pretty cool, everything I see seems dated. For the life of me, I have what I think is a basic layout that I can't figure out. My layout looks like the following:
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|
This grid needs to take up the full height of the window. From my understanding, I need to mix fixed and fluid widths. However, Bootstrap 3.0 doesn't seem to have the fluid class anymore. Even if it did, I can't seem to figure out how to mix fluid and fixed column sizes. Does anyone know how to do this in Bootstrap 3.0?
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
edit: As lots of people seem to want to do this, I have written up a short guide with a more general use case here https://www.atlascode.com/bootstrap-fixed-width-sidebars/. Hope it helps.
The bootstrap3 grid system supports row nesting which allows you to adjust the root row to allow fixed width side menus.
You need to put in a padding-left on the root row, then have a child row which contains your normal grid layout elements.
Here is how I usually do this http://jsfiddle.net/u9gjjebj/
html
<div class="container">
<div class="row">
<div class="col-fixed-240">Fixed 240px</div>
<div class="col-fixed-160">Fixed 160px</div>
<div class="col-md-12 col-offset-400">
<div class="row">
Standard grid system content here
</div>
</div>
</div>
</div>
css
.col-fixed-240{
width:240px;
background:red;
position:fixed;
height:100%;
z-index:1;
}
.col-fixed-160{
margin-left:240px;
width:160px;
background:blue;
position:fixed;
height:100%;
z-index:1;
}
.col-offset-400{
padding-left:415px;
z-index:0;
}
Solution 2 - Twitter Bootstrap
There's really no easy way to mix fluid and fixed widths with Bootstrap 3. It's meant to be like this, as the grid system is designed to be a fluid, responsive thing. You could try hacking something up, but it would go against what the Responsive Grid system is trying to do, the intent of which is to make that layout flow across different device types.
If you need to stick with this layout, I'd consider laying out your page with custom CSS and not using the grid.
Solution 3 - Twitter Bootstrap
or use display property with table-cell;
css
.table-layout {
display:table;
width:100%;
}
.table-layout .table-cell {
display:table-cell;
border:solid 1px #ccc;
}
.fixed-width-200 {
width:200px;
}
html
<div class="table-layout">
<div class="table-cell fixed-width-200">
<p>fixed width div</p>
</div>
<div class="table-cell">
<p>fluid width div</p>
</div>
</div>
Solution 4 - Twitter Bootstrap
I had a slightly different problem:
- I needed to combine fixed and fluid columns as part of a table rather than as part of a full-window layout
- I needed to have columns fixed to both the left and right
- I was not worried about the column backgrounds using the full-height of the containing row
As a result, I resorted to float to for the left and right columns, and could then use Bootstrap's row to do the fluid columns in between.
<div>
<div class="pull-left" style="width:240px">Fixed 240px</div>
<div class="pull-right" style="width:120px">Fixed 120px</div>
<div style="margin-left:240px;margin-right:120px">
<div class="row" style="margin:0px">
Standard grid system content here
</div>
</div>
</div>
Solution 5 - Twitter Bootstrap
Updated 2018
IMO, the best way to approach this in Bootstrap 3 would be using media queries that align with Bootstrap's breakpoints so that you only use the fixed width columns are larger screens and then let the layout stack responsively on smaller screens. This way you keep the responsiveness...
@media (min-width:768px) {
#sidebar {
width: inherit;
min-width: 240px;
max-width: 240px;
min-height: 100%;
position:relative;
}
#sidebar2 {
min-width: 160px;
max-width: 160px;
min-height: 100%;
position:relative;
}
#main {
width:calc(100% - 400px);
}
}
Working Bootstrap Fixed-Fluid Demo
Bootstrap 4 will has flexbox so layouts like this will be much easier: http://www.codeply.com/go/eAYKvDkiGw
Solution 6 - Twitter Bootstrap
OK, my answer is super nice:
<style>
#wrapper {
display:flex;
width:100%;
align-content: streach;
justify-content: space-between;
}
#wrapper div {
height:100px;
}
.static240 {
flex: 0 0 240px;
}
.static160 {
flex: 0 0 160px;
}
.growMax {
flex-grow: 1;
}
</style>
<div id="wrapper">
<div class="static240" style="background:red;" > </div>
<div class="static160" style="background: green;" > </div>
<div class="growMax" style="background:yellow;" ></div>
</div>
if you wanna support for all browser, use https://github.com/10up/flexibility
Solution 7 - Twitter Bootstrap
UPDATE 2014-11-14: The solution below is too old, I recommend using flex box layout method. Here is a overview: http://learnlayout.com/flexbox.html
My solution
##html
<li class="grid-list-header row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
<li class="grid-list-item row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
##scss
.row-cw {
position: relative;
}
.col-cw {
position: absolute;
top: 0;
}
.ir-msg-list {
$col-reply-width: 140px;
$col-action-width: 130px;
.row-cw-msg-list {
padding-right: $col-reply-width + $col-action-width;
}
.col-cw-name {
width: 50%;
}
.col-cw-keyword {
width: 50%;
}
.col-cw-reply {
width: $col-reply-width;
right: $col-action-width;
}
.col-cw-action {
width: $col-action-width;
right: 0;
}
}
Without modify too much bootstrap layout code.
Update (not from OP): adding code snippet below to facilitate understanding of this answer. But it doesn't seem to work as expected.
ul {
list-style: none;
}
.row-cw {
position: relative;
height: 20px;
}
.col-cw {
position: absolute;
top: 0;
background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
padding-right: 270px;
}
.col-cw-name {
width: 50%;
background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
width: 50%;
background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
width: 140px;
right: 130px;
background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
width: 130px;
right: 0;
background-color: rgba(150, 150, 0, .5);
}
<ul class="ir-msg-list">
<li class="grid-list-header row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
<li class="grid-list-item row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
</ul>
Solution 8 - Twitter Bootstrap
Why not just set the left two columns to a fixed with in your own css and then make a new grid layout of the full 12 columns for the rest of the content?
<div class="row">
<div class="fixed-1">Left 1</div>
<div class="fixed-2">Left 2</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11"></div>
</div>
</div>