Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 496
RocketNuts Avatar asked Apr 29 '15 07:04

RocketNuts


People also ask

How do you keep a gap between two elements in HTML?

Creating extra spaces before or after text To create extra spaces before, after, or in-between your text, use the   (non-breaking space) extended HTML character.

What is vertical spacing?

Microsoft has a feature that allows you to add additional space before and/or after paragraphs. This additional space gets added every time you hit the Enter key. Word defaults to having additional spacing.


Video Answer


2 Answers

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

like image 182
Shanaka Avatar answered Oct 17 '22 12:10

Shanaka


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.

like image 36
Millsionaire Avatar answered Oct 17 '22 12:10

Millsionaire