Five equal columns in twitter bootstrap

Question

I want to have 5 equal columns on a page I am building and I can t seem to understand how the 5 column grid is being used here  http   web archive org web 20120416024539 http   domain7 com mobile tools bootstrap responsive  Is the five column grid being demonstrated above part of the twitter bootstrap framework

User · Answer

For Bootstrap 4 4   Use the brand new row-cols-n classes    Add row-cols-5 class to your  row div  No custom CSS needed  See the 4 4 doc here for row-cols   https   getbootstrap com docs 4 4 layout grid  row-columns   For Bootstrap 4 versions prior to Bootstrap 4 4   Copy CSS below  awesome CSS by Bootstrap authors  and add it to your project Read the docs cited above to use it correctly    row-cols-1 gt   -ms-flex 0 0 100  flex 0 0 100  max-width 100   row-cols-2 gt   -ms-flex 0 0 50  flex 0 0 50  max-width 50   row-cols-3 gt   -ms-flex 0 0 33 333333  flex 0 0 33 333333  max-width 33 333333   row-cols-4 gt   -ms-flex 0 0 25  flex 0 0 25  max-width 25   row-cols-5 gt   -ms-flex 0 0 20  flex 0 0 20  max-width 20   row-cols-6 gt   -ms-flex 0 0 16 666667  flex 0 0 16 666667  max-width 16 666667   media  min-width 576px   row-cols-sm-1 gt   -ms-flex 0 0 100  flex 0 0 100  max-width 100   row-cols-sm-2 gt   -ms-flex 0 0 50  flex 0 0 50  max-width 50   row-cols-sm-3 gt   -ms-flex 0 0 33 333333  flex 0 0 33 333333  max-width 33 333333   row-cols-sm-4 gt   -ms-flex 0 0 25  flex 0 0 25  max-width 25   row-cols-sm-5 gt   -ms-flex 0 0 20  flex 0 0 20  max-width 20   row-cols-sm-6 gt   -ms-flex 0 0 16 666667  flex 0 0 16 666667  max-width 16 666667    media  min-width 768px   row-cols-md-1 gt   -ms-flex 0 0 100  flex 0 0 100  max-width 100   row-cols-md-2 gt   -ms-flex 0 0 50  flex 0 0 50  max-width 50   row-cols-md-3 gt   -ms-flex 0 0 33 333333  flex 0 0 33 333333  max-width 33 333333   row-cols-md-4 gt   -ms-flex 0 0 25  flex 0 0 25  max-width 25   row-cols-md-5 gt   -ms-flex 0 0 20  flex 0 0 20  max-width 20   row-cols-md-6 gt   -ms-flex 0 0 16 666667  flex 0 0 16 666667  max-width 16 666667    media  min-width 992px   row-cols-lg-1 gt   -ms-flex 0 0 100  flex 0 0 100  max-width 100   row-cols-lg-2 gt   -ms-flex 0 0 50  flex 0 0 50  max-width 50   row-cols-lg-3 gt   -ms-flex 0 0 33 333333  flex 0 0 33 333333  max-width 33 333333   row-cols-lg-4 gt   -ms-flex 0 0 25  flex 0 0 25  max-width 25   row-cols-lg-5 gt   -ms-flex 0 0 20  flex 0 0 20  max-width 20   row-cols-lg-6 gt   -ms-flex 0 0 16 666667  flex 0 0 16 666667  max-width 16 666667    media  min-width 1200px   row-cols-xl-1 gt   -ms-flex 0 0 100  flex 0 0 100  max-width 100   row-cols-xl-2 gt   -ms-flex 0 0 50  flex 0 0 50  max-width 50   row-cols-xl-3 gt   -ms-flex 0 0 33 333333  flex 0 0 33 333333  max-width 33 333333   row-cols-xl-4 gt   -ms-flex 0 0 25  flex 0 0 25  max-width 25   row-cols-xl-5 gt   -ms-flex 0 0 20  flex 0 0 20  max-width 20   row-cols-xl-6 gt   -ms-flex 0 0 16 666667  flex 0 0 16 666667  max-width 16 666667

User · Answer

