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?
Use the . align-items-stretch class to stretch single rows of items in Bootstrap 4.
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.
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.
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
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With