Give bootstrap 3 columns of vertical fields

Question

I would like to know what would be the usual approach to give Bootstrap 3 columns. I probably don't want to hack Bootstrap CSS and wonder if I just need to apply extra 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; } 

I also read several times that indentation is preferable due to unknown reasons. Can anyone give some quick advice?

thanks

Answer 1

You can select custom css in this case, I apply with the class name in the .row element if you want it to be as separate in columns as 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 use css to 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 BootplyDemo

---

Now why choose padding ?

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

• If you use margin , you split the layout into a floating position, since the margin is away from the width value.

• Instead of adding padding it is included in the fixed-width value using the box-sizing property.

Answer 2

bootstrap have jumbotron and wells that have a large gasket inside them

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

and if we use them, we must redefine their background because they use colors in their background. but they are not suitable for large containers.

now we get to the exact answer below

I do not think this is his bad idea, because several times boostrap does not provide everything you need. in order to meet your requirements, this is normal, because you add your behavior next to the boot block, but it’s good when you treat it like a boot process

, for example, according to devices, if you control the flow of the field with your own 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, when working with content

• if you completely omit your div and div you have a background or border
  then providing the field will look like the first square.
• If you have a background color or an image or div border, padding will look like a second box. for better understanding, I added an image.