Menu
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. blank - sets a margin or padding on all 4 sides of the element.
You can use calculated width/margins., no change to your HTML necessary. E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.
r - for classes that set margin-right or padding-right. x - for classes that set both *-left and *-right. y - for classes that set both *-top and *-bottom. blank - for classes that set a margin or padding on all 4 sides of the element.
If you need to separate rows in bootstrap, you can simply use . form-group . This adds 15px margin to the bottom of row.
Im a little confused why bootstrap wont apply left and right margins to the columns, all i want is a simple row with 3 columns that have like 20px horizontal margin in between each other. If try to do that bootstrap simply clips one of the divs to the next line.
html
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 1</p></div>
</div>
</div>
css
.col-md-4 {
background-color: tomato;
margin: 20px 5px;
}
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