How to Create a Full-Width Bootstrap Background with Transparent Overlays and Multiple Columns?

Full-Width Bootstrap Background with Transparent Color Overlays and Multiple Columns

In Bootstrap 3, achieving a full-width background with transparent color overlays while maintaining multiple columns can be a challenge. To navigate this, you can leverage techniques outlined in previous inquiries and extend them to incorporate column elements.

The code demonstration provided in the Codepen example showcases the implementation effectively. Here's the relevant code snippet for reference:

<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

.container {
  width: 50%;
  margin: auto;
  margin-top: 1em;
  position: relative;
  overflow: visible;
}

.extra:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0);
}

[class*="col"] {
  border: 2px solid grey;
  min-height: 120px;
  position: relative;
}

.left:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.5);
}

.right:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 255, 0.25);
}

This approach involves creating an extra element with a class of 'extra' that serves as a container for the entire layout. Within this 'extra' element, you'll have the main content container with a class of 'container'. To position the colored overlays on top of the columns, you can utilize the ':before' pseudo-element on the 'left' and 'right' column classes, which allows you to add content before the actual content of the element. By setting the width and height of these pseudo-elements to 100vw and 100%, you ensure they cover the entire width and height of the columns. Finally, you can specify the transparent colors using the 'rgba()' function, where the last value represents the transparency level (0 for transparent, 1 for fully opaque).

The above is the detailed content of How to Create a Full-Width Bootstrap Background with Transparent Overlays and Multiple Columns?. For more information, please follow other related articles on the PHP Chinese website!