How to increase padding between columns using Bootstrap 3.0

Question

I am relatively new to programming and am making a website using bootstrap 3.0.

I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".

My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?

Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.

Thanks in advance.

Dispersal

So a little confusing but looks like you want two rows within the center of the screen yet some padding in between the rows? Also, when you say 'row' you mean columns cause col-md is for columns and not creating rows! – Slip

Answer 1

Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.

Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.

<div class="container">
  <div class="row">
   <div class="col-md-2"></div><!-- empty -->
    <div class="col-md-4 margin">col-md-4</div>
    <div class="col-md-4 margin">col-md-4</div>
  </div>
</div>

CSS:

.margin {
  margin-left:10px;
  margin-right:10px;
  }

Demo: http://www.bootply.com/OS6FX9sie8#

Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.

Lyse

Thanks Shawn, thats the exact solution to my problem. – Heptahedron

great! usual SOP is to accept (check) and possibly +1 the answer when all is good:) – Lyse

Answer 2

looks like this is what you want

<div class="container">
  <div class="row">
     <div class="col-md-4 col-md-offset-2">col-md-4-offset</div>   
      <div class="col-md-4">col-md-4</div>
   </div>
 </div>

its perfectly fine to have column not add up to 12

here is a bootply

and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows

Wylde