Ensure to insert the actual image link
in place of ...
within the img tag of your html code
<img src="..." class="d-block w-100" alt="...">
as shown below:
<img src="..." class="d-block w-100" alt="...">
Update:
If you prefer a carousel without images, you can achieve it by:
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000" >
<!-- <img src="https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467__340.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<!-- <img src="https://img.freepik.com/free-vector/abstract-dotted-banner-background_1035-18160.jpg?size=626&ext=jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="https://static.vecteezy.com/system/resources/thumbnails/001/234/358/small/modern-blue-halftone-banner-background.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
Quick tip: simply eliminate the img tags from the html and remove carousel-caption
class from the caption text div
Alternatively, you can utilize owl carousel to design visually appealing carousels as per your requirements
View the jsbin link I generated with your code:
https://jsbin.com/rufivuwije/edit?html,output