<div class="container">
  <div class="row">
    <div class="col">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi voluptatum itaque aliquam repudiandae eum aspernatur saepe aperiam, ex explicabo error. Debitis vel modi dignissimos dicta corporis cum odio quis praesentium! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi voluptatum itaque aliquam repudiandae eum aspernatur saepe aperiam, ex explicabo error. Debitis vel modi dignissimos dicta corporis cum odio quis praesentium! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi voluptatum itaque aliquam repudiandae eum aspernatur saepe aperiam, ex explicabo error. Debitis vel modi dignissimos dicta corporis cum odio quis praesentium!
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="red">
        Lorem ipsum dolor!
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi voluptatum itaque aliquam repudiandae eum aspernatur saepe aperiam, ex explicabo error. Debitis vel modi dignissimos dicta corporis cum odio quis praesentium!
    </div>
  </div>
</div>

.container {
  background: #eee;
}
.container-fluid {
  background: rgba(54,54,54,.5);
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: blue;
    width: 50%;
    z-index: -1;
  }
}
.red{
  background: rgba(255, 0, 0, 0.5);
  color: white;
  width: auto;
}

@media (max-width: 768px) {
  .container-fluid {
    padding: 0;
  }
}