Full width background to column that is inside container [ Bootstrap 3 ]

Question

Basically I have two columns inside a container and I'm trying to add a background colour to a column that extends full width outside the container. Here's the mock up.

As you can see, the content inside the yellow background sits inside a column that is inside a column. How do I set the background colour so that it goes full width to left and works for all screens?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
   <div class="container">
      <div class="row">
         <div class="col-xs-12">
            <h2>
               Project Name
            </h2>
         </div>
      </div>
   </div>
</section>
<section class="spage-intro">
   <div class="container">
      <div class="row">
         <div class="col-sm-4">
            <h3 class="intro-excerpt">
               Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.
            </h3>
         </div>
         <div class="col-sm-8">
            <div class="the-content-wrapper">
               Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.
            </div>
         </div>
      </div>
   </div>
</section>

add background color to class "spage-intro" – JustCode Oct 24 '19 at 06:52 — JustCode, Oct 24 '19 at 06:52
Do u want the output like u attached image? – Manikandan2811 Oct 24 '19 at 07:01 — Manikandan2811, Oct 24 '19 at 07:01

score 0 · Answer 1 · edited Oct 24 '19 at 08:24

0

Add css:

.intro-excerpt{
    background-color: #f6cc08;
}

edited Oct 24 '19 at 08:24

Mickaël Leger

3,426
2
17
36

answered Oct 24 '19 at 06:58

Pushprajsinh Chudasama

7,772
4
20
43

Actually the question is, the background color only for left side div, not for entire div. – Manikandan2811 Oct 24 '19 at 07:06
intro-excerpt is with in the container.. so it does'nt go to left side of the screen.. so plz check my code as i have send!! – Manikandan2811 Oct 24 '19 at 07:09
Okay i got it..thank you – Pushprajsinh Chudasama Oct 24 '19 at 07:12
ok.. Have u tried in local? – Manikandan2811 Oct 24 '19 at 07:14

score 0 · Answer 2 · answered Oct 24 '19 at 07:05

0

Plz follow the below steps.. If anything not clear plz ask..

HTML

<div class="col-sm-4 with-bg"></div>

css

.with-bg {
    position: static;
}
.with-bg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 35.33%;
    background-color: #f6cc08;
    z-index: -1;
}

answered Oct 24 '19 at 07:05

Manikandan2811

831
4
9

Thanks but this does't work. – shutupchigo Oct 24 '19 at 07:09
Why.. I did in my local.. how it does'nt work.. can u plz share the screen? – Manikandan2811 Oct 24 '19 at 07:10
https://jsfiddle.net/shyLftr1/ – shutupchigo Oct 24 '19 at 07:12
5mins plz i will check and send the solution – Manikandan2811 Oct 24 '19 at 07:15
.spage-intro { position: relative; } – Manikandan2811 Oct 24 '19 at 07:16
.with-bg { position: static; } – Manikandan2811 Oct 24 '19 at 07:16
Plz add my entire code and check – Manikandan2811 Oct 24 '19 at 07:17
No, still doesn't work. – shutupchigo Oct 24 '19 at 07:21
Have u added my prev comments style.. Seems it doesn't added in your snippet? – Manikandan2811 Oct 24 '19 at 07:23
It's a public fiddle you won't be able so see the changes. Is it working for you? – shutupchigo Oct 24 '19 at 07:26
Seems its wrong.. but i have added the styles in browser inspect.. .spage-intro { position: relative; } , .with-bg { position: static !important; } .. its working fine.. plz add my below styles.. – Manikandan2811 Oct 24 '19 at 07:29

Full width background to column that is inside container [ Bootstrap 3 ]

2 Answers2