I ve created SASS mixin definitions based on bootstrap definitions for any number of columns  personally beside 12 I use 8  10 and 24       Extended bootstrap grid system       Framework grid generation       Based on Bootstrap  bootstrap  grid-framework scss   Generates classes in form of   col- size -x-num  of width x num    mixin make-extended-grid-columns  num-columns   i  1   list    col-xs-   i -   num-columns    col-sm-   i -   num-columns    col-md-   i -   num-columns    col-lg-   i -   num-columns           for  i from  1   1  through  num-columns            list      list    col-xs-   i -   num-columns    col-sm-   i -   num-columns    col-md-   i -   num-columns    col-lg-   i -   num-columns                 list            position  relative          min-height  1px          padding-left     grid-gutter-width   2           padding-right    grid-gutter-width   2              mixin float-extended-grid-columns  class   num-columns   i  1   list    col-   class -   i -   num-columns           for  i from  1   1  through  num-columns            list      list    col-   class -   i -   num-columns                 list            float  left             mixin calc-extended-grid-column  index   num-columns   class   type         if   type    width  and   index  gt  0             col-   class -   index -   num-columns                width  percentage   index    num-columns                         if   type    push  and   index  gt  0             col-   class -push-   index -   num-columns                left  percentage   index    num-columns                         if   type    pull  and   index  gt  0             col-   class -pull-   index -   num-columns                right  percentage   index    num-columns                         if   type    offset  and   index  gt  0             col-   class -offset-   index -   num-columns                margin-left  percentage   index    num-columns                        mixin loop-extended-grid-columns  num-columns   class   type         for  i from 1 through  num-columns - 1            include calc-extended-grid-column  i   num-columns   class   type             mixin make-extended-grid  class   num-columns         include float-extended-grid-columns  class   num-columns        include loop-extended-grid-columns  num-columns   class  width        include loop-extended-grid-columns  num-columns   class  pull        include loop-extended-grid-columns  num-columns   class  push        include loop-extended-grid-columns  num-columns   class  offset       And you can simply create classes by    possible-number-extended-grid-columns  8  10  24    each  num-columns in  possible-number-extended-grid-columns         Columns     include make-extended-grid-columns  num-columns         Extra small grid     include make-extended-grid xs   num-columns         Small grid     media  min-width   screen-sm-min         include make-extended-grid sm   num-columns             Medium grid     media  min-width   screen-md-min         include make-extended-grid md   num-columns             Large grid     media  min-width   screen-lg-min         include make-extended-grid lg   num-columns            I hope someone will find it useful

User · Answer

This is awesome  http   www ianmccullough net 5-column-bootstrap-layout   Just do    lt div class  col-xs-2 col-xs-15  gt    And CSS    col-xs-15      width 20

User · Answer

My preferred approach to this problem is to create a SASS mixin utilizing existing Bootstrap variables based on the make-grid-columns mixin       Custom Grid Columns         name - determines the class names  eg    col-5ths   col-sm-5ths          size - determines the width  2 4 is one fifth of 12  the default number of columns   mixin custom-grid-columns  name   size   grid-columns   grid-columns   breakpoints   grid-breakpoints         columns  round  grid-columns    size         custom-grid-column            include make-col-ready                each  breakpoint in map-keys  breakpoints             infix  breakpoint-infix  breakpoint   breakpoints             col   infix -   name                 extend  custom-grid-column                      include media-breakpoint-up  breakpoint   breakpoints                   Create column              col   infix -   name                     include make-col  size                                 Create offset              if not   infix                         offset   infix -   name                         include make-col-offset  size                                                       Then you can call the mixin to generate the custom column and offset classes    include custom-grid-columns  5ths   2 4

User · Answer

Use five divs with a class of span2 and give the first a class of offset1    lt div class  row-fluid  gt       lt div class  span2 offset1  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt   lt  div gt    Voila  Five equally spaced and centered columns     In bootstrap 3 0  this code would look like   lt div class  row  gt       lt div class  col-md-2 col-md-offset-1  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt   lt  div gt

User · Answer

How You can add 5 columns grid in bootstrap   x000D   x000D   col-lg-1-5  col-md-1-5  col-sm-1-5  col-xs-1-5 min-height 1px padding-left 15px padding-right 15px position relative  width 100  box-sizing border-box   x000D   item width 100  height 100px  background-color  cfcfcf   x000D   col-xs-1-5 width  20  float left     x000D   x000D   media  min-width  767px    col-sm-1-5 width  20  float left     x000D   media  min-width  992px    col-md-1-5 width  20  float left     x000D   media  min-width  1200px    col-lg-1-5 width  20  float left     x000D   lt div class  row  gt  x000D     lt div class  col-sm-1-5  gt  x000D       lt div class  item  gt Item 1 lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-1-5  gt  x000D       lt div class  item  gt Item 2 lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-1-5  gt  x000D       lt div class  item  gt Item 3 lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-1-5  gt  x000D       lt div class  item  gt Item 4 lt  div gt  x000D     lt  div gt  x000D     lt div class  col-sm-1-5  gt  x000D       lt div class  item  gt Item 5 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

var cols       container  item   length  if  cols    5          div item   removeClass  col-md-2  etc   addClass  col-md-3   css  width    20          Jquery and Done  Framework

User · Answer

Bootstrap or other grid system it doesn t always mean simpler and better  Inside your  container or  row  to keep your responsive layout  u can just create 5 divs  with class  col f e   and add css like this   col   width  20   float  left     update  nowodays its better to use flexbox

User · Answer

