How to build a 2 Column Fixed - Fluid Layout with Twitter Bootstrap

Question

Is it possible to create a 2 Column Layout  Fixed - Fluid  Layout   http   www dynamicdrive com style layouts item css-liquid-layout-21-fixed-fluid   with Twitter Bootstrap  http   twitter github com bootstrap     Do you have any solutions

User · Answer

Update 2018  Bootstrap 4  Now that BS4 is flexbox  the fixed-fluid is simple  Just set the width of the fixed column  and use the  col class on the fluid column    sidebar       width  180px      min-height  100vh      lt div class  row  gt       lt div class  sidebar p-2  gt Fixed width lt  div gt       lt div class  col bg-dark text-white pt-2  gt          Content      lt  div gt   lt  div gt    http   www codeply com go 7LzXiPxo6a  Bootstrap 3    One approach to a fixed-fluid layout is 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      media  min-width 768px       sidebar         min-width  300px        max-width  300px         main         width calc 100  - 300px           Working Bootstrap 3 Fixed-Fluid Demo  Related Q amp A  Fixed width column with a container-fluid in bootstrap How to left column fixed and right scrollable in Bootstrap 4  responsive

User · Answer

- 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  lt div class  quot container-fluid fill quot  gt       lt div class  quot row-fluid quot  gt           lt div class  quot fixed quot  gt    lt  -- we want this div to be fixed width -- gt                           lt  div gt           lt div class  quot hero-unit filler quot  gt    lt  -- we have removed spanX class -- gt                           lt  div gt       lt  div gt   lt  div gt   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   quot  quot       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   lt div class  quot container-fluid fill quot  gt           lt  div gt   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   quot  quot       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  lt div class  quot container-fluid fill quot  gt       lt div class  quot row-fluid quot  gt           lt div class  quot span3 quot  gt                           lt  div gt           lt div class  quot span9 hero-unit filler quot  gt                           lt  div gt       lt  div gt   lt  div gt   Notes  If you need the element on the left of the page to be the filler then you need to change right  0 to left  0

[css] How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to fluid-layout