Vertical space when stacking columns in Bootstrap 3

Question

When the columns fit in mobile mode, I would like some vertical space to separate the contents of the column, how can I do this?

See jsfiddle at http://jsfiddle.net/tofutim/3sWEN/ and change the output width. There should be some distance between the second lorem ipsum.

<div class="container"> <div class="well well-lg" style="margin:10px"> <div class="row"> <div class="col-sm-6"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p> <form> <input type="textbox" class="form-control" placeholder="Username"></input> <input type="password" class="form-control" placeholder="Password"></input> </form> </div> <div class="col-sm-6"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p> <form role="form"> <div class="form-group"> <button class="form-control btn btn-default">Push me</button> <input type="textbox" class="form-control" placeholder="Username"></input> <input type="password" class="form-control" placeholder="Password"></input> </div> </form> </div> </div> </div> </div> 

Answer 1

One way is CSS, which adds margin-bottom to col-* on smaller devices / widths.

 @media (max-width: 768px) { [class*="col-"] { margin-bottom: 15px; } } 

Another way is to add a div that can only be seen on smaller devices / widths.

  <div class="col-sm-6"> <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div> ... 

Demo: http://bootply.com/92276

---

Update 2017

Bootstrap 4 now has spacing utilities that you can use.

Answer 2

Use .form-group in columns

This is a bootstrap method. Other CSS hacks mentioned may work, but are not designed to achieve what you want. Hacking bootstrap CSS bootstraps can lead to additional work later when changing the bootstrap version.

Download example: http://www.bootply.com/4cXfQkTCAm#

Answer 3

I wanted it to work when my stack columns are less than 991px and the effect of all but the first child, so I put

 @media (max-width: 991px) { [class*="col-"]:not(:first-child){ margin-top: 40px; } } 

Answer 4

Look at this example http://getbootstrap.com/examples/carousel/ When laying There is a difference between the text and the image 500 * 500. This is due to the fact that there is a <p> around it, and its lower value is 20px

Answer 5

Add a negative upper border to each row and copy it in each column, for example:

 .row { margin-top: -10px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { margin-top: 10px; } 

After the columns begin to fold, they will receive a vertical margin between them.

Works with all screen sizes.