Give Bootstrap 3 columns vertical margins

Question

I would like to know, what would be the usual approach to give Bootstrap 3 columns a margin. I likely don't want to hack Bootstrap CSS and wonder if I simply should apply additional classes, or if there is another good way?

Example:

<div class="row">
   <div class="col-lg-6 v-margin">
      <!-- some content -->
   </div>
</div>

and

.v-margin {
   margin: 25px 0;
}

Also I have read a few times that a padding is preferred due to, for me unknown, reasons. Can anyone can give a quick advice?

Thanks

Answer 1

You can choose a custom css in this case I will apply with a classname on the .row item if you want the same separate on the columns like this:

<div class="row v-margin">
   <div class="col-lg-6">
     <div>some content</div>
   </div>
   <div class="col-lg-6">
     <div>some content</div>
   </div>
</div>

Then with css apply padding:

.v-margin > div {
  padding:0 20px;
}
.v-margin > div:first-child {
  padding-left:40px;
}
.v-margin > div:last-child {
  padding-right:40px;
}

Check this BootplyDemo

---

Now why choose padding?

Because Bootstrap works with the property box:sizing:border-box and fixed width for the columns.

• If you use margin you will break the float layout because margin are aside the width value.

• Instead when you add padding it's included on the fixed width value with the box-sizing property.

Answer 2

bootstrap have jumbotron and wells those have large padding inside them

• http://getbootstrap.com/components/#jumbotron
• http://getbootstrap.com/components/#wells

and if we use them then we have to override their background because they use colors in their backgrounds . but they are not exact suitable for large containers.

now we will go to the exact answer below

i dont think so its bad idea because some times boostrap dont provide every thing you need . in order to meet your requirement its normal because you are adding your behaviour alongside bootstrap but its good when you handle it also as bootstrap working

for example according to devices if you control flow of the margin its fine.

@media (max-width: 767px) {
  .v-marg-small { margin: 5px 0;}	
  .v-marg-normal { margin: 10px 0;}
}
@media (min-width: 768px) {
	.v-marg-small { margin: 10px 0;}	
 	.v-marg-normal { margin: 15px 0;}
}
@media (min-width: 992px) {
	.v-marg-small { margin: 15px 0;}	
  	.v-marg-normal { margin: 20px 0;} 	
}
@media (min-width: 1200px) {
	.v-marg-small { margin: 20px 0;}	
  	.v-marg-normal { margin: 25px 0;}
}

on the other hand while handling your content

1. if you completely down your div and div have background or border
   then by giving margin will look like first box .
2. if you have background color or image or border of div then padding will look like second box. for better understanding i have attached image .