CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3multiple-columns
user8589236
user8589236

Reputation:

Bootstrap Columns not working when putting Margin

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;
}

Upvotes: 5

Views: 7282

Answers (3)

Abdul Abdurahim
Abdul Abdurahim

Reputation: 812

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>
`

Upvotes: 1

Gaurav Rao
Gaurav Rao

Reputation: 117

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>

Upvotes: 1

arbuthnott
arbuthnott

Reputation: 3819

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:

  1. If you are only looking for vertical spacing, use margin-top or margin-bottom rather than margin.

  2. 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.

Upvotes: 1

Related Questions