10

We are using Bootstrap 3 on our site and I've got a request on a new template with a design which have some elements that doesn't really follow the bootstrap grid. I've tried to get it to work but haven't succeeded.

I've tried to explain the problem in the image below. Anyone have an idea of how I can solve this?

enter image description here

iixi
  • 570
  • 1
  • 6
  • 21
  • @ZimSystem Yes, the green container have rows above and below the red row. – iixi Feb 02 '17 at 12:39
  • @ZimSystem Can't really remember the things I've tried. Changed back and forth between different html structures. I've tried row fluid but cant get the content inside the row to work with the "main" container of the page – iixi Feb 02 '17 at 12:41

7 Answers7

13

One option is to use a CSS pseudo ::before element that will resize in height along with the col-lg-6..

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}
<div class="container" id="main">
    <div class="row">
        <div class="col-lg-6 left">
            ..
        </div>
    </div>
</div>

http://codeply.com/go/C80RYwhWrc

Another option is to use an absolute position .container-fluid (full-width) behind the content .container that acts as a "ghost"...

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="//placehold.it/1000x400">
        </div>
    </div>
</div>

https://codeply.com/go/txUHH72f16 (Bootstrap 4)

Similar questions:
Get Two Columns with different background colours that extend to screen edge
Example with image right
Example with image left
Extend an element beyond the bootstrap container

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

Here is a variant of solution. You need to create absolute positioned div, include it into col-xs-6, but this container should have position: static As for screen width 1200px and more container width is 1170px, you can calculate padding-left for floating div: padding-left: calc((100% - 1170px) / 2);

.blk {
    background: lightgreen;
    width: 50%;
    position: absolute;

}
.container {
    background: tomato;
    height: 100vh;
    padding: 40px 0;
}
@media only screen and (min-width: 1200px) {
 .cell {
    position: static;
 }
 .blk {
    left: 0;
    right: 50%;
    padding-left: calc((100% - 1170px) / 2);
 }
}

<div class="container">
<div class="row">
    <div class="col-lg-6 cell">
        <div class="blk">Lorem ipsum dolor</div>
     </div>
  <div class="col-lg-6">Lorem ipsum dolor</div>
</div>
</div>

http://www.codeply.com/go/CikO35yioi

Banzay
  • 9,310
  • 2
  • 27
  • 46
1

If you use a grid and position it absolute behind your main content, you can get the background grid to be exactly the same as the foreground grid. You can then use pseudo elements to position the image to stretch to the edge of the screen.

