0

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;
}
user1734698
  • 157
  • 2
  • 2
  • 17
  • 1
    Please, try to explain better, you need the row to be full height based on what? you can try using 100vh only on the row too, but i don't know if it's that what you want – Flavio Caruso Nov 11 '20 at 13:09

1 Answers1

0

I was not sure what you wanted full height, but this will give you full height boxes using something like this:

<style>
html,body{height:100%;
}

.container {
    height:100%;
    width: 100%
}

.box{
    width:100%;
    height:100%;
    min-height:100%;
    background-color:#BE0000;
    color:#fff;
}
</style>

<div class="container">
<div class="Stuff box">
Content
</div>
<div class="otherClass box" style="background-color: purple">
Content 2
</div>
</div>
DrCustUmz
  • 77
  • 7