Menu
How to add margin top to class="row" elements using twitter bootstrap framework?
915
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
1 - (by default) for classes that set the margin or padding to $spacer * .25. 2 - (by default) for classes that set the margin or padding to $spacer * .5. 3 - (by default) for classes that set the margin or padding to $spacer. 4 - (by default) for classes that set the margin or padding to $spacer * 1.5.
l - sets margin-left or padding-left. r - sets margin-right or padding-right. x - sets both padding-left and padding-right or margin-left and margin-right. y - sets both padding-top and padding-bottom or margin-top and margin-bottom.
Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin.
To solve this, instead create a new class "top-buffer" that adds the standard margin that you need.
.top-buffer { margin-top:20px; } And then use it on the row divs where you need a top margin.
<div class="row top-buffer"> ... Ok just to let you know what's happened then, i fixed using some new classes as Acyra says above:
.top5 { margin-top:5px; } .top7 { margin-top:7px; } .top10 { margin-top:10px; } .top15 { margin-top:15px; } .top17 { margin-top:17px; } .top30 { margin-top:30px; } whenever i want i do <div class="row top7"></div>
for better responsive you can add margin-top:7% instead of 5px for example :D
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With