Bootstrap Carousel slide not working and format too - html

Question

I followed the professor's instructions correctly, however this is the result. Someone can help me please?
My example
This is how the professor has done:
Professor's carousel
<div class="container"><!--Start row contents-->
<div class="row row-content">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/uthappizza.png" class="d-block img-fluid" alt="uthappizza">
</div>
<div class="carousel-item">
<img src="img/buffet.png" class="d-block img-fluid" alt="buffet">
</div>
<div class="carousel-item">
<img src="img/alberto.png" class="d-block img-fluid" alt="alberto">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>

Answer 1

I ran your code and it's working. I guess you mean why in your professor's version you can see some pictures on the carousel, but not in your version. You can easily do that by adding captions to your slides with the .carousel-caption element within any .carousel-item. You can read more about it on the following page:
https://getbootstrap.com/docs/5.1/components/carousel/
<div class="container">
<!--Start row contents-->
<div class="row row-content">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/uthappizza.png" class="d-block img-fluid" alt="uthappizza">
<div class="carousel-caption d-none d-md-block text-black">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/buffet.png" class="d-block img-fluid" alt="buffet">
<div class="carousel-caption d-none d-md-block text-black">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/alberto.png" class="d-block img-fluid" alt="alberto">
<div class="carousel-caption d-none d-md-block text-black">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>