Bootstrap Columns not working when putting Margin

Question

I have two rows, each one of them divided into 2 columns with col-sm-6. As long as I keep the code as it is, the columns work, but the sections are all sticking together; so, when i try to give them some margin by setting

.col-sm-6 { margin: 15px; }

in the CSS, the columns break and get all divided vertically. No matter what kind of margin I put, it will always give me the same problem. I tried some other possible solutions beside this, but still, I can't solve it. What am i 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 is the 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;
}

https://stackoverflow.com/questions/24340293/bootstrap-grid-margin — , Sep 10 '17 at 23:42

score 1 · Answer 1 · answered Sep 10 '17 at 23:46

1

Indeed, the bootstrap grid system needs to take over your margin-left and margin-right properties to work. If you override those, it won't work as intended. Two possible solutions:

If you are only looking for vertical spacing, use margin-top or margin-bottom rather than margin.
Put your <div class="container"> inside your <div class="cols-xs-6">. The margins will then apply to the container within the confines of the column div.

answered Sep 10 '17 at 23:46

arbuthnott

3,819
2
8
21

1. I have already tried to put only `margin-top` and `margin-bottom` to see if it gave me the same problem, and it didn't, but I need `margin-left` and `margin-right` as well, and they are exactly what cause the problem. – Sep 11 '17 at 00:21
Try approach 2. – arbuthnott Sep 11 '17 at 00:22
1

2. I tried this a few minutes ago, it doesn't give me the same problem, but the result is even worse. – Sep 11 '17 at 00:26
I'd like to help, but I can't debug "even worse". Still, I'd recommend approach 2: let bootstrap's column classes work for you without adding styles, but fill them with a div of your own class that you can style as you wish. I don't know what you're not happy about when you made the conversion, but you should probably expect to have to make some style tweaks on your contained class. If you need a specific look, maybe you should ask a second question along those lines. – arbuthnott Sep 11 '17 at 00:34

score 1 · Answer 2 · answered Sep 11 '17 at 12:07

1

Try Using this

<div class = "row">
  <div class = "col-sm-6">
     <div class = "col-sm-12">
        Your Content 
     </div>
  </div>
  <div class = "col-sm-6">
     <div class = "col-sm-12">
        Your Content 
     </div>
  </div>
</div>

answered Sep 11 '17 at 12:07

Gaurav Rao

97
4

Abdug'affor Abdurahimov · Answer 3 · 2020-12-06T09:09:59.717

I solved the same problem by giving to col border: 10px solid colour the colour the same with background-colour

You can also do this way:

`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 py-3">
    <div class='col'>
      <div class="opacity-overlay">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</body>

</html>

`

Bootstrap Columns not working when putting Margin

3 Answers3