title: Bootstrap Carousel Plugin image alignment
body: <p><a href="https://i.stack.imgur.com/ACLCG.jpg" rel="nofollow noreferrer">reduce bottom image height</a>I am student , am trying to use <strong>Bootstrap Carousel Plugin</strong>, And am using  w3school carousel example [<a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&amp;stacked=h]" rel="nofollow noreferrer">https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&amp;stacked=h]</a> so I need to increase the bottom height Carousel Image buttons it's too low, can any one help me. i have attached a photo below</p>
  
  <p>here is my tried code</p>
  
  <pre><code>  &lt;section id="intro" class="clearfix" style="
        padding: 80px 0 60px 0;
        padding-top: 80px;
        padding-right: 0px;
        padding-bottom: 60px;
        padding-left: 0px;
    "&gt;
            &lt;div class="container d-flex h-100"&gt;
  
          &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  
            &lt;ol class="carousel-indicators"&gt;
              &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;/ol&gt;
  
  
            &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                &lt;img src="img/dog2.jpg" alt="Los Angeles"  class="img-fluid" alt="Responsive image"&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                &lt;img src="img/duffy-brook-350228-2000x1333.jpg" alt="Chicago"  class="img-fluid" alt="Responsive image"&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
                &lt;img src="img/dog2.jpg" alt="New york"  class="img-fluid" alt="Responsive image"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>