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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
.img-fluid{
width: 1150px;
height: 600px;
border: 2px solid green;
border-radius: 5px;
padding: 8px;
margin-top: 20px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: