I have a bootstrap container which has row/column inside it. It is not occupying full height of the screen which is the expectation. I am new to bootstrap. Need help in figuring out how to make it full screen.
<div class="container-fluid"> <div class="row" style="background-color: #695B8A;"> <!-- style="background-color: #d9cdbf;" --> <div class="col-md-7 spacing"> /*some content */ </div> <div class="col-md-4 spacing"> <h2 class="h2_style">Animation</h2> <div class="row"> <div class="col-xs-2 spacing" style="text-align:center"> <button class="big-button" id="ext_animate"> <span>Animate 1</button> </div> <div class="col-xs-2 spacing" style="text-align:center"> <button class="big-button" id="roof_animate"> <span>Animate 2</button> </div> <div class="col-xs-2 spacing" style="text-align:center"> <button class="big-button" id="stairs_animate"> <span>Stairs Animate</button> </div> </div> <br/> <hr class="solid"> <!-- animate__animated animate__jackInTheBox --> <h2 class="h2_style ">Highlight</h2> <div class="row"> <div class="col-xs-2 spacing" style="text-align:center"> <button class="big-button" id="roof_highlight"> <span>Roof Highlight</button> </div> <div class="col-xs-2 spacing" style="text-align:center"> <button class="big-button" id="ext_highlight"> <span>EXT Highlight</button> </div> </div> </div> </div> </div> CSS
.row:after { height: 100%; display: table; clear: both; } 
