Bootstrap griding, columns proportions

Question

Can I or is not advised to change Bootstrap columns percentage to achieve different proportions. What I mean.

default

.col-lg-3 {
    width: 25%;
}

.col-lg-9 {
    width: 75%;
}

changing to

.col-lg-3 {
    width: 20%;
}

.col-lg-9 {
    width: 80%;
}

if so how and where do I change the less variables?

Answer 1

The .col-X-3 = 20% and a col-X-12 (NOT -9) is a 15 column grid not 12. You can do two things:

Go to the customizer (http://getbootstrap.com/customize/#grid-system)

And do this:

Then you will need to use different classes in your html since this is 100/15. You will see the new classes in the un-minified version of your download (at the bottom of the page).

If you use less, you would open up the variables.less locate the variable:

@grid-columns: 12;

COPY THAT. Create your OWN custom-variables.less file, import that after the bootstrap variables.less file in your import file and change the value:

@grid-columns: 15;

Then recompile with your application.

Otherwise, create your own columns in the min-width media query of your choice.

@media (min-width:1200px) {
  .col-custom {float:left;padding-left:15px;padding-right:15px;}
  .col-20p {width:20%;)
  .col-80p {width:80%;)
 }
}

<div class="container">
  <div class="row">
    <div class="col-custom col-20p">...</div>
    <div class="col-custom col-80p">...</div>
  </div>
</div>

Answer 2

Less Variables of Twitter Bootstrap can be edited, compiled and downloaded here: http://getbootstrap.com/customize/#less-variables

However, I don't think you can change percentages of columns via width - only control the number of columns, gutter width, breakpoints, etc.

You can, however create another CSS file to override Bootstrap's grid and make your own. But be cautious in changing those percentages, as one column will affect others. For example, you may have changed .col-lg-3 and col-lg-9 and they fit together - however when you start using four .col-lg-3, they won't fit anymore.

col-lg-3 + col-lg-9 
= 20% + 80% 
= 100%

col-lg-3 + col-lg-3 + col-lg-3 + col-lg-3 
= 20% + 20% + 20% + 20% 
= 80%

What I usually do, when a section needs custom percentage columns, I put an ID then override the bootstrap column inside that specific section, so the default column percentages of bootstrap won't be affected on other parts of the website like so:

HTML:

<div id="custom" class="row">
   <div class="col-lg-3">
      Some Content
   </div>

   <div class="col-lg-9">
      Some Content
   </div>
</div>

CSS:

#custom > .col-lg-3 {
   width: 20%;
}
#custom > .col-lg-9 {
   width: 80%;
}