I voted up Mafnah s answer but looking at this again I d suggest the following is better if you re keeping the default margins etc    lt div class  equal row-fluid  gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt   lt  div gt    equal  span2       width  17 9

User · Answer

Below is a combo of  machineaddict and  Mafnah answers  re-written for Bootstrap 3  working well for me so far     media  min-width  768px        fivecolumns  col-md-2   fivecolumns  col-sm-2   fivecolumns  col-lg-2            width  20            width  20            media  min-width  1200px         fivecolumns  col-md-2   fivecolumns  col-sm-2   fivecolumns  col-lg-2           width  20            width  20            media  min-width  768px  and  max-width  979px         fivecolumns  col-md-2   fivecolumns  col-sm-2   fivecolumns  col-lg-2           width  20            width  20

User · Answer

the easiest solution without any need to edit CSS would be    lt div class  row  gt     lt div class  btn-group btn-group-justified  gt       lt div class  btn-group  gt         lt div class  col-sm-12  gt Column 1 lt  div gt       lt  div gt       lt div class  btn-group  gt         lt div class  col-sm-12  gt Column 2 lt  div gt       lt  div gt       lt div class  btn-group  gt         lt div class  col-sm-12  gt Column 3 lt  div gt       lt  div gt       lt div class  btn-group  gt         lt div class  col-sm-12  gt Column 4 lt  div gt       lt  div gt       lt div class  btn-group  gt         lt div class  col-sm-12  gt Column 5 lt  div gt       lt  div gt     lt  div gt   lt  div gt    And if you need those to break beyond any breakpoint  just make btn-group block  Hope this helps someone

User · Answer

x000D   x000D   col-xs-2-4   x000D    position  relative  x000D    float  left  x000D    width  20   x000D    min-height  1px  x000D    padding-left  15px  x000D    padding-right  15px  x000D    x000D   col-sm-2-4   x000D    position  relative  x000D    min-height  1px  x000D    padding-left  15px  x000D    padding-right  15px  x000D    x000D   media  min-width  768px    x000D     col-sm-2-4   x000D      float  left  x000D      width  20   x000D      x000D    x000D   col-md-2-4   x000D    position  relative  x000D    min-height  1px  x000D    padding-left  15px  x000D    padding-right  15px  x000D    x000D   media  min-width  992px    x000D     col-md-2-4   x000D      float  left  x000D      width  20   x000D      x000D    x000D   col-lg-2-4   x000D    position  relative  x000D    min-height  1px  x000D    padding-left  15px  x000D    padding-right  15px  x000D    x000D   media  min-width  1200px    x000D     col-lg-2-4   x000D      float  left  x000D      width  20   x000D      x000D    x000D   x000D   x000D

User · Answer

5 columns layout with Twitter Bootstrap style   col-xs-15       position  relative      min-height  1px      padding-right  10px      padding-left  10px      col-xs-15       width  100       float  left     media  min-width  768px     col-xs-15           width  50           float  left           media  min-width  992px         col-xs-15           width  20           float  left           media  min-width  1200px         col-xs-15           width  20           float  left

User · Answer

With flexbox http   output jsbin com juziwu   x000D   x000D   flexrow   x000D    display  flex  x000D    background  lightgray    for debug   x000D    x000D   flexrow  gt      x000D    flex  1  x000D    margin  1em  x000D    outline  auto green  x000D    x000D   lt div class  flexrow  gt  x000D     lt div gt     lt  div gt  x000D     lt div gt     lt  div gt  x000D     lt div gt     lt  div gt  x000D     lt div gt     lt br gt    lt  div gt  x000D     lt div gt     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use the little trick to make the col-md-2 with offsets solution full width  It use the way that bootstrap does to remove hide  15px paddings   I mean by adding  -  margins  Actually the calc -10  - 15px   margins for both side   10  is the offset width and 15px for the padding    The only minus is it will make the page scroll horizontal so you will need the overflow-x hidden on the parent of the row   css   row-xs-5       margin-left  calc -10  - 15px       margin-right  calc -10  - 15px      media  min-width  768px       row-sm-5       margin-left  calc -10  - 15px       margin-right  calc -10  - 15px          media  min-width  992px       row-md-5       margin-left  calc -10  - 15px       margin-right  calc -10  - 15px          media  min-width  1200px       row-lg-5       margin-left  calc -10  - 15px       margin-right  calc -10  - 15px          html   lt div style  overflow-x hidden   gt     lt div class  row row-md-5  gt       lt div class  col-xs-6 col-md-2 col-md-offset-1  gt col1 lt  div gt       lt div class  col-xs-6 col-md-2  gt col2 lt  div gt       lt div class  col-xs-6 col-md-2  gt col3 lt  div gt       lt div class  col-xs-6 col-md-2  gt col4 lt  div gt       lt div class  col-xs-6 col-md-2 text-right  gt col5 lt  div gt     lt  div gt   lt  div gt    Here is demo  http   jsfiddle net sct3j 171

