Bootstrap full-width with 2 different backgrounds (and 2 columns)

by

Yes, using the techniques outlined in this question but extending it to the columns.

The Codepen Demo (below) shows the result better than the Stack Snippet which is included for reference.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  /* prevent scrollbar */
}
.container {
  width:50%;
  margin:auto;
  margin-top: 1em;
  
  position: relative;
  overflow: visible;
}
.extra:before {
  content: '';
  display: block;
  /* override bootstrap */
  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);
}
<div class="container extra">
  <div class="row">
    <div class="col-sm-4 left"></div>
    <div class="col-sm-8 right"></div>
  </div>
</div>

Codepen Demo

More Related Contents:

  1. How to place a div over a image? [closed]
  2. Setting columns in bootstrap grid
  3. Bootstrap height
  4. How can I override Bootstrap CSS styles?
  5. Table fixed header and scrollable body
  6. IE8 issue with Twitter Bootstrap 3
  7. How do I change Bootstrap 3 column order on mobile layout?
  8. Change Bootstrap tooltip color
  9. Twitter Bootstrap 3, vertically center content [duplicate]
  10. Bootstrap 3 two columns full height
  11. Animate/Shrink NavBar on scroll using Bootstrap
  12. Bootstrap 3 collapsed menu doesn’t close on click
  13. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  14. 7 equal columns in bootstrap
  15. Bootstrap print CSS removes background color
  16. Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]
  17. Empty vertical space between columns in Bootstrap 4
  18. Bootstrap 3: Push/pull columns only on smaller screen sizes
  19. Responsive image align center bootstrap 3
  20. Bootstrap Grid, do I need a container?
  21. How to center buttons in Twitter Bootstrap 3?
  22. Change color of bootstrap navbar on hover link?
  23. Twitter Bootstrap: Center Pills
  24. Bootstrap 3 – show collapsed navigation for all screen sizes
  25. How to make bootstrap carousel image responsive?
  26. Bootstrap – Fill fluid container between header and footer
  27. Why aren’t my bootstrap 4 columns the same height?
  28. Right align text within Bootstrap 4 breadcrumbs
  29. Bootstrap row and col explanation
  30. Can a div have multiple classes (Twitter Bootstrap) [duplicate]

Leave a Comment