0

I am trying to achieve something like the below image where the dark and light blue makes the full grid using bootstrap.

enter image description here

The light blue box should extend all the way to it's left and dark blue should extend all the way to right. But the content should stay in container and adjust according to container.

jsFiddle

My approach:

I have achieved the same with the help of following markup :

<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="scheduler-col">
                    <div class="title">
                        <img src="../img/calendar.png" alt="calendar icon">
                        <h3>Afspraken planner</h3>
                        <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p>
                        <a href="" class="btn btn-dark">maak een afspraak</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="scheduler-col">
                    <div class="title">
                        <img src="../img/calendar.png" alt="calendar icon">
                        <h3>Afspraken planner</h3>
                        <p>Met onze handige afsprakenplanner maakt u een afspraak wanneer het voor u het beste uitkomt.</p>
                        <a href="" class="btn btn-dark">maak een afspraak</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

So, I put both the columns in a row inside a container. And then I add the background image to always position center. But I would like to do this by adding background colors to individual section and not adding a single background image.

So, if anyone can suggest an approach to achieve such layout without using positioning and background image.

CSS:

#wrapper {
    background: url(img/banner-bg.jpg) no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-size: cover;
}
Kiran Dash
  • 4,816
  • 12
  • 53
  • 84
  • 1
    Related - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen – Paulie_D May 06 '16 at 16:03

2 Answers2

1

This can be easily achieved using pseudo elements (::before, ::after) without affecting the Bootstrap grid! It requires positioning, but not to the main elements, instead to the pseudo elements.

Here's a solution (in SCSS): http://codepen.io/hellojebus/pen/eZxOGG

#wrapper {
  overflow: hidden;
} 

.scheduler-col {
  position: relative;
  &:before {
    position: absolute;
    content: " ";
    top: 0;
    //a very large number for width
    width: 6000px;
    height: 100%;
  }
  &.is-left::before {
    //0 - the padding-left/right on bootstrap col
    right: -15px;
    background: #f1f1f1;
  } 
  &.is-right::before {
    //0 - the padding-left/right on bootstrap col
    left: -15px;
    background: #888;
  }
  .title {
    position: relative;
    z-index: 3;
  }
}
hellojebus
  • 3,267
  • 1
  • 21
  • 23
0

Here's a cleaner method using Bootstrap 5 (though you can adapt to previous versions). It doesn't use ::before pseudos but instead places an absolutely positioned div behind the content with the same grid format to create the background styles of your choice.

https://codepen.io/powen-cs/pen/KKewxov

#wrapper {
  overflow: hidden;
  position: relative;
  .content-over {
    z-index: 20;
    .title {
      position: relative;
      z-index: 3;
    }
  }
  .background-style-box {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    .box-style-1 {
      background: #ccc;
    }
    .box-style-2 {
      background: #f3f3f3
    }
  }
}
powen-cs
  • 1