title: How to make my carousel fill only 60% of screen size so the rest can be used by panels directly below it
body: <p>How could I make the following carousel fill only 60% of screen size (without scrolling) so the remaining 40% can be used by panels directly below it. Images would have to shrink along with carousel depending on desktop screen-size to fill only 60%.</p>
  
  <p>Please note:
  I have looked at the post <a href="https://stackoverflow.com/questions/28589911/bootstrap-change-carousel-height">Bootstrap change carousel height</a>, and tried changing </p>
  
  <pre><code>.carousel-inner{
     height: 60%px;
  }
  
  .item, img{
      height: 100% !important;
      width:  100% !important;
      border: 1px solid red;
  }
  </code></pre>
  
  <p>but without success.</p>
  
  <p>The code for my current layout is:</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  
      &lt;!-- fonts --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt; 
  
      &lt;title&gt;Layout Sample&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body class="body-cust text-white"&gt;
  
    &lt;!-- NAVIGATION BAR --&gt;
    &lt;nav class="navbar sticky-top navbar-expand-lg navbar-custom"&gt;
      &lt;a class="navbar-brand" href="#"&gt;
        &lt;img src="images/logo.png" width="32" height="32" alt=""&gt; 
      &lt;/a&gt; &lt;!-- Navigation Logo Goes here --&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="#"&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Forum&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;FAQ&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link" href="#"&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;form class="form-inline"&gt; &lt;!-- MUST ADD form-inline class here--&gt;
        &lt;!-- input fields --&gt;
        &lt;div class="form-group"&gt;
          &lt;label style="margin-right: 10px"&gt;E-Mail&lt;/label&gt;
          &lt;input class="form-control" type="text" placeholder="E-Mail"&gt;
        &lt;/div&gt;
        &lt;span style="width: 15px"&gt;&lt;/span&gt;
        &lt;div class="form-group"&gt;
          &lt;label style="margin-right: 10px"&gt;Password&lt;/label&gt;
          &lt;input type="password" class="form-control" placeholder="Password"&gt;
        &lt;/div&gt;
        &lt;span style="width: 10px"&gt;&lt;/span&gt;
        &lt;button class="btn btn-outline-pink my-2 my-sm-0" type="submit"&gt;Login&lt;/button&gt;
  
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;!-- MAIN CONTENT --&gt;
    &lt;div class="container" style="margin-top: 10px"&gt;
  
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div id="carouselExampleIndicators" class="carousel slide caroussel-cust" data-ride="carousel"&gt;
                &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
                &lt;/ol&gt;
                &lt;div class="carousel-inner"&gt;
                  &lt;div class="carousel-item active"&gt;
                    &lt;img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ed895556f%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ed895556f%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22284.5%22%20y%3D%22220.1%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide"&gt;
                  &lt;/div&gt;
                  &lt;div class="carousel-item"&gt;
                    &lt;img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ed8955574%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ed8955574%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22245.5%22%20y%3D%22220.1%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide"&gt;
                  &lt;/div&gt;
                  &lt;!-- 3rd Caroussel Image --&gt;
                  &lt;div class="carousel-item"&gt;
                    &lt;img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ed895557a%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ed895557a%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22275.5%22%20y%3D%22220.1%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
                  &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                &lt;/a&gt;
                &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
                  &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col-md-4" style=" background-color: green; height: 50px"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4" style=" background-color: red; height: 50px"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4" style=" background-color: yellow; height: 50px"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
    &lt;/div&gt;
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>