" Carousel With control and Caption"
Bootstrap 4.0.0 Snippet by ashishinbase

<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-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> <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: