Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Extend bootstrap row outside the container

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

like image 623
iixi Avatar asked Feb 02 '17 12:02

iixi


People also ask

How do I stretch a row in Bootstrap?

Use the . align-items-stretch class to stretch single rows of items in Bootstrap 4.

Can I use row without container in Bootstrap?

Without the container it kind a works - but it shows a horizontal scroll bar at the bottom of the page and around 20px are cut off from rightside of the screen. See yourself how it works without the container class - just go to http://getbootstrap.com/ and remove the container class using inspect element.

How do I increase the gap between columns in Bootstrap?

To add space between columns in Bootstrap use gutter classes. With gutters you can add horizontal or vertical space or even specify how big space should be on different screen size.


3 Answers

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

like image 63
Zim Avatar answered Nov 08 '22 16:11

Zim


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

like image 28
Banzay Avatar answered Nov 08 '22 18:11

Banzay


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>
like image 37
Tim Joyce Avatar answered Nov 08 '22 17:11

Tim Joyce