<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Text Carousel</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
background-size: cover;
}
.carousel-caption {
bottom: 20%;
}
.carousel-caption h5 {
font-size: 3rem;
font-weight: bold;
}
.carousel-caption p {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div id="textCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#textCarousel" data-slide-to="0" class="active"></li>
<li data-target="#textCarousel" data-slide-to="1"></li>
<li data-target="#textCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('your-image-url-1.jpg');">
<div class="carousel-caption d-none d-md-block">
<h5>First Slide</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('your-image-url-2.jpg');">
<div class="carousel-caption d-none d-md-block">
<h5>Second Slide</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('your-image-url-3.jpg');">
<div class="carousel-caption d-none d-md-block">
<h5>Third Slide</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#textCarousel" 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="#textCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me