User · Answer

In my opinion it is better to use it like this with Less syntax  This answer is based on the answer from  fizzix  This way columns use variables   grid-gutter-width  media breakpoints  that user may have overriden and the behavior of five columns matches with behavior of 12 column grid         Special grid for ten columns      using its own scope     so it does not interfere with the rest of the code       amp         import  multiple      bootstrap-3 2 0 less variables less        grid-columns  5       import   multiple      bootstrap-3 2 0 less mixins less         column  1       col-xs-5ths            make-xs-column  column               col-sm-5ths            make-sm-column  column               col-md-5ths            make-md-column  column               col-lg-5ths            make-lg-column  column                                                         Using default bootstrap now                                             import   multiple      bootstrap-3 2 0 less variables less    import   multiple      bootstrap-3 2 0 less mixins less           your normal less definitions

User · Answer

lt div class  equal row-fluid  gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt       lt div class  span2  gt  lt  div gt   lt  div gt    equal  span2       width  20

User · Answer

Is someone uses bootstrap-sass  v3   here is simple code for 5 columns using bootstrap mixings      col-xs-5ths         include make-xs-column 2 4           media  min-width   screen-sm-min          col-sm-5ths            include make-sm-column 2 4                  media  min-width   screen-md-min          col-md-5ths            include make-md-column 2 4                  media  min-width   screen-lg-min          col-lg-5ths            include make-lg-column 2 4                Make sure you have included    import  bootstrap variables    import  bootstrap mixins

User · Answer

An improvisation on  lightswitch s answer  if we need a 5 column grid using LESS iterations   make-fifth-col  index  when   index  gt  0       class-name     col-md-5th-  index         class-name         make-md-column 1 2  index           make-fifth-col  index - 1       make-fifth-col 10     This will generate css classes  col-md-5th-1  col-md-5th-2  col-md-5th-3  and so on which corresponds to 10   20   30     respectively

User · Answer

For Bootstrap 3 and above  A fantastic full width 5 columns layout with Twitter Bootstrap was created here   This is by far the most advanced solution since it works seamlessly with Bootstrap 3  It allows you to re-use the classes over and over again  in pair with the current Bootstrap classes for responsive design   CSS  Add this to your global stylesheet  or even to the bottom of your bootstrap css document    col-xs-5ths   col-sm-5ths   col-md-5ths   col-lg-5ths       position  relative      min-height  1px      padding-right  15px      padding-left  15px      col-xs-5ths       width  20       float  left      media  min-width  768px         col-sm-5ths           width  20           float  left            media  min-width  992px         col-md-5ths           width  20           float  left            media  min-width  1200px         col-lg-5ths           width  20           float  left            Put it to use For example  if you want to create a div element that behaves like a five column layout on medium screens and like two columns on smaller ones  you just need to use something like this    lt div class  row  gt       lt div class  col-md-5ths col-xs-6  gt                  lt  div gt   lt  div gt    WORKING DEMO - Expand the frame to see the columns become responsive   ANOTHER DEMO - Incorporating the new col- -5ths classes with others such as col- -3 and col- -2  Resize the frame to see them all change to col-xs-6 in responsive view     For Bootstrap 4  Bootstrap 4 now uses flexbox by default  so you get access to its magical powers straight out of the box  Check out the auto layout columns that dynamically adjust width depending on how many columns are nested   Here s an example    lt div class  row  gt      lt div class  col  gt        1 of 5     lt  div gt      lt div class  col  gt        2 of 5     lt  div gt      lt div class  col  gt        3 of 5     lt  div gt      lt div class  col  gt        4 of 5     lt  div gt      lt div class  col  gt        5 of 5     lt  div gt   lt  div gt    WORKING DEMO

User · Answer

the bootstrap grid system as parted in 12 grid So i parted it to two grid  7 5  This 7 and 5 are also contain full 12 grid Thats why i parted 7 4 4 4  and 5 6 6  so it will take all content simple  HTML   lt div class  col-sm-12  gt     lt div class  row  gt       lt div class  col-sm-7 five-three  gt         lt div class  row  gt           lt div class  col-sm-4  gt            Column 1          lt  div gt           lt div class  col-sm-4  gt            Column 2          lt  div gt           lt div class  col-sm-4  gt            Column 3          lt  div gt         lt  div gt       lt  div gt       lt div class  col-sm-5 five-two  gt         lt div class  row  gt           lt div class  col-sm-6  gt            Col 4          lt  div gt           lt div class  col-sm-6  gt            Col 5          lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    CSS  div col-sm-7 five-three     width  60   important    div col-sm-5 five-two     width  40   important

User · Answer

