Can I give the col-md-1 5 in bootstrap

Question

I want to adjust the columns in Twitter Bo tstrap    I know in bootstrap there are 12 columns grid  Is there any way to manipulate the grids to have 1 5 3 5 3 5 3 5 instead of 3 3 3 3

User · Answer

As others mentioned in Bootstrap 3  you can use nest embed techniques   However it is becoming more obvious to use pretty awesome feature from  Bootstrap 4 now  you simple have the option to use the col- breakpoint -auto classes  e g  col-md-auto  to make columns size itself automatically based on the natural width of its content  check this for example

User · Answer

Create new classes to overwrite the width  See jFiddle for working code    lt div class  row  gt     lt div class  col-xs-1 col-xs-1-5  gt       lt div class  box  gt        box 1      lt  div gt     lt  div gt     lt div class  col-xs-3 col-xs-3-5  gt       lt div class  box  gt        box 2      lt  div gt     lt  div gt     lt div class  col-xs-3 col-xs-3-5  gt       lt div class  box  gt        box 3      lt  div gt     lt  div gt     lt div class  col-xs-3 col-xs-3-5  gt       lt div class  box  gt        box 4      lt  div gt     lt  div gt   lt  div gt    col-xs-1-5     width  12 49995      col-xs-3-5     width  29 16655      box     border  1px solid  000    text-align  center

User · Answer

You cloud also simply override the width of the Column      lt div class  col-md-1  style  width  12 499999995   gt  lt  div gt    Since col-md-1 is of width 8 33333333   simply multiply 8 33333333   1 5 and set it as your width   in bootstrap 4  you will have to override flex and max-width property too    lt div class  col-md-1  style  width  12 499999995       flex  0 0 12 499  max-width  12 499    gt  lt  div gt

User · Answer

The short answer is no  technically you can give whatever name of the class you want  but this will have no effect  unless you define your own CSS class - and remember - no dots in the class selector   The long answer is again no  because Bootstrap includes a responsive  mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases    Rows must be placed within a  container  fixed-width  or  container-fluid  full-width  for proper alignment and padding    Use rows to create horizontal groups of columns  Content should be placed within columns  and only columns may be immediate children of rows  Predefined grid classes like  row and  col-xs-4 are available for quickly making grid layouts  Less mixins can also be used for more semantic layouts  Columns create gutters  gaps between column content  via padding  That padding is offset in rows for the first and last column via negative margin on  rows  Grid columns are created by specifying the number of twelve available columns you wish to span  For example  three equal columns would use three  col-xs-4  If more than 12 columns are placed within a single row  each group of extra columns will  as one unit  wrap onto a new line  Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes  and override grid classes targeted at smaller devices  Therefore  e g  applying any  col-md-  class to an element will not only affect its styling on medium devices but also on large devices if a  col-lg-  class is not present    A possible solution to your problem is to define your own CSS class with desired width  let s say  col-half width XXXem  important  then add this class to elements you want along with original Bootstrap CSS classes

User · Answer

Bootstrap 4 uses flex-box and you can create your own column definitions  This is close to a 1 5  tweak to your own needs    col-1-5       flex  0 0 12 3       max-width  12 3       position  relative      width  100       padding-right  15px      padding-left  15px

User · Answer

This question is quite old  but I have made it that way  in TYPO3    Firstly  I have made a own accessible css-class which I can choose on every content element manually   Then  I have made a outer three column element with 11 columns  1 - 9 - 1   finally  I have modified the column width of the first and third column with CSS to 12 499999995

User · Answer

According to Rex Bloom response I have write a bootstrap helper    8 33333333  col-1   extra-col     position  relative    width  100     padding-right  15px    padding-left  15px      col-0-5      extend  extra-col    flex  0 0 4 16666667     max-width  4 16666667       col-1-5      extend  extra-col    flex  0 0 12 5     max-width  12 5       col-2-5      extend  extra-col    flex  0 0 20 833333325     max-width  20 833333325       col-3-5      extend  extra-col    flex  0 0 29 166666655     max-width  29 166666655       col-4-5      extend  extra-col    flex  0 0 37 499999985     max-width  37 499999985       col-5-5      extend  extra-col    flex  0 0 45 833333315     max-width  45 833333315       col-6-5      extend  extra-col    flex  0 0 54 166666645     max-width  54 166666645       col-7-5      extend  extra-col    flex  0 0 62 499999975     max-width  62 499999975       col-8-5      extend  extra-col    flex  0 0 70 833333305     max-width  70 833333305       col-9-5      extend  extra-col    flex  0 0 79 166666635     max-width  79 166666635       col-10-5      extend  extra-col    flex  0 0 87 499999965     max-width  87 499999965       col-11-5      extend  extra-col    flex  0 0 95 8333333     max-width  95 8333333

User · Answer

This is not Bootstrap Standard to give col-md-1 5 and you can not edit bootstrap min css because is not right way   you can create like this http   www bootply com 125259

User · Answer

you can use this code inside col-md-3   col-md-9   col-side-right    flex  0 0 20   important    max-width  20       col-side-left    flex  0 0 80     max-width  80

User · Answer

Bootstrap has column offsets  so if you want columns with equal width without specifying size use this   lt div class  quot row quot  gt     lt div class  quot col quot  gt col lt  div gt     lt div class  quot col quot  gt col lt  div gt     lt div class  quot col quot  gt col lt  div gt     lt div class  quot col quot  gt col lt  div gt   lt  div gt   Also check out this link https   getbootstrap com docs 4 0 layout grid  all-breakpoints

User · Answer

As  bodi0 correctly said  it is not possible  You either have to extent Bootstrap s grid system  you can search and find various solutions  here is a 7-column example  or use nested rows e g  http   bootply com dd50he9tGe    In the case of nested rows you might not always get the exact result but a similar one   lt div class  row  gt       lt div class  col-lg-5  gt           lt div class  row  gt               lt div class  col-lg-4  gt 1 67  close to 1 5  lt  div gt               lt div class  col-lg-8  gt 3 33  close to 3 5  lt  div gt           lt  div gt           lt  div gt       lt div class  col-lg-7  gt           lt div class  row  gt               lt div class  col-lg-6  gt 3 5 lt  div gt               lt div class  col-lg-6  gt 3 5 lt  div gt           lt  div gt           lt  div gt   lt  div gt

[html] Can I give the col-md-1.5 in bootstrap?

Examples related to html

Examples related to twitter-bootstrap