title: bootstrap carousel not displaying images
body: <p>my carousel is not displaying images .I have 3 images stored in folder name images.I am using bootstrap 4 ,let me know what is wrong.I also wanted to know if I am suppose to insert images below 900*500 resolution.</p>
  
  <p>1-ronald.jpg of 634 * 424 then</p>
  
  <p>2-messi.jpg of 594 *432 and last</p>
  
  <p>3-pogba.jpg of 620 * 348 resolution</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-css lang-css prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"&gt;
  
   &lt;style type="text/css"&gt;
  
  
  .carousel-inner &gt; .carousel-item &gt; img {
          padding-top:35px;
      margin: 0 auto;
      border-radius: 10px 10px 10px 10px;
      
      max-height: 500px;
      width: 750px;  
     
  }
  
  
  
  .carousel-control.left, .carousel-control.right {
      background-image: none;
  
  
  }
  #carousel
  {
    margin-bottom: 50px;
  
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="carousel-example" class="carousel slide" data-ride="carousel"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carousel-example" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner" role="listbox"&gt;
      &lt;div class="carousel-item active"&gt;
        &lt;img data-src="images/ronaldo1.jpg" alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img data-src="images/pogba.jpg" alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item"&gt;
        &lt;img data-src="images/messi.jpg" alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev"&gt;
      &lt;span class="icon-prev" 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="#carousel-example" role="button" data-slide="next"&gt;
      &lt;span class="icon-next" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- jQuery first, then Bootstrap JS. --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script language="JavaScript" type="text/javascript"&gt;</code></pre>
  </div>
  </div>
  </p>