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.

Solution 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.

Solution 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