.first .stretch-right::after {
  background: url('https://i.picsum.photos/id/802/1920/1080.jpg?hmac=6P9kWTyEU0oX0KcmjlRcGZwNc5Jb27w2_qqtsqQz-fg') no-repeat;
}
.second .stretch-left::after {
  background: url('https://i.picsum.photos/id/802/1920/1080.jpg?hmac=6P9kWTyEU0oX0KcmjlRcGZwNc5Jb27w2_qqtsqQz-fg') no-repeat;
}
.stretch-right::after {
  content: '';
  background-size: cover !important;
  background-position: center center !important;
  right: 0;
  height: 100%;
  position: absolute;
  left: 0;
}
@media (min-width: 1140px){
  .stretch-right::after {
    right: calc((-1%) - ((100vw - 1140px) / 2));
  }
}
.stretch-left::after {
  content: '';
  background-size: cover !important;
  background-position: center center !important;
  right: 0;
  height: 100%;
  position: absolute;
  left: 0;
}
@media (min-width: 1140px){
  .stretch-left::after {
    left: calc((-1%) - ((100vw - 1140px) / 2));
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="position-relative py-5 first">
  <div class="position-absolute w-100 h-100">
    <div class="container h-100 bg-container">
      <div class="row h-100 d-flex justify-content-between align-items-center">
        <div class="col-12 col-md-5 h-100 d-flex"></div>
        <div class="col-12 col-md-6 h-100 d-flex stretch-right"></div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row d-flex justify-content-between align-items-center">
      <div class="col-12 col-md-5">
        <h1>
          Nullam dapibus neque id maximus
        </h1> 
        <p>
        Maecenas sollicitudin egestas convallis. Cras non congue ipsum. Suspendisse auctor, elit at lacinia pulvinar, quam ligula pulvinar mi, vitae ornare metus dolor non quam. Integer eget bibendum ligula. Pellentesque vel consectetur diam. In sagittis aliquam eros, at faucibus erat blandit id. Aliquam fringilla sagittis enim sed porta. Donec sed rutrum metus. Fusce nibh orci, tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
      </div>
      <div class="col-12 col-md-5 bg-white">
        <h3>
        I'll stay in the grid
        </h3>
        <p>
        tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
      </div>
    </div>
  </div>
</section>
<section class="position-relative py-5 second">
  <div class="position-absolute w-100 h-100">
    <div class="container h-100 bg-container">
      <div class="row h-100 d-flex justify-content-between align-items-center">
        <div class="col-12 col-md-6 h-100 d-flex stretch-left"></div>
        <div class="col-12 col-md-5 h-100 d-flex"></div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row d-flex justify-content-between align-items-center">
      <div class="col-12 col-md-5 bg-white">
        <h3>
        I'll stay in the grid
        </h3>
        <p>
        tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
      </div>
      <div class="col-12 col-md-5">
      <h1>
          Nullam dapibus neque id maximus
        </h1> 
        <p>
        Maecenas sollicitudin egestas convallis. Cras non congue ipsum. Suspendisse auctor, elit at lacinia pulvinar, quam ligula pulvinar mi, vitae ornare metus dolor non quam. Integer eget bibendum ligula. Pellentesque vel consectetur diam. In sagittis aliquam eros, at faucibus erat blandit id. Aliquam fringilla sagittis enim sed porta. Donec sed rutrum metus. Fusce nibh orci, tristique sed luctus quis, imperdiet eu nibh. In accumsan congue commodo. Vestibulum a pulvinar ante.
        </p>
        
      </div>
    </div>
  </div>
</section>
Tim Joyce
  • 4,487
  • 5
  • 34
  • 50
0

I didn't really get what you meant. this is what i think you meant.

<div class="container" style="width:1200px">
    <div class="row">
        <div class="col-lg-6">

        </div>
    </div>
</div>

DEMO: http://jsfiddle.net/jayjay95/ybx97y2c/
(if this is what you want, change the container width 200px to 1200px and col-xs-6 to col-lg-6.

Janith Gamage
  • 16
  • 1
0

On the element, add this css:

width: calc(100% + 30px); //full width plus 15px padding on each side margin-left: -15px; //center element

S. Ward
  • 1
0

This is how I solved the problem. I think it will help.

#cont {
    background-color: #F8F9FA;
    position: relative;
}

#cont:before {
    left: calc((50vw - 50%) * -1);
    background: #F8F9FA;
    content: '';
    display: block;
    position: absolute;
    width: calc(50vw - 50%);
    top: 0;
    bottom: 0;
}

#cont:after {
    right: calc((50vw - 50%) * -1);
    background: #F8F9FA;
    content: '';
    display: block;
    position: absolute;
    width: calc(50vw - 50%);
    top: 0;
    bottom: 0;
}
Muzaffer Dölek
  • 21
  • 2
-1

You can use this below code:

<!DOCTYPE html>
  <html class=" desktop landscape" lang="en">
  <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Example</title>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <style type="text/css">
        .side{background-color: lightgrey;

        }
        .middle{background-color: green;
        }
        .red{background-color: red;
            }
    </style>
    </head>
    <body>
        <div class="container-fluid">
            <!-- 1st section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
            <!-- 2nd section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 red" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                    <div class="row">
                        <div class="col-lg-6 col-lg-6 col-md-6 col-xs-6 col-sm-6 red">
                                <br><br><br><br><br><br><br><br><br><br>
                        </div>
                        <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
                                <br><br><br><br><br><br><br><br><br><br>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
            <!-- 3rd section -->
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
                    <br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
        </div>  
    </body> 
</html>
KiranPurbey
  • 335
  • 4
  • 15