How to make a fixed width column with a container-fluid?
A fixed-fluid layout is possible in Bootstrap 3, but now that Bootstrap 4 is flexbox this layout is much easier. You just need to enable flexbox, and make a few simple adjustments to set the width of your fixed side column flex: 0 0 300px;
, and then flex: 1;
on your main column to fill remaining width...
Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw
Here's a simpler update for the latest Bootstrap 4 which is flexbox by default:
Bootstrap 4 Alpha 6 or Beta http://codeply.com/go/V9UQrvLWwz
@media (min-width: 576px) {
.sidebar {
max-width: 280px;
}
}
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-md-4 col-12 sidebar">
</div>
<div class="col-md col-12 main">
<h2>Main (fluid width...)</h2>
</div>
</div>
</div>
Also see: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
Update 2018 Bootstrap 4.0.0 example
Try including your container-fluid
in a div
with margin-left: 200px
(where 200px is your sidebar's width).
Then position your sidebar with position: absolute
for instance