Bootstrap grid - extend background color

Question

I need to extend the background-color of the right column outside .container.

this is achieved by using :before. But background shows even if the column is absent.

Is there any better way?

Also I could not extend the background below 767px.

section{
  padding: 50px 0;
  position: relative;
}
section:before{
  background: #f1f1f1;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
}
@media (max-width: 767px){
  section:before{
display: none;
  }
  .col-md-4:nth-child(2){
background: #f1f1f1;
padding: t 15px;
padding: b 15px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row justify-content-center">
 <div class="col-md-4">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</p>
 </div>
 <div class="col-md-4">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</p>
 </div>
</div>
</div>
</section>

Codepen - https://codepen.io/afelixj/pen/MdVKaq

Used the below solution [https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns](https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns) — Felix A J, May 27 '19 at 04:29

vinay choudhary · Answer 1 · 2019-05-24T05:42:09.823

try this

@media (min-width:768px) {
        .width {
            max-width: 570px;
            display: inline-block;
        }

        .bg {
            background-color: #f2f2f2;
        }
    }
    .width {
        padding: 15px;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
      <div class="row m-0">
          <div class="col-md-6 p-0">
              <div class="text-right">
                <div class="width text-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</div>
              </div>
          </div>
          <div class="col-md-6 p-0">
              <div class="bg">
                <div class="width">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</div>
              </div>
          </div>
      </div>
    </section>
</section>

Bootstrap grid - extend background color

1 Answers1