Keep the original bootstrap with 12 columns  do not customize it  The only modification you need to make is some css after the original bootstrap responsive css  like this   The following code has been tested for Bootstrap 2 3 2    lt style type  text css  gt     start of modification for 5 columns     media  min-width  768px        fivecolumns  span2           width  18 297872340425532            width  18 2234042553191494            media  min-width  1200px         fivecolumns  span2           width  17 9487179487179488            width  17 87424986361156592            media  min-width  768px  and  max-width  979px         fivecolumns  span2           width  17 79005524861878448            width  17 7155871635124022              end of modification for 5 columns     lt  style gt    And the html    lt div class  row-fluid fivecolumns  gt       lt div class  span2  gt           lt h2 gt Heading lt  h2 gt           lt p gt Donec id elit non mi porta gravida at eget metus  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui   lt  p gt           lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt       lt  div gt       lt div class  span2  gt           lt h2 gt Heading lt  h2 gt           lt p gt Donec id elit non mi porta gravida at eget metus  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  Etiam porta sem malesuada magna mollis euismod  Donec sed odio dui   lt  p gt           lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt       lt  div gt       lt div class  span2  gt           lt h2 gt Heading lt  h2 gt           lt p gt Donec sed odio dui  Cras justo odio  dapibus ac facilisis in  egestas eget quam  Vestibulum id ligula porta felis euismod semper  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  lt  p gt           lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt       lt  div gt       lt div class  span2  gt           lt h2 gt Heading lt  h2 gt           lt p gt Donec sed odio dui  Cras justo odio  dapibus ac facilisis in  egestas eget quam  Vestibulum id ligula porta felis euismod semper  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  lt  p gt           lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt       lt  div gt       lt div class  span2  gt           lt h2 gt Heading lt  h2 gt           lt p gt Donec sed odio dui  Cras justo odio  dapibus ac facilisis in  egestas eget quam  Vestibulum id ligula porta felis euismod semper  Fusce dapibus  tellus ac cursus commodo  tortor mauris condimentum nibh  ut fermentum massa justo sit amet risus  lt  p gt           lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt       lt  div gt   lt  div gt    Note  Even though the span2 times 5 doesn t equal 12 columns  you get the idea     A working example can be found here http   jsfiddle net v3Uy5 6

User · Answer

In bootstrap v4 3 1  it   s a column which is 12   5   2 4 columns wide  let   s call it col-2dot4  and col-sm-2dot4  col-md-2dot4         And each column should have 20  of the available space   The SCSS code which comes out as below    mixin make-5-grid-column  columns   grid-columns   gutter   grid-gutter-width   breakpoints   grid-breakpoints          Common properties for all breakpoints    grid-column       position  relative      width  100       padding-right   gutter   2      padding-left   gutter   2          each  breakpoint in map-keys  breakpoints         infix  breakpoint-infix  breakpoint   breakpoints         col   infix -2dot4          extend  grid-column              col   infix        col   infix -auto          extend  grid-column              include media-breakpoint-up  breakpoint   breakpoints              Provide basic   col- bp   classes for equal-width flexbox columns        col   infix            flex-basis  0          flex-grow  1          max-width  100                   col   infix -auto           flex  0 0 auto          width  auto          max-width  100      Reset earlier grid tiers                  col   infix -2dot4            include make-col 1  5                         if  enable-grid-classes      include make-5-grid-column

User · Answer

In bootstrap 3  I think we can do something like that  for remove left and right margin     lt div class  row this row  gt       lt div class  col-md-2 col-md-offset-1  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt       lt div class  col-md-2  gt  lt  div gt   lt  div gt    and CSS   this row       margin  0 -5

User · Answer

It can be done with nesting and using a little css over-ride    lt div class  col-sm-12  gt   lt div class  row  gt     lt div class  col-sm-7 five-three  gt       lt div class  row  gt         lt div class  col-sm-4  gt        Column 1        lt  div gt         lt div class  col-sm-4  gt        Column 2        lt  div gt         lt div class  col-sm-4  gt        Column 3        lt  div gt  lt  -- end inner row -- gt       lt  div gt     lt  div gt     lt div class  col-sm-5 five-two  gt       lt div class  row  gt         lt div class  col-sm-6  gt          Col 4        lt  div gt         lt div class  col-sm-6  gt        Col 5        lt  div gt       lt  div gt  lt  -- end inner row -- gt     lt  div gt   lt  div gt   lt  -- end outer row -- gt      Then some css   media   min-width  768px    div col-sm-7 five-three   width  60   important     div col-sm-5 five-two   width  40   important         Here is an example  5 equal column example  And here is my full write up on coderwall  Five equal columns in bootstrap 3

User · Answer

