"Bootstrap 4 Carousel With control and Caption"
Bootstrap 4.0.0 Snippet by MARahman49

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="carousel" id="slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> <li data-target="#slide" data-slide-to="2"></li> <li data-target="#slide" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://static.pexels.com/photos/730981/pexels-photo-730981.jpeg" class="img-fluid"> <div class="carousel-caption"> <h3>Mountains</h3> <p>A mountain is a large landform that stretches above the surrounding land in a limited area, usually in the form of a peak. A mountain is generally steeper than a hill. Mountains are formed through tectonic forces or volcanism.</p> </div> </div> <div class="carousel-item"> <img src="https://static.pexels.com/photos/655761/pexels-photo-655761.jpeg" class="img-fluid"> <div class="carousel-caption"> <h3>Lakes</h3> <p>A lake (from Latin lacus) is a large body of water (larger and deeper than a pond) within a body of land. As a lake is separated from the ocean, it is not a sea. Some lakes are very big, and people in the past sometimes called them seas</p> </div> </div> <div class="carousel-item"> <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-fluid"> <div class="carousel-caption"> <h3>Autumn</h3> <p>Autumn, also known as fall in American and Canadian English, is one of the four temperate seasons. Autumn marks the transition from summer to winter, in September (Northern Hemisphere) or March (Southern Hemisphere), when the duration of daylight becomes noticeably shorter and the temperature cools down considerably.</p> </div></div> <div class="carousel-item"><img src="https://static.pexels.com/photos/655679/pexels-photo-655679.jpeg" class="img-fluid"> <div class="carousel-caption"> <h3>Cloudes</h3> <p>In meteorology, a cloud is an aerosol comprising a visible mass of minute liquid droplets, frozen crystals, or particles suspended in the atmosphere above the surface of a planetary body. The droplets and crystals may be made of water or various chemicals.</p> </div></div> </div> <a href="#slide" class="carousel-control-prev" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a href="#slide" class="carousel-control-next" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div>
.img-fluid{ width: 1150px; height: 600px; border: 2px solid green; border-radius: 5px; padding: 8px; margin-top: 20px; }

Related: See More


Questions / Comments: