How to build a two column fluid layout with Twitter Bootstrap v3.0
The grid in Bootstrap 3 is now fluid by default (http://getbootstrap.com/getting-started/#migration-dropped). You just need to use .row
and .container
..
<div class="container">
<div class="row">
<div class="col-md-2">
Sidebar content
</div>
<div class="col-md-10">
Body content
</div>
</div>
</div>
This however will not be 100% width. If you want 100% width you can do something like this.. http://www.bootply.com/86324
UPDATE: 3.0.1 and later use container-fluid
for full width.
How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
- Another Update -
Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid
class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible
It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="fixed"> <!-- we want this div to be fixed width -->
...
</div>
<div class="hero-unit filler"> <!-- we have removed spanX class -->
...
</div>
</div>
</div>
CSS
/* CSS for fixed-fluid layout */
.fixed {
width: 150px; /* the fixed width required */
float: left;
}
.fixed + div {
margin-left: 150px; /* must match the fixed width in the .fixed class */
overflow: hidden;
}
/* CSS to ensure sidebar and content are same height (optional) */
html, body {
height: 100%;
}
.fill {
min-height: 100%;
position: relative;
}
.filler:after{
background-color:inherit;
bottom: 0;
content: "";
height: auto;
min-height: 100%;
left: 0;
margin:inherit;
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)
Important
Answer below is fluid-fluid
Update
As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0
To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html
and body
to 100% and create a new css class called .fill
which has a minimum-height of 100%:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
}
We can then add the .fill
class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:
<div class="container-fluid fill">
...
</div>
To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after
pseudo selector to add a filler
element that will give the illusion that the two columns have the same height:
.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}
To make sure that the .filler
element is positioned relatively to the .fill
element we need to add position: relative
to .fill
:
.fill {
min-height: 100%;
position: relative;
}
And finally add the .filler
style to the HTML:
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="span3">
...
</div>
<div class="span9 hero-unit filler">
...
</div>
</div>
</div>
Notes
- If you need the element on the left of the page to be the filler then you need to change
right: 0
toleft: 0
.
Twitter Bootstrap Two Column Responsive Layout - Sidebar 100% height with fixed width
Check this out.
<div class="row">
<div class="span3" style="position:fixed;background-color:#46a546;height:100%;top:0px;" id="leftmargin">
position fixed navbar (out of .container)
</div>
</div>
<div class="container">
<div class="row">
<div class="span9 offset3" style="background-color:#049cdb;">
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
</div>
</div>
</div>
And a bit of jQuery
function sizing() {
var windowwidth=$(window).width();
var containerwidth=$('.container').width();
if(windowwidth<1200) {
var diff=windowwidth-containerwidth+40;
}
else {
var diff=windowwidth-containerwidth+60;
}
$('#leftmargin').text("window="+ windowwidth+",container="+containerwidth);
if(windowwidth<=767) {
$('#leftmargin').css('margin-left', '0px');
$('#leftmargin').css('position', 'relative');
}
else {
$('#leftmargin').css('position', 'fixed');
if(diff>0) {
$('#leftmargin').css('margin-left', (diff/2) +'px');
} else {
$('#leftmargin').css('margin-left', '20px');
}
}
}
$(document).ready(sizing);
$(window).resize(sizing);
http://jsfiddle.net/NzqfL/3/
inspired by my previous post https://stackoverflow.com/a/10972425/1416911
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
Twitter Bootstrap - Two Column layout for form
Easy stuff. Bring the bootstrap row within a parent div and set the background of that div to a color of your choosing.
The Markup:
<div id="background-color">
<form id="form1" name="form1" method="post" action=""><!-- START THE FORM -->
<div class="row-fluid">
<div class="span6"> <!-- FIRST COLUMN -->
<label>First Name</label>
<label for="textfield"></label>
<input type="text" />
<label>Last Name</label>
<label for="textfield"></label>
<input type="text" />
</div>
<div class="span6"> <!-- SECOND COLUMN -->
<label>Other</label>
<label for="textfield"></label>
<input type="text" />
<label>Fields</label>
<label for="textfield"></label>
<input type="text" />
<input type="submit" name="button" id="button" value="Submit" />
</form> <!-- END THE FORM -->
</div>
</form>
</div> <!-- End row -->
</div> <!-- END BACKGROUND -->
The CSS:
#background-color {background-color: #CCC;}
I hope this helps
Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes
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.
Fluid twitter bootstrap layout with min-width columns on left and right (sidebars)
finally found a very well working solution (for me) here also at StackOverflow:
How do I get a three column layout with Twitter Bootstrap?
Anyway thank you very much for your help guys !
Related Topics
CSS: Fix The Height of a Section Within a Variable Height Element
Why Does Changing a CSS Class Name Break The Styles
Bootstrap Dropdown Hiding in Modal
>*' Selector Not Working from Parent to Child Component
How to Select The Last-Child of The Last-Child
How to Include a Custom CSS File in Typo3
Vuejs-Datepicker Change Styles Doesn't Work
What Exactly Does This CSS Selector with a Comma Match
Svg Rotation Animation Failing in Ie and Ff
Class Selector Not Working in CSS, But Id Works for Add Some Styles
How to Scale Svg Path to Fit The Window Size
Why Use Ems for Padding & Margins with Browsers Now Scaling Correctly
Smartgwt Button Cannot Override Skin_Styles.CSS
Firefox Parsing 4 Digit Hex Color Values as Rgba
Scrolling Effect: Slow at First Than It Goes Fast
What Are Your Tips for Best Practice for Web Application Structure