A solution that do not require a lot of CSS  nor tweaking bootstrap default 12col layout   http   jsfiddle net 0ufdyeur 1   HTML    lt div class  stretch  gt     lt div class  col-lg-2  gt  lt  div gt     lt div class  col-lg-2  gt  lt  div gt     lt div class  col-lg-2  gt  lt  div gt     lt div class  col-lg-2  gt  lt  div gt     lt div class  col-lg-2  gt  lt  div gt   lt  div gt    CSS    media  min-width  1200px      if not lg  change this criteria      stretch      width  120     the actual trick

User · Answer

boostrap comes today with the possibility to fill a row evenly with built-in class that do not tell how many columns out of twelve to span    you can use a col col-xx      x000D   x000D  div div div   x000D    border  solid  x000D    margin  2px    this can be added without breaking the row    x000D    x000D  div div div before   x000D  content attr class     show class used    x000D  color crimson x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 1 3 css bootstrap min css  rel  stylesheet    gt  x000D   lt p gt Class used   play snippet in full page to test behavior on resizing   lt  p gt  x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-sm  gt  lt  div gt  x000D       lt div class  col-sm  gt  lt  div gt  x000D       lt div class  col-sm  gt  lt  div gt  x000D       lt div class  col-sm  gt  lt  div gt  x000D       lt div class  col-sm  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt div class  col-md  gt  lt  div gt  x000D       lt div class  col-md  gt  lt  div gt  x000D       lt div class  col-md  gt  lt  div gt  x000D       lt div class  col-md  gt  lt  div gt  x000D       lt div class  col-md  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt div class  col  gt  lt  div gt  x000D       lt div class  col  gt  lt  div gt  x000D       lt div class  col  gt  lt  div gt  x000D       lt div class  col  gt  lt  div gt  x000D       lt div class  col  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    flex-grow-x could be used too   x000D   x000D  div div div   x000D    border  solid  x000D       it allows margins too    x000D    margin  3px  x000D    x000D   x000D  div div div before   x000D    content  attr class   x000D       show class used    x000D    color  crimson x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 1 3 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  flex-grow-1  gt  lt  div gt  x000D       lt div class  flex-grow-1  gt  lt  div gt  x000D       lt div class  flex-grow-1  gt  lt  div gt  x000D       lt div class  flex-grow-1  gt  lt  div gt  x000D       lt div class  flex-grow-1  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Five columns are clearly not the part of bootstrap by design   But with Bootstrap v4  alpha   there are 2 things to help with a complicated grid layout   Flex  http   v4-alpha getbootstrap com getting-started flexbox    the new element type  official - https   www w3 org TR css-flexbox-1   Responsive utilities  http   v4-alpha getbootstrap com layout responsive-utilities     In simple term  I m using   lt style gt   flexc   display  flex  align-items  center  padding  0  justify-content  center     flexc a   display  block  flex  auto  text-align  center  flex-basis  0     lt  style gt   lt div class  container flexc hidden-sm-down  gt     lt  -- content to show in MD and larger viewport -- gt     lt a href     gt Link Col 1 lt  a gt     lt a href     gt Link Col 2 lt  a gt     lt a href     gt Link Col 3 lt  a gt     lt a href     gt Link Col 4 lt  a gt     lt a href     gt Link Col 5 lt  a gt   lt  div gt   lt div class  container hidden-md-up  gt     lt  -- content to show in SM and smaller viewport  I don t think 5 cols in smaller viewport are gonna be alright    -- gt   lt  div gt    Be it 5 7 9 11 13 or something odds  it ll be okay  I m quite sure that 12-grids standard is able to serve more than 90  of use case - so let s design that way - develop more easier too   The nice flex tutorial is here  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

Another way to enable 5 columns in Bootstrap 3 is to modify the 12 columns format used by default by Bootstrap  And then create a 20 columns grid  use customize on the Bootstrap website OR use the LESS SASS version    To customize on the bootstrap website  go to Customize and Download page  update variable   grid-columns from 12 to 20  Then you will be able to create 4 as well as 5 columns

User · Answer

col-half-offset      margin-left 4 166666667   important      float  left      lt div className  row1 marginTop20  gt       lt div className  col-xs-12 col-sm-2 col-md-2  gt          1      lt  div gt       lt div className  col-xs-12 col-sm-2 col-md-2 col-half-offset  gt          2      lt  div gt       lt div className  col-xs-12 col-sm-2 col-md-2 col-half-offset  gt          3      lt  div gt       lt div className  col-xs-12 col-sm-2 col-md-2 col-half-offset  gt          4      lt  div gt       lt div className  col-xs-12 col-sm-2 col-md-2 col-half-offset  gt          5      lt  div gt       lt div className  clearfix  gt  lt  div gt   lt  div gt

User · Answer

