title: How to do bootstrap carousel slide image fit to display in html and css?
body: <p>I am trying to achieve carousel image fit to all kind of display resolution. Currently it does not fit any display resolution. 
  How to do bootstrap for carousel image slide that fit to displays</p>
  
  <p>I have recorded my screen, that will show image is not fitted to display 
  <a href="https://drive.google.com/file/d/1QsUimIBhuIDYuTwbJtdZgx4CJUeuKwL5/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1QsUimIBhuIDYuTwbJtdZgx4CJUeuKwL5/view?usp=sharing</a> </p>
  
  <p>Here is the code i used</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
     
     Table Of Content
     
     1. Preloader
     2. Smooth Scroll
     3. Scroll Naviagation Background Change with Sticky Navigation
     4. Mobile Navigation Hide or Collapse on Click
     5. Scroll To Top
     6. Tooltip
     7. Ajaxchimp for Subscribe Form
     8. Portfolio Filtering
     9. Magnific Popup
    10. Testimonial Carousel/Slider
    11. Statistics Counter
   
  
  */
  
  
  (function ($) {
      'use strict';
  
      jQuery(document).ready(function () {
  
          
         /* Preloader */
    
          $(window).load(function () {
              $('.preloader').delay(800).fadeOut('slow');
          });
    
    
    
         /* Smooth Scroll */
  
          $('a.smoth-scroll').on("click", function (e) {
              var anchor = $(this);
              $('html, body').stop().animate({
                  scrollTop: $(anchor.attr('href')).offset().top - 50
              }, 1000);
              e.preventDefault();
          });
    
  
  
         
         /* Scroll Naviagation Background Change with Sticky Navigation */
     
          $(window).on('scroll', function () {
              if ($(window).scrollTop() &gt; 100) {
                  $('.header-top-area').addClass('navigation-background');
              } else {
                  $('.header-top-area').removeClass('navigation-background');
              }
          });
    
    
    
    
         /* Mobile Navigation Hide or Collapse on Click */
    
          $(document).on('click', '.navbar-collapse.in', function (e) {
              if ($(e.target).is('a') &amp;&amp; $(e.target).attr('class') != 'dropdown-toggle') {
                  $(this).collapse('hide');
              }
          });
          $('body').scrollspy({
              target: '.navbar-collapse',
              offset: 195
          
     });
     
    
    
    
          /* Scroll To Top */
    
          $(window).scroll(function(){
          if ($(this).scrollTop() &gt;= 500) {
              $('.scroll-to-top').fadeIn();
           } else {
              $('.scroll-to-top').fadeOut();
           }
      });
   
   
       $('.scroll-to-top').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
       });
    
  
          
          /* Tooltip */
           
           $(function () {
             $('[data-toggle="tooltip"]').tooltip()
             })
       
     
          
          /* Ajaxchimp for Subscribe Form */
    
           $('#mc-form').ajaxChimp();
       
       
    
    
          /* Portfolio Filtering */
  
          $('.portfolio-inner').mixItUp();
  
  
         
          /* Magnific Popup */
  
          $('.portfolio-popup').magnificPopup({
              type: 'image',
     
              gallery: { enabled: true },
     zoom: { enabled: true,
             duration: 500
       
            },
      
      
           image:{
                 markup: '&lt;div class="mfp-figure portfolio-pop-up"&gt;'+
                 '&lt;div class="mfp-close"&gt;&lt;/div&gt;'+
                 '&lt;div class="mfp-img"&gt;&lt;/div&gt;'+
                 '&lt;div class="mfp-bottom-bar portfolio_title"&gt;'+
                 '&lt;div class="mfp-title"&gt;&lt;/div&gt;'+
                 '&lt;div class="mfp-counter"&gt;&lt;/div&gt;'+
                 '&lt;/div&gt;'+
                 '&lt;/div&gt;',
  
                 titleSrc:function(item){
                  return item.el.attr('title');
                }
              }
      
      
            });
      
     
          /* Testimonial Carousel/Slider */
  
          $(".testimonial-carousel-list").owlCarousel({
              items: 1,
              autoPlay: true,
              stopOnHover: false,
              navigation: true,
              navigationText: ["&lt;i class='fa fa-long-arrow-left fa-2x owl-navi'&gt;&lt;/i&gt;", "&lt;i class='fa fa-long-arrow-right fa-2x owl-navi'&gt;&lt;/i&gt;"],
              itemsDesktop: [1199, 1],
              itemsDesktopSmall: [980, 1],
              itemsTablet: [768, 1],
              itemsTabletSmall: false,
              itemsMobile: [479, 1],
              autoHeight: true,
              pagination: false,
              transitionStyle : "fadeUp"
          });
    
    
    
    
          /* Statistics Counter */
    
          $('.statistics').appear(function() {
             var counter = $(this).find('.statistics-count');
             var toCount = counter.data('count');
        
             $(counter).countTo({
             from: 0,
             to: toCount,
             speed: 5000,
             refreshInterval: 50
             })
             });
                
       
              });
  
     })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    position: relative;
    text-align: center;
  }
  
  h1 span {
    background: #fff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
  }
  
  h1:before {
    background: #ddd;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
      top: 50%;
    width: 100%;
  }
  h1:before {
    left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
    &lt;head&gt;
    
  
      
      &lt;!-- Meta Tag --&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      
      
  
      
      
      &lt;!------stylesheet--------&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
     
  
  
      
      
      &lt;!-- All CSS Plugins --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/plugin.css"&gt;
      
      &lt;!-- Main CSS Stylesheet --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      
     
  &lt;/head&gt;
    
    &lt;body&gt;
    
  
      
      &lt;!-- Home Section Start --&gt;
      &lt;section class="home-section"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;&lt;/div&gt;
          &lt;/div&gt;
              &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
                    &lt;!-- Indicators --&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;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner"&gt;
                 &lt;div class="item active"&gt;
                    &lt;img src="https://images.unsplash.com/photo-1522206038088-8698bcefa6a0?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=4354213f9cd443e781a20faca346d279&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="First slide"&gt;
                      &lt;div class="carousel-caption"&gt; 
                     
                 &lt;/div&gt;
          
                 &lt;div class="item"&gt;
                    &lt;img src="https://images.unsplash.com/photo-1522205419828-f5b336fc3931?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=7b10bf52b7ea50de3250fe021944e57d&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" &gt;
                    
                 &lt;/div&gt;
      
                 &lt;div class="item"&gt;
                    &lt;img src="https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=74c51a189ca1ab912a127122cf6ba45f&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="Third slide"&gt;
                  
                 &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Left and right controls --&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;/section&gt;
          &lt;!-- Home Section End --&gt;
              
     
      &lt;!-- Footer End --&gt;
      
      &lt;!-- All Javascript Plugins  --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
   
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      
        
    &lt;/body&gt;
  
    
   
   
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using three images in for carousel slide effect and It scrolls horizontally. Images slide automatically but its does fit to any of devices. </p>