Bootstrap 4 Full Screen Desktop -columns fill remaining space - html

Question

I am trying to make a full screen layout using bootstrap 4, like this:
100% height and width
My issue is that the left and right column (between nav and footer) are not taking up the remaining space. Secondly I would need to center that content within the column. I have played around with giving those sections fixed heights of (90vh) but then I am writing a lot of workaround code for mobile/tablet. Is there any solution for this that I am missing, probably something painstakingly obvious!
Any help is appreciated, thanks!
body {
font-family: 'Montserrat', sans-serif;
background-color: #fcfcfc;
}
.navbar-colored{
background-color: rgba(255,255,255,0.9) !important; /*#94a7b7*/
box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.0s;
}
.nav-item {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-duration: 1.1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav-item a {
color: rgba(17,17,17,0.85);
}
.cart-icon {
padding-right: .75rem;
}
.cart-icon strong {
border-radius: 0;
font-weight: bold;
margin: .3em 0;
border: 2px solid #446084;
color: #0062A8;
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 1em;
}
.navbar{
position:fixed;
width:100%;
background color: transparent;
z-index:10;
flex-wrap: nowrap;
padding: 0.8rem 1.0rem;
}
.navbar-light .navbar-toggler {
border:none;
}
.row .no-pad {
margin-left: 0px;
}
.color-img-col {
padding-left: 20px;
padding-right: 20px;
}
.col-right {
background-color: #e6e6e6;
padding-left: 4%;
padding-right: 4%;
}
.col-left {
background-color: #fcfcfc;
}
.col-lg-4 .steps-small li {
padding-top: 10px;
}
.builder-color-img {
max-width: 80%;
}
.left-content {
margin-left: 9vw;
width: 72%;
}
[data-attribute-link] {
cursor: pointer;
}
.builder-checkout {
background-color: #0062a86b /*#7e94a78c*/;
}
.product-gallery {
background-color: #e6e6e6;
}
/*Builder Main Header / Navigation*/
.builder-header h1 {
font-size: 30px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
color: #202020;
padding-bottom: 17px;
}
.builder-header hr {
color: #9b9b9b;
margin-top: 0px;
margin-bottom: 0px;
}
h2.builder-step-title {
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-style: italic;
color: #202020;
padding-top: 40px;
}
.steps-small {
padding-bottom: 25px;
}
.steps-small ul {
list-style-type: none;
overflow: hidden;
padding-left: 0px;
cursor: pointer;
}
.steps-small .active {
color: #0062A8;
font-weight: 500;
}
.steps-small :hover {
color: #0062A8;
}
.steps-small li {
float: left;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
color: #8a8a8a;
padding-right: 10px;
}
.steps-small img {
width: 20px;
height: 10px;
padding-left:5px;
padding-right:3px;
}
/*Builder Bar*/
.review-bar {
background-color: #0062a8d9 /*#94a7b7*/;
color: white;
text-transform: uppercase;
padding-left: 9vw;
}
.picker-header {
float:left;
font-weight: 200;
font-size: 15px;
padding-left: 7px;
}
span[data-product-attribute-variation-result] {
font-weight: 500;
font-size: 15px;
padding-left: 5px;
}
.pa_color, .pa_neck, .pa_hem, .pa_size, .pa_body, .builder-checkout {
padding-top: 3.5vh;
padding-bottom: 3.5vh;
cursor: pointer;
}
.review-bar .pa_color:hover, .review-bar .pa_neck:hover, .review-bar .pa_hem:hover, .review-bar .pa_size:hover, .review-bar .pa_body:hover {
/*box-shadow: inset 0 0 10px #0062A8;*/
box-shadow: 0 0 8px #0062A8;
}
.builder-checkout:hover {
box-shadow: inset 0 0 10px #0062A8;
}
/*color Screen*/
.white-color-btn, .black-color-btn, .navy-color-btn, .grey-color-btn {
height: 30px;
width: 30px;
border-radius: 30px;
border:1px solid black;
}
/*Next Button*/
.next-btn {
font-size: 14px;
border-radius: 30px;
padding: 15px 50px 15px 50px;
font-weight: 200;
color: #202020;
border: 1px solid #202020;
}
.next-btn:hover {
background-color: #202020;
color: white;
}
.next-btn img {
width: 26px;
height: 10px;
padding-left:10px;
}
.review-bar img {
width: 15px;
height: 15px;
float: left;
margin-top: 3px;
}
.next-btn:hover {
color: white;
}
.image-gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
overflow: hidden;
overflow-y: scroll;
}
.image-gallery img {
padding: 20px 0px;
}
.carousel-indicators li {
text-indent: 0px;
}
.selection-button-top {
padding-top: 50px;
padding-left: 0px;
}
.selection-button-bottom {
padding-bottom: 50px;
padding-top: 30px;
padding-left: 0px;
}
.selection-button {
padding-top: 30px;
padding-left: 15px;
padding-left: 0px;
}
.circle-btn {
border-radius: 30px;
height: 30px;
width: 30px;
text-indent: 40px;
cursor: pointer;
background-color: transparent;
color: #202020;
border: 1px solid #202020;
}
.circle-btn:hover {
border: 1px solid #3ca0e7;
font-weight: 500;
background-color: #202020;
}
.container-fluid .review-bar {
-webkit-overflow-scrolling: touch;
}
.nav-link {
padding: .5rem;
position: relative;
text-decoration: none;
cursor: pointer;
margin-left: 2rem;
margin-right: 2rem;
}
.nav-link:hover {
font-weight: 500;
}
.nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #0062A8;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.steps-small li {
padding-top: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="buildertwo.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,500i|Poppins:400,500" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<title>OneTee Builder 2.0</title>
</head>
<body>
<nav class="navbar navbar-light">
<button class="navbar-toggler x-button" type="button" data-toggle="collapse" data-target="#navbarsmall" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="x-icon"><span></span><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarsmall">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sizing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shipping</a>
</li>
</ul>
</div>
<div class="cart-item has-icon">
<a href="https://onetee.shop/cart/" title="Cart" class="header-cart-link is-small">
<span class="cart-icon image-icon">
<strong>0</strong>
</span>
</a>
</div>
</nav>
<div id="carouselBuilder" class="carousel slide carousel-fade" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" data-product-attribute="pa_color" data-slide-number="1">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0" class="active">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 1. Select Your Colour</h2>
<div class="selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="black">black</button>
</div>
<div class="selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="white">white</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="1">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid" alt="Responsive image" src="black.png">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item" data-product-attribute="pa_neck" data-slide-number="2">
<div class="container-fluid">
<div class="row main-row align-items-center">
<div class="col-sm-12 col-lg-6 col-left">
<div class="left-content">
<div class="builder-header no-sm-mobile">
<h1>Build your shirt</h1>
<div class="steps-small">
<ul>
<li data-target="#carouselBuilder" data-slide-to="0">Color<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="1" class="active">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
<li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
</ul>
</div>
<hr>
</div>
<h2 class="builder-step-title">Step 2. Select Your Neck Line</h2>
<div class="col-12 selection-button-top">
<button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="crew">crewneck</button>
</div>
<div class="col-12 selection-button-bottom">
<button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="v-neck">vneck</button>
</div>
<button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="2">Next<img src="next.png" class="next-arrow" alt="next" /></button>
</div>
</div>
<div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
<div class="right-content">
<img class=" img-fluid neck-img" alt="Responsive image" src="v-neck-black.png">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="container-fluid review-bar">
<div class="row flex-row flex-nowrap">
<div class="pa_color col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="0">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Colour:<span data-product-attribute-variation-result="">Black</span>
</div>
</div>
<div class="pa_neck col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="1">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Neck:<span data-product-attribute-variation-result="">Crew</span>
</div>
</div>
<div class="pa_hem col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="2">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Hem:<span data-product-attribute-variation-result="">Straight</span>
</div>
</div>
<div class="pa_size col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="3">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Size:<span data-product-attribute-variation-result="">L</span>
</div>
</div>
<div class="pa_body col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="4">
<img src="tick-inside-circle.png" class="tick-circle" alt="" />
<div class="picker-header">Body:<span data-product-attribute-variation-result="">Slim</span>
</div>
</div>
<div class="builder-checkout col-4 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="5">
<div class="picker-header">Checkout
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/boostrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="buildertwo.js"></script>
</body>
</html>

Answer 1

I hope this helps. This is a really simple explanation, but I trust that you can implement this into your code. The problem with your columns is that they are not the correct height. They are too short, so even after the review bar is added under the columns, there is still a bunch of space.
This is how I would solve it. you can use the calc() function built in css. You can see me using it in my solution below. If you know the height of the review-bar ahead of time, you can just subtract that from 100vh or 100% (I'm using 100vh).
I'm assuming that the review bar is 50px, but of course, it can be different. This implementation works with any screen size. If you run the snippet, go full screen, and adjust the screen size, you'll see the top-content will adjust itself and push the review bar to the bottom.
So try to implement this into your code and see if it works! If it doesn't I'll keep trying to help. And if this is not the solution you're looking for, I apologize.
Also, welcome to Stack Overflow! It says here that you're a new user.
* {
margin: 0;
padding: 0;
}
.top-content {
width: 100%;
height: calc(100vh - 50px);
background-color: blue;
}
.review-bar {
width: 100%;
height: 50px;
background-color: green;
}
<div class='top-content'>
This content here would be your two columns
</div>
<div class='review-bar'>
This, of course, would be your review bar
</div>