For Bootstrap 3  if you want full-width and are using LESS  SASS  or something similar  all you have to do is make use of Bootstrap s mixin functions make-md-column  make-sm-column  etc   LESS    col-lg-2-4     make-lg-column 2 4     col-md-2-4     make-md-column 2 4     col-sm-2-4     make-sm-column 2 4      SASS    col-lg-2-4     include make-lg-column 2 4     col-md-2-4     include make-md-column 2 4     col-sm-2-4     include make-sm-column 2 4      Not only can you build true full-width bootstrap column classes using these mixins  but you can also build all the related helper classes like  col-md-push-    col-md-pull-   and  col-md-offset-    LESS    col-md-push-2-4     make-md-column-push 2 4     col-md-pull-2-4     make-md-column-pull 2 4     col-md-offset-2-4     make-md-column-offset 2 4      SASS    col-md-push-2-4     include make-md-column-push 2 4     col-md-pull-2-4     include make-md-column-pull 2 4     col-md-offset-2-4     include make-md-column-offset 2 4      Other answers talk about setting  gridColumns which is perfectly valid  but that changes the core column width for all of bootstrap  Using the above mixin functions will add 5 column layout on top of the default bootstrap columns  so it will not break any 3rd party tools or existing styling

User · Answer

For twitter bootstrap 3 this is the most simple way to achieve this    lt section class  col col-sm-3  style  width  20    gt   lt section class  col col-sm-3  style  width  20    gt   lt section class  col col-sm-3  style  width  20    gt   lt section class  col col-sm-3  style  width  20    gt   lt section class  col col-sm-3  style  width  20    gt

User · Answer

In case you do no need the exact same width of columns you can try create 5-columns using nesting    lt div class  container  gt       lt div class  row  gt           lt div class  col-xs-5  gt               lt div class  row  gt                   lt div class  col-xs-6 column  gt Column 1 lt  div gt                   lt div class  col-xs-6 column  gt Column 2 lt  div gt               lt  div gt           lt  div gt           lt div class  col-xs-7  gt               lt div class  row  gt                   lt div class  col-xs-4 column  gt Column 3 lt  div gt                   lt div class  col-xs-4 column  gt Column 4 lt  div gt                   lt div class  col-xs-4 column  gt Column 5 lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    jsfiddle  The first two columns will have width equal 5 12   1 2   20 83   The last three columns   7 12   1 3   19 44   Such hack gives the acceptable result in many cases and does not require any CSS changes  we re using only the native bootstrap classes

User · Answer

Bootstrap 4  variable number of columns per row  If you want to have up to five columns per row  so that fewer numbers of columns still only take up 1 5th of the row each  the solution is to use Bootstrap 4 s mixins   SCSS    col-2-4        include make-col-ready       apply standard column margins  padding  etc       include make-col 2 4      12 5   2 4    col-sm-2-4        include make-col-ready         include media-breakpoint-up sm             include make-col 2 4            col-md-2-4        include make-col-ready         include media-breakpoint-up md             include make-col 2 4            col-lg-2-4        include make-col-ready         include media-breakpoint-up lg             include make-col 2 4            col-xl-2-4        include make-col-ready         include media-breakpoint-up xl             include make-col 2 4             HTML    lt div class  container  gt         lt div class  row  gt       lt div class  col-12 col-sm-2-4  gt 1 of 5 lt  div gt       lt div class  col-12 col-sm-2-4  gt 2 of 5 lt  div gt       lt div class  col-12 col-sm-2-4  gt 3 of 5 lt  div gt       lt div class  col-12 col-sm-2-4  gt 4 of 5 lt  div gt       lt div class  col-12 col-sm-2-4  gt 5 of 5 lt  div gt     lt  div gt     lt div class  row  gt       lt div class  col-12 col-sm-2-4  gt 1 of 2 lt  div gt   lt  -- same width as column  1 of 5  above -- gt       lt div class  col-12 col-sm-2-4  gt 2 of 2 lt  div gt   lt  -- same width as column  2 of 5  above -- gt     lt  div gt   lt  div gt

User · Answer

By default Bootstrap does not provide grid system that allows us to create five columns layout  you need to create default column definition in the way that Bootstrap do create some custom classes and media queries in your css file   col-xs-15   col-sm-15   col-md-15   col-lg-15       position  relative      min-height  1px      padding-right  10px      padding-left  10px     col-xs-15       width  20       float  left     media  min-width  768px     col-sm-15           width  20           float  left           media  min-width  992px         col-md-15           width  20           float  left           media  min-width  1200px         col-lg-15           width  20           float  left            and some html code   lt div class  row  gt       lt div class  col-md-15 col-sm-3  gt               lt  div gt   lt  div gt

User · Answer

