html - Bootstrap Columns not working when putting Margin -
i have 2 rows, each 1 of them divided 2 columns col-sm-6
. long keep code is, columns work, sections sticking together; so, when try give them margin setting
.col-sm-6 { margin: 15px; }
in css, columns break , divided vertically. no matter kind of margin put, give me same problem. tried other possible solutions beside this, still, can't solve it. doing wrong?
<div class="container"> <div class="row"> <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/nature/1600x900);"> <div class="opacity-overlay"> <h2>section 1</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/food/1600x900);"> <div class="opacity-overlay"> <h2>section 2</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="row"> <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/people/1600x900);"> <div class="opacity-overlay"> <h2>section 3</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/objects/1600x900);"> <div class="opacity-overlay"> <h2>section 4</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div>
this css:
.categories { text-align: center; background-position: center center; background-size: cover; color: black; padding: 50px; } .opacity-overlay { background: rgba(255, 255, 255, 0.85); padding: 1px 20px 10px 20px; }
indeed, bootstrap grid system needs take on margin-left
, margin-right
properties work. if override those, won't work intended. 2 possible solutions:
if looking vertical spacing, use
margin-top
ormargin-bottom
rathermargin
.put
<div class="container">
inside<div class="cols-xs-6">
. margins apply container within confines of column div.
Comments
Post a Comment