2

I need to build a template that will have a background of the left side (different in colour to the background of the page) expand all the way to the edge of the page on the left and still be inside the 8 of 12 bootstrap columns (container>row>col-8). Then the 4 columns on the right without the background. All of that beauty needs to be responsive bootstrap columns (stack on top of each other on mobile screens). I can't use the fluid container (100% width) because the content needs to be inside of the 12 columns and have padding on the left.

Anyone know of any good, clean examples of this?

I don't like to use ::before pseudo element but if it's the only way then I will have to live with it.

See screenshot of what I need. The purple is the background that expands to the left and white is the page background. Yellow is the 12 columns grid.

columns

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Dmitry Fadeev
  • 2,073
  • 2
  • 12
  • 12

2 Answers2

-1

Would it be as simple as just resetting the margin left of the container?

<div class="container ml-0">
    <div class="row">
        <div class="col-sm-8">8 Cols</div>
        <div class="col-sm-4">4 Cols</div>
    </div>
</div>

enter image description here

demo: https://jsfiddle.net/davidliang2008/o4vsftpy/28/

David Liang
  • 20,385
  • 6
  • 44
  • 70
-1

You can use css Gradient property.

NITISH KUMAR
  • 19
  • 3