Bootstrap 3 0 - Fluid Grid that includes Fixed Column Sizes

Question

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

User · Answer

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    lt div gt       lt div class  pull-left  style  width 240px  gt Fixed 240px lt  div gt       lt div class  pull-right  style  width 120px  gt Fixed 120px lt  div gt       lt div style  margin-left 240px margin-right 120px  gt           lt div class  row  style  margin 0px  gt              Standard grid system content here          lt  div gt       lt  div gt   lt  div gt

User · Answer

OK  my answer is super nice    lt style gt       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          lt  style gt    lt div id  wrapper  gt     lt div class  static240  style  background red    gt   lt  div gt     lt div class  static160   style  background  green    gt   lt  div gt      lt div class  growMax   style  background yellow     gt  lt  div gt   lt  div gt    jsfiddle playground  if you wanna support for all browser  use https   github com 10up flexibility

User · Answer

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   lt div class  container  gt       lt div class  row  gt           lt div class  col-fixed-240  gt Fixed 240px lt  div gt           lt div class  col-fixed-160  gt Fixed 160px lt  div gt           lt div class  col-md-12 col-offset-400  gt               lt div class  row  gt              Standard grid system content here              lt  div gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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     lt li class  grid-list-header row-cw row-cw-msg-list      gt     lt div class  col-md-1 col-cw col-cw-name  gt     lt div class  col-md-1 col-cw col-cw-keyword  gt     lt div class  col-md-1 col-cw col-cw-reply  gt     lt div class  col-md-1 col-cw col-cw-action  gt   lt  li gt    lt li class  grid-list-item row-cw row-cw-msg-list      gt     lt div class  col-md-1 col-cw col-cw-name  gt     lt div class  col-md-1 col-cw col-cw-keyword  gt     lt div class  col-md-1 col-cw col-cw-reply  gt     lt div class  col-md-1 col-cw col-cw-action  gt   lt  li gt      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    x000D   x000D  ul   x000D    list-style  none  x000D    x000D   row-cw   x000D    position  relative  x000D    height  20px  x000D    x000D   col-cw   x000D    position  absolute  x000D    top  0  x000D    background-color  rgba 150  150  150   5   x000D    x000D   row-cw-msg-list   x000D    padding-right  270px  x000D    x000D   col-cw-name   x000D    width  50   x000D    background-color  rgba 150  0  0   5   x000D    x000D   col-cw-keyword   x000D    width  50   x000D    background-color  rgba 0  150  0   5   x000D    x000D   col-cw-reply   x000D    width  140px  x000D    right  130px  x000D    background-color  rgba 0  0  150   5   x000D    x000D   col-cw-action   x000D    width  130px  x000D    right  0  x000D    background-color  rgba 150  150  0   5   x000D    x000D   lt ul class  ir-msg-list  gt  x000D     lt li class  grid-list-header row-cw row-cw-msg-list  gt  x000D       lt div class  col-md-1 col-cw col-cw-name  gt name lt  div gt  x000D       lt div class  col-md-1 col-cw col-cw-keyword  gt keyword lt  div gt  x000D       lt div class  col-md-1 col-cw col-cw-reply  gt reply lt  div gt  x000D       lt div class  col-md-1 col-cw col-cw-action  gt action lt  div gt  x000D     lt  li gt  x000D   x000D     lt li class  grid-list-item row-cw row-cw-msg-list  gt  x000D       lt div class  col-md-1 col-cw col-cw-name  gt name lt  div gt  x000D       lt div class  col-md-1 col-cw col-cw-keyword  gt keyword lt  div gt  x000D       lt div class  col-md-1 col-cw col-cw-reply  gt reply lt  div gt  x000D       lt div class  col-md-1 col-cw col-cw-action  gt action lt  div gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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   lt div class  table-layout  gt       lt div class  table-cell fixed-width-200  gt           lt p gt fixed width div lt  p gt       lt  div gt       lt div class  table-cell  gt           lt p gt fluid width div lt  p gt           lt  div gt   lt  div gt    http   jsfiddle net DnGDz

User · Answer

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    lt div class  row  gt       lt div class  fixed-1  gt Left 1 lt  div gt       lt div class  fixed-2  gt Left 2 lt  div gt       lt div class  row  gt           lt div class  col-md-1  gt  lt  div gt           lt div class  col-md-11  gt  lt  div gt       lt  div gt   lt  div gt

User · Answer

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

[twitter-bootstrap] Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3