In my project, I am using Bootstrap 4. I like to position the below image absolutely in .row but I couldn't find proper classes like top-0 top-50 etc. as it is in Bootstrap 5.
Should I write the classes myself? I need it responsively as well. So I don't want to write media queries for every break point.
What I want to do is below:
<div class="container mb-10">
<div class="row position-relative">
<div class="col-12 col-md-6 mb-6 mb-md-0">
<div class="p-8 p-sm-9 img-container" >
<img src="/myImage1.png" class="img-fluid" alt="">
</div>
</div>
<div class="col-12 col-md-6 text-center text-md-left">
<h2 class="display-3 font-weight-bold ">Education</h2>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio reprehenderit ipsa repellendus nam debitis. Quaerat, delectus consequuntur quasi adipisci aspernatur cumque facere mollitia ea sit, minima, veniam beatae molestias voluptatibus!</p>
</div>
<div class="position-absolute top-50 end-0 top-md-70 end-md-30">
<img src="/myImage2.png" alt="">
</div>
</div>
</div>
Related
I am trying to design a page in bootstrap. I have added 3 cards in a row but for some reason they are not getting of equal size. The data in the cards is getting random size along with the headings and image. Following is the code of the cards:
<div class="container">
<div class="row">
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">Web Development</h3>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">IOS Development</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">SEO</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
Book now
</div>
</div>
</div>
</div>
Add the following CSS:
img {
height: 150px;
object-fit: cover; /* If you add this images won't be distorted (try to remove it to see the effect) */
}
See the snippet below.
img {
height: 150px;
object-fit: cover;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">Web Development</h3>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">IOS Development</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
Book now
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-md-4 mb-3 d-flex align-items-stretch">
<div class="card shadow h-100">
<img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h3 class="card-title">SEO</h3>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
Book now
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
I have a problem making my carousel animation work.
I want it to slide-out/slide-in as it does on the Bootstrap website, but in my case it doesn't slide-out, the old item just disappears and slide-in animation occurs.
I have attached a gif to explain what I mean.
Has anyone else experienced similar issues? Or is my code wrong?
<div class="container-fluid b2 pt-5 pb-5">
<div class="row text-center">
<h1>
Why Choose Us
</h1>
</div>
<div class="row justify-content-center">
<div class="col-4 centeralign">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur consequuntur maiores sapiente placeat quis dolorem repellendus.</p>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide d-lg-none" data-ride="carousel" data-slide="true">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner pb-5 pt-5">
<div class="carousel-item active">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconcheck.png" height="75px" width="75px" alt="">
<h3>Intuitive interface</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconfile.png" height="75px" width="75px" alt="">
<h3>Performance tracking</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconpuzzle.png" height="75px" width="75px" alt="">
<h3>High quality content</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
</div>
</div>
You Have Use The Bootstrap Starter Template And After I Think Solve This Problem
And Put Your Code After The Body Tag Than Solve This Problem
This question already has an answer here:
Bootstrap 4 cards - align content at the bottom
(1 answer)
Closed 4 years ago.
I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).
Relevant HTML (for full code view CodePen):
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Two</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>
The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!
Note: You can find this example also on the official documentation of Bootstrap 4.
To center the links you can use the text-center class on the card-link.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Two</h4>
<p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>
Add this css, it will work
.card-body {
display: flex;
flex-direction: column;
}
.card-link {
margin-top: auto;
}
codepen link
An alternative solution
You can align the link at the bottom of the card-body by following these three steps:
Apply the d-flex and flex-column classes to card-body
Wrap all the content of card-body in a div.
Use flex: 1 1 auto on this new div
Doing so, the newly created div always takes all the available space. Hence, the link is always at the bottom of the card-body.
.flex-grow {
flex: 1 1 auto;
}
<div class="card-body d-flex flex-column">
<div class="flex-grow">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
</div>
View CodePen
</div>
Check this pen on CodePen
FYI, You can make an element occupy all the available space using this method.
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Extend bootstrap row outside the container
(7 answers)
Closed 6 years ago.
Not a duplicate of this.
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
It should look like this:
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->
Bootstrap 5 beta
The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...
Bootstrap 5 example
Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-info">
<div class="row justify-content-end">
<div class="col-9"> ... </div>
</div>
</div>
<div class="col-6 bg-danger">
<div class="row justify-content-start">
<div class="col-9"> ... </div>
</div>
</div>
</div>
</div>
Bootstrap 5 nesting example
Bootstrap 4
The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.
Bootstrap 4 example
Bootstrap 3 (original answer)
Use another wrapper DIV around a 2nd container...
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>
EDIT
Use a psuedo element such as..
.right:before {
right: -999em;
background: rebeccapurple;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
Bootstrap 3 example
Similar question: Bootstrap container fill sides with colors
This question already has answers here:
Bootstrap full-width with 2 different backgrounds (and 2 columns)
(2 answers)
Extend bootstrap row outside the container
(7 answers)
Closed 6 years ago.
Not a duplicate of this.
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
It should look like this:
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: aquamarine; padding: 0">
<div>
<div class="col-sm-8 col-sm-offset-1">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div><!-- .row -->
</div><!-- .container-fluid -->
Bootstrap 5 beta
The concept is still the same in Bootstrap 5. Use a absolute position pseudo element on the column(s) to create the appearance of a container inside a container-fluid...
Bootstrap 5 example
Or, use container-fluid and nest smaller grid columns inside the outer columns with background color...
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-info">
<div class="row justify-content-end">
<div class="col-9"> ... </div>
</div>
</div>
<div class="col-6 bg-danger">
<div class="row justify-content-start">
<div class="col-9"> ... </div>
</div>
</div>
</div>
</div>
Bootstrap 5 nesting example
Bootstrap 4
The concept is still the same in Bootstrap 4, but the -xs- infix no longer exists.
Bootstrap 4 example
Bootstrap 3 (original answer)
Use another wrapper DIV around a 2nd container...
<div class="container" style="background: bisque;">
<div class="row">
<div class="col-xs-12">
<h1>Normal Boxed Width</h1>
</div>
</div>
</div>
<div style="background-color: aquamarine; padding: 0">
<div class="container">
<div class="row">
<div>
<div class="col-sm-9">
<h1>Left Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
</div>
<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
<h1>Right Panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
</div>
</div>
</div>
<!-- .row -->
</div>
<!-- .container-fluid -->
</div>
EDIT
Use a psuedo element such as..
.right:before {
right: -999em;
background: rebeccapurple;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
Bootstrap 3 example
Similar question: Bootstrap container fill sides with colors