bootstrap carousel not aligning items correctly - css

Question

I am relatively new to css and bootstrap and I'm trying to implement a carousel into my angular web app. I copied the source code from the bootstrap site but am having a lot of difficulties aligning everything correctly. Also the image slides don't seem to be working as well - when I click on the prev or next arrow the page reloads and it goes to /#carouselExampleIndicators.
<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">
<div class="carousel-item active">
<img class="img fluid" src="../../assets/img/actual.png" alt="First slide" width="300" height="300">
<div class="carousel-caption d-none d-md-block">
<h5>text 1</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="img fluid" src="../../assets/img/image0.jpeg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>text 2</h5>
<p>...</p>
</div>
</div>
<div class="carousel-item">
<img class="img fluid" src="../../assets/img/Picture1.png" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>text 3</h5>
<p>...</p>
</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>
Any styling/function advice would be appreciated - thanks!!

Answer 1

It's a pretty easy fix! You have a few options. The class for an '''img-fluid''' has the dash - it's not separate. See below. Add it to each image. For the href, just do the same thing you did on the first image - src="" is where you put that photo address.
<img class="img-fluid" src="../../yourimage.jpg" />
Once you do that, your image will take up the entire page. I would recommending doing the following to the top of the carousel:
<div id="carouselExampleIndicators" class="carousel slide container" data-ride="carousel">
Add the class container to contain your image.
With that, the carousel looks great!
I'm not sure exactly how you are trying to build your site, but you could also play around with bootstrap column sizing (ie col-md-8 col-lg-6). Let me know if this is the help you were looking for, and I'm happy to clarify. Have a great day.