bootstrap4 carousel image squished

Question

I am using bootstrap4 and my image in the carousel is squished. It was working fine before but when i updated the CDN the carousel changed too. There might not be anything different in the code between the two versions as when i updated to the new carousel code that matched the new CDN, the same issue occured.

   <!--carousel-->
  <div class="container-fluid"> <div id="carouselExampleIndicators" 
class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
<div class="carousel-item active">
  <img class="d-block img-fluid" src="images/trend board - 1.jpg" alt="First slide">
</div>
<div class="carousel-item">
  <img class="d-block img-fluid" src="images/trend board - 2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
  <img class="d-block img-fluid" src="images/trend board - 3.jpg" alt="Third slide">
</div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
  </a>
</div>
</div>


<!--CDN-->
<!--bootstrap 4 beta-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Are you trying to use beta or alpha.6? You comment says beta, but CDN is pointing to alpha.6 — Jade Cowan, Sep 06 '17 at 00:34

score 0 · Answer 1 · answered Sep 06 '17 at 00:46

My guess is it's an issue with the your src attributes on your img tags. These have to be valid URLs, and since they have spaces, those attributes would not be considered valid. Here's a link to another stack overflow question that address that particular issue.

I put together a codeply project with the carousel from bootstrap 4 beta. When you put valid URLs in the src attributes, everything works as expected.

bootstrap4 carousel image squished

1 Answers1