Vertical space when stacking columns in Bootstrap 3

Question

When columns are stacked in mobile mode, I would like some vertical space separating the column contents, how can I do this?

See jsfiddle in http://jsfiddle.net/tofutim/3sWEN/ and vary the width of the output. There should be some spacing before the second lorem ipsum.

enter image description here

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

Carol Skelly · Accepted Answer · 2019-03-07T12:03:31.500

66

One way would be with CSS that 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 is only visible 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 2019

Bootstrap 4 now has spacing utilities that can be used.

Also see: Add spacing between vertically stacked columns in Bootstrap 4

edited Mar 07 '19 at 12:03

answered Nov 06 '13 at 20:47

Carol Skelly

351,302
90
710
624

Does that add an extra margin at the end of the last column though? – tofutim Nov 06 '13 at 21:45
1

Yes, the CSS solution does. There may be a way to use a psuedo selector to set the last-child to margin 0. – Carol Skelly Nov 06 '13 at 21:48
1

In case last column margin is not desired, you can add this selector combination at the end: `:not(:last-child)` So whole thing is: `[class*="col-"]:not(:last-child){ margin-bottom: 15px; }` – Bogac Jun 30 '15 at 15:33
3

Here is a shorter html spacer solution, put it *between* columns `
` It has less height than a normal text div and looked more natural to me. – Duvrai Dec 18 '15 at 13:22

score 48 · Answer 2 · edited Nov 16 '15 at 12:10

48

Use .form-group on the columns

That is the bootstrap way. Other mentioned CSS hacks may work, but aren't the intended way to achieve what you want. Hacking up bootstraps CSS may lead to more work later when changing your bootstrap version.

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

edited Nov 16 '15 at 12:10

T J

42,762
13
83
138

answered Feb 17 '15 at 10:46

S..

5,511
2
36
43

8

Up-voting this because it's bootstrap's way – Splendonia Apr 20 '16 at 20:08
5

But it won't show margin only when stacked, but all the time, and that's not what OP asked for. – Furgas Aug 05 '16 at 07:21

score 14 · Answer 3 · answered Nov 16 '13 at 11:54

14

I wanted to have it working for when my columns stack at less than 991px and effect all but the first child so I put

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

answered Nov 16 '13 at 11:54

evdama

2,166
1
16
17

1

But checkout @Sam's answer below! The bootstrap way to do this is to use .form-group on the columns. These CSS hacks can lead to issues in future releases of bootstrap. – Digs Jun 14 '15 at 07:15

tahiche · Answer 4 · 2018-02-26T10:16:14.410

A plain Bootstrap4, no extra CSS, hacks or mixin solution would be something like:

<div class="row">
    <div class="col-md-3 mb-3 mb-md-0">
    ....
    </div>
    <div class="col-md-9 mb-3 mb-md-0">
    ....
    </div>
</div>

This adds a margin-bottom (mb-3) but sets it to zero when not stacked (mb-md-0).

Since media queries for spacing utils like "mb-3" apply to "everything over" (min-width) you need to do the oppsite and reset it to 0 (mb-XX-0) when not stacked. In this case we set it to stack under "md" (sm) so we set margin 0 at that breakpoint.

Here´s a fork of your jsfiddle udated to include margin only on mobile. The "mb-3 mb-md-0" styles on columns show the proposed solution. (Jsfiddle version here: http://jsfiddle.net/cb9oc064/10/)

@import url('https://getbootstrap.com/dist/css/bootstrap.css');

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>   
            <div class="form-group"> 
                <input type="textbox" class="form-control " placeholder="Username"></input>
                </div>    
                <div class="form-group"> 
                <input type="password" class="form-control " placeholder="Password"></input>   
                </div>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-md-0">
            <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>
                </div>
                <div class="form-group mb-3 ">
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

score 0 · Answer 5 · answered Feb 02 '17 at 11:09

0

Look at this example http://getbootstrap.com/examples/carousel/ When stacked There is a margin between the text and the 500*500 Image. This is because The text has <p> around it and its add margin bottom 20px

answered Feb 02 '17 at 11:09

Natan Rubinstein

665
1
9
27

jsruok · Answer 6 · 2018-07-17T08:06:06.020

0

Add a negative top margin to each row, and counter that margin on each column, like this:

.row {
  margin-top: -10px;
}
[class^='col'], [class*=' col'] {
  margin-top: 10px;
}

After columns start stacking they get the vertical margin between them.

Works on all screen sizes.

edited Jul 17 '18 at 08:06

answered Jun 28 '17 at 11:53

jsruok

545
7
10

1

As an alternative, you could rewrite the selector as `*[class^=col]` – Nick Kamer Jul 17 '18 at 00:36
True! Thanks @Ziao! – jsruok Jul 17 '18 at 08:02

score -1 · Answer 7 · answered Apr 19 '18 at 07:07

-1

Try using span instead of div with bootstrap classes.

answered Apr 19 '18 at 07:07

Vikash Singh

1
1

Vertical space when stacking columns in Bootstrap 3

7 Answers7

Linked

Related