title: Bootstrap 4 carousel with to small thumbnails
body: <p>I've implemented a bootstrap carousel with thumbnails on my website but the thumbnail size is off, they are way too small.</p>
  
  <p>I fiddled some with the CSS code within the <code>foto_new</code> page. But my knowledge of CSS is not enough to get this working.</p>
  
  <p>Here is my page code:</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-html lang-html prettyprint-override"><code> &lt;head&gt;
        &lt;title&gt;Reis Foto"s&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="css/lo.css"&gt;
        &lt;link rel="stylesheet" href="css/boots.css" crossorigin="anonymous"&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" &gt;
      
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;style&gt;
      
        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
      
        #myCarousel .list-inline {
          white-space:nowrap;
          overflow-x:auto;
      }
      
      #myCarousel .carousel-indicators {
          position: static;
          left: initial;
          width: initial;
          margin-left: initial;
      }
      
      #myCarousel .carousel-indicators &gt; li {
          &lt;!--width: initial;--&gt;
          &lt;!--height: initial;--&gt;
          width: 200px;
          height: 50px;
          text-indent: initial;
      }
      
        &lt;!--#myCarousel .carousel-indicators li img {--&gt;
          &lt;!--display: block;--&gt;
          &lt;!--opacity: 0.5;--&gt;
        &lt;!--}--&gt;
      
        #myCarousel .carousel-indicators li.active img {
          opacity: 1;
        }
      
        #myCarousel .carousel-indicators li:hover img {
          opacity: 0.75;
        }
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;!--Ik gebruik hieronder alleen het middiv omdat dat de enige info is die ik wil vervangen--&gt;
          &lt;div class="col-md-12" id="middiv" style="background-color: rgba(255, 255, 255, 0.1)"&gt;
            &lt;div id="myCarousel" class="carousel slide" data-ride="carousel" align="center"&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner"&gt;
                &lt;div class="carousel-item active"&gt;
                  &lt;img src="/fotos/auto.jpg" alt="Los Angeles" style="width:80%;"&gt;
                &lt;/div&gt;
      
                &lt;div class="carousel-item"&gt;
                  &lt;img src="/fotos/robot.jpg" alt="Chicago" style="width:80%;"&gt;
                &lt;/div&gt;
      
                &lt;div class="carousel-item"&gt;
                  &lt;img src="/fotos/vrachtwagen.jpg" alt="New york" style="width:80%;"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
      
              &lt;!-- Left and right controls --&gt;
              &lt;a class="carousel-control-prev" href="#myCarousel" data-slide="prev"&gt;
                &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="carousel-control-next" href="#myCarousel" data-slide="next"&gt;
                &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
              &lt;/a&gt;
      
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators list-inline"&gt;
                &lt;li class="list-inline-item active"&gt;
                  &lt;a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel"&gt;
                    &lt;img src="/fotos/auto.jpg" class="img-fluid"&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
      
                &lt;li class="list-inline-item"&gt;
                  &lt;a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel"&gt;
                    &lt;img src="/fotos/robot.jpg" class="img-fluid"&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
      
                &lt;li class="list-inline-item"&gt;
                  &lt;a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel"&gt;
                    &lt;img src="/fotos/vrachtwagen.jpg"  class="img-fluid"&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
               &lt;/ol&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect that the thumbnails are a bigger size.</p>