Keeping a bit of vertical space between elements when they wrap?

Question

Using Bootstrap, when I'm putting a bunch of elements (e.g. buttons) in a row and shrink the window, the elements wrap around.

But while there is some horizontal space between the elements when the window is wide enough to contain everything next to each other, vertically everything gets stuck together, with zero pixels of empty space between.

Live example (narrow or widen the output window to see the effect)

Screenshot example:
1. Wide enough, notice space between buttons
2. Wrapping around, notice NO space between the buttons stacked on top of each other

I guess I could mess around with some custom CSS, adding vertical margins or whatnot, but in order to keep things as compatible and standard as possible, I wonder if there is a better or more native way to fix this in a Bootstrap layout?

duplicate : http://stackoverflow.com/questions/17809671/horizontal-and-vertical-separation-of-twitter-bootstraps-buttons http://stackoverflow.com/questions/21981117/twitter-bootstrap-btn-group-vertical-with-margin-in-between-the-buttons http://stackoverflow.com/questions/18918921/how-to-space-vertically-stacked-buttons-in-bootstrap-3 — Crock, Apr 29 '15 at 07:59

Shanaka · Accepted Answer · 2017-05-04T07:29:09.823

What happens here is the buttons are displayed as an inline block and by default such elements have no white space or margin to begin with. You can use below method to avoid this.

What I have done is added a class to the parent element of the buttons and inherit style to class "btn".

html

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 button-wrapper'>
            <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
            <button class='btn btn-info'>consectetur adipiscing elit</button>
            <button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

css

.button-wrapper .btn {
    margin-bottom:5px;
}

Demo

This has the margin even on screens that are wide enough to display the buttons on one line. This answer is how you avoid that - http://stackoverflow.com/questions/30887071/margin-top-only-when-the-flex-item-is-wrapped — Tahsis Claus, Mar 23 '17 at 21:40

score 13 · Answer 2 · answered Feb 02 '16 at 18:12

With Bootstrap, I always like to make classes for adding top and bottom margins like so:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

It's easy to remember and is a quick fix for this problem. Just add to your main.css file.

Did not work for me. Perhaps these classes do not work in combination with certain bootstrap classes due to float or display settings. But I found a similar alternative, see my solution — Roland, Aug 30 '17 at 13:55

score 8 · Answer 3 · answered Apr 29 '15 at 08:02

8

Try like this: Demo

CSS:

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }

answered Apr 29 '15 at 08:02

G.L.P

7,119
5
25
41

Works for me and no customization of html. – Abela Dec 31 '16 at 06:05
Yea, this seems kind of annoying to me, but I think this is the best solution I've seen so far. Would make sense if bootstrap would have some classes that only activate based on different sizes for margins and things (like `mt-sm-10`, `mb-md-20`, etc). I wonder if these are worth adding? – user1274820 Nov 08 '18 at 16:40

score 4 · Answer 4 · answered Apr 29 '15 at 08:14

Check the example below:

Code:

.btn {
    margin: 10px auto;
}

<div class='container'>
 <div class='row'>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-info">consectetur adipiscing elit</button>
        </div>
        
        <div class="col-xs-12 col-sm-4">
            <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button>
        </div>        
        
 </div>
</div>

Example

interesting, what is the `auto` for in the margin part? – RocketNuts Apr 29 '15 at 10:02 — RocketNuts, Apr 29 '15 at 10:02

score 3 · Answer 5 · answered Aug 30 '17 at 13:57

3

I am using this method: add a div with some vertical space:

<div class="vspace1em"></div>

css:

    div.vspace1em {
        clear: both;
        height: 1em;
    }

answered Aug 30 '17 at 13:57

Roland

4,619
7
49
81

1

This solution is much cleaner than adding margins to bootstrap elements. – jahackbeth Aug 31 '17 at 04:20

score 2 · Answer 6 · answered Apr 29 '15 at 07:59

2

Demo Use Margin-bottom css for Button.

    .btn{margin-bottom:10px;}

U can write this css with new parent class name ,to avoid above css affect in other pages.

answered Apr 29 '15 at 07:59

ItzMe_Ezhil

1,276
2
11
22

Keeping a bit of vertical space between elements when they wrap?

6 Answers6