Update 2019 Bootstrap 4 1  Here are 5 equal  full-width columns  no extra CSS or SASS  using the auto-layout grid   lt div class  quot container-fluid quot  gt       lt div class  quot row quot  gt           lt div class  quot col quot  gt 1 lt  div gt           lt div class  quot col quot  gt 2 lt  div gt           lt div class  quot col quot  gt 3 lt  div gt           lt div class  quot col quot  gt 4 lt  div gt           lt div class  quot col quot  gt 5 lt  div gt       lt  div gt   lt  div gt   http   codeply com go MJTglTsq9h This solution works because Bootstrap 4 is now flexbox  You can get the 5 columns to wrap within the same  row using a break such as  lt div class  quot col-12 quot  gt  lt  div gt  or  lt div class  quot w-100 quot  gt  lt  div gt  every 5 columns  Also see  Bootstrap - 5 column layout

User · Answer

BOOTSTRAP 4  I read all answers and I didn t find  the obvious one   Basically what you need to do is to take any bootstrap column  for example col-2  and edit few values  In this example I am using  col-custom class   Five equal columns means each one occupies 20   so  flex 0 0 20  and max-width 20   The same way you can create other number of columns  7  9  11  84 or whatever you want    You can create CSS variables with custom width  and use it in your projects  Something like that    root     --col-custom  20       col-custom     flex  0 0 var --col-custom     max-width  var --col-custom         Working example    x000D   x000D   col-custom  x000D   col-sm-custom  x000D   col-md-custom  x000D   col-lg-custom  x000D   col-xl-custom   x000D    position  relative  x000D    width  100   x000D    padding-right  15px  x000D    padding-left  15px  x000D    x000D   x000D   col-custom   x000D    flex  0 0 20   x000D    max-width  20   x000D    x000D   x000D   media  min-width  576px   x000D     col-sm-custom   x000D      flex  0 0 20   x000D      max-width  20   x000D      x000D    x000D   media  min-width  768px   x000D     col-md-custom   x000D      flex  0 0 20   x000D      max-width  20   x000D      x000D    x000D   media  min-width  992px   x000D     col-lg-custom   x000D      flex  0 0 20   x000D      max-width  20   x000D      x000D    x000D   media  min-width  1200px   x000D     col-xl-custom   x000D      flex  0 0 20   x000D      max-width  20   x000D      x000D    x000D   x000D    DEMO   x000D   col-custom  col-sm-custom  col-md-custom  col-lg-custom  col-xl-custom height 100px border 1px red solid  x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt  x000D   x000D   lt div class  container-fluid  gt  x000D     lt div class  row  gt  x000D       lt div class  col-sm-custom  gt  lt  div gt  x000D       lt div class  col-sm-custom  gt  lt  div gt  x000D       lt div class  col-sm-custom  gt  lt  div gt  x000D       lt div class  col-sm-custom  gt  lt  div gt  x000D       lt div class  col-sm-custom  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Create 5 elements with the class col-sm-2 and add to the first element also the class col-sm-offset-1    P s  this will not be full width  it will be indented a little from the right and left of the screen     The code should look something like this    lt div class  col-sm-2 col-sm-offset-1  gt  lt  div gt   lt div class  col-sm-2  gt  lt  div gt   lt div class  col-sm-2  gt  lt  div gt   lt div class  col-sm-2  gt  lt  div gt   lt div class  col-sm-2  gt  lt  div gt

User · Answer

Create a custom Bootstrap download for 5 column layout Go to Bootstrap 2 3 2  or Bootstrap 3  customization page and set the following variables  don t input semicolons    gridColumns            5   gridColumnWidth        172px   gridColumnWidth1200    210px   gridColumnWidth768     128px   gridGutterWidth768     21px   Download your build  This grid would fit into default containers  preserving default gutter widths  almost   Note  If you are using LESS  update variables less instead

User · Answer

Just create a new class and define its behaviour per each each media query as needed   media min-width  768px      col-1-5      width  20       float  left      position  relative      min-height  1px      padding-right  5px      padding-left  5px          lt div class  container-fluid  gt     lt div class  row  gt       lt div class  col-1-5  gt col 1 lt  div gt       lt div class  col-1-5  gt col 2 lt  div gt       lt div class  col-1-5  gt col 3 lt  div gt       lt div class  col-1-5  gt col 4 lt  div gt       lt div class  col-1-5  gt col 5 lt  div gt     lt  div gt   lt  div gt    here is a working demo https   codepen io giorgosk pen BRVorW

User · Answer

Bootstrap by default can scale up to 12 columns  This means if we want to create a 12-column layout of equal width  we would write inside div class  col-md-1  twelve times    lt div class  row  gt   lt div class  col-md-1  gt  lt  div gt       lt div class  col-md-2  gt 1 lt  div gt   lt div class  col-md-2  gt 2 lt  div gt   lt div class  col-md-2  gt 3 lt  div gt   lt div class  col-md-2  gt 4 lt  div gt   lt div class  col-md-2  gt 5 lt  div gt   lt div class  col-md-1  gt  lt  div gt   lt  div gt

[twitter-bootstrap] Five equal columns in twitter bootstrap

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4