How to make only one column fluid in bootstrap - layout

Question

The following is the structure of my layout in Bootstrap 3.2:
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
<div class="col-xs-6">
<!-- I want only this column to be fluid. -->
</div>
<div class="col-xs-3">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
As you can see in psuedo-code comments, I want only the middle column to be fluid according to the screen size.
Is it possible in container-fluid fashion of Bootstrap? Or I should go through other ways?

Answer 1

There is no "Bootstrap way" to have columns a fixed width. So, we can use CSS to do what you want in a few ways
Use flexbox (the best way) - Demo.
.row {
display: flex;
}
.fixed-side-column {
width: 250px;
}
.fluid-middle-column {
flex-grow: 1;
}
Use calc() (or the JavaScript equivalent) keeping in mind browser support - Demo
.row > div {
float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
width:250px;
}
.fluid-middle-column {
width:calc(100% - 500px);
}
Use absolute positioning and padding on the middle element to remove the need for any calculations - Demo
You'd have to change the markup some
<div class="container-fluid">
<div class="row">
<div class="fluid-middle-column">
<!-- I want only this column to be fluid. -->
</div>
<div class="fixed-side-column">
<!-- I want this column to be fixed. -->
</div>
<div class="fixed-side-column right">
<!-- I want this column to be fixed. -->
</div>
</div>
</div>
/* CSS */
.fixed-side-column {
width:250px;
float:left;
}
.right {
float:right;
}
.fluid-middle-column {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
padding: 0 250px 0 250px;
}
You'll need to add custom media queries to handle what happens when the screen is getting small.