title: Setting Bootstrap Carousel image in Wordpress
body: <p>As shown in the attached image<a href="https://i.stack.imgur.com/KhQ07.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KhQ07.jpg" alt="image"></a>, there is a gap between the image and the menu bar. This is the theme I developed in Wordpress from scratch. 
  All my Carousel stuffs are inside this <code>div</code></p>
  
  <pre><code>    &lt;div id="awesome-carousel" class="carousel slide" data-ride="carousel"&gt;
  
      &lt;/div&gt;
  
  My css is 
  
      .carousel { background: #000; }
      .carousel .item { height: 800px; overflow: hidden; }
      .carousel .item img { width: 100%; height: auto; margin-top: -0%; }
      .carousel-caption a { color: #fff; }
  </code></pre>
  
  <p>(1)How to remove the gap?
    (2)Then my image is not clipped at the bottom, how can I include the whole image inside the area?
      My full code inside page-home.php is</p>
  
  <pre><code>&lt;?php get_header(); ?&gt; 
  &lt;div class = "container-fluid" style="overflow-y: auto"&gt;   
    &lt;div class="row"&gt; 
      &lt;div id="awesome-carousel" class="carousel slide" data-ride="carousel"&gt;
  
            &lt;!-- Wrapper for slides --&gt;
            &lt;div class="carousel-inner" role="listbox"&gt;
  
              &lt;?php 
  
                  $args_cat = array(
                      'include' =&gt; '18, 19, 22'
                  );
  
                  $categories = get_categories($args_cat);
                  $count = 0;
                  $bullets = '';
                  foreach($categories as $category):
  
                      $args = array( 
                          'type' =&gt; 'post',
                          'posts_per_page' =&gt; 1,
                          'category__in' =&gt; $category-&gt;term_id,
  
                      );
  
                      $lastBlog = new WP_Query( $args ); 
  
                      if( $lastBlog-&gt;have_posts() ):
  
                          while( $lastBlog-&gt;have_posts() ): $lastBlog-&gt;the_post(); ?&gt;
  
                              &lt;div class="item &lt;?php if($count == 0): echo 'active'; endif; ?&gt;"&gt;
                                 &lt;?php the_post_thumbnail('full'); ?&gt;
                                 &lt;div class="carousel-caption"&gt;
                                    &lt;?php the_title( sprintf('&lt;h1 class="entry-title"&gt;&lt;a href="%s"&gt;', esc_url( get_permalink() ) ),'&lt;/a&gt;&lt;/h1&gt;' ); ?&gt;
                                                            &lt;small&gt;&lt;?php the_category(' '); ?&gt;&lt;/small&gt;
                                 &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;?php $bullets .= '&lt;li data-target="#awesome-carousel" data-slide-to="'.$count.'" class="'; ?&gt;
                              &lt;?php if($count == 0): $bullets .='active'; endif; ?&gt;
  
                              &lt;?php  $bullets .= '"&gt;&lt;/li&gt;'; ?&gt;
  
                          &lt;?php endwhile;
  
                      endif;
  
                      wp_reset_postdata();
  
                  $count++;
  
                  endforeach;
  
              ?&gt;
  
              &lt;!-- Indicators --&gt;
                &lt;ol class="carousel-indicators"&gt;
                  &lt;?php echo $bullets; ?&gt;
                &lt;/ol&gt;
  
            &lt;/div&gt;
  
            &lt;!-- Controls --&gt;
            &lt;a class="left carousel-control" href="#awesome-carousel" role="button" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="right carousel-control" href="#awesome-carousel" role="button" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right" 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 &gt;
     &lt;!-- This is for Welcome Message --&gt;
     &lt;div class="row welcome"&gt;
      &lt;h1&gt;Welcome to MyanmarTourism&lt;/h1&gt;
      &lt;p&gt;Wwer eree ere ae llji er we lkjj ewer  jlkjkj erw jkljer lkjkje werewer wkerkjkl. We reakl lkjle aere ar akljiu are jearear lkljkjare. Jk are lkjklul kljrea elkjare lj. He ioierwer sdfsdf sdfeiuit kare adfkjkjl. Wer kjljser sejrlj ekrjkjsfiu ekrjlkejk.&lt;/p&gt;
     &lt;/div&gt;   
  
  &lt;/div&gt;   
  
  &lt;?php get_footer(); ?&gt;
  </code></pre>
  
  <p>Thanks</p>