"bootstrap hero header with carousel"
Bootstrap 4.1.1 Snippet by bootstraplily.com

Post to Facebook Tweet this

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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active"> <img src="http://bootstraplily.com/demo/detto-ui-kit/img/intro-one/slider-one.jpg" class="d-block w-100" alt="...">
<div class="background-overlay"></div>
<div class="carousel-caption">
<h5 class="display-4 h4-md mb-4 font-weight-bold">A modular UI Kit for Bootstrap</h5>
<p class="h4 mb-5 pb-3 text-white-50">Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
<a href="" class="btn btn-lg btn-danger">View More</a> </div>
</div>
<div class="carousel-item"> <img src="http://bootstraplily.com/demo/detto-ui-kit/img/intro-one/slider-two.jpg" class="d-block w-100" alt="...">
<div class="background-overlay"></div>
<div class="carousel-caption">
<h5 class="display-4 mb-4 font-weight-bold">A modular UI Kit for Startups</h5>
<p class="h4 mb-5 pb-3 text-white-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="" class="btn btn-lg btn-danger">View More</a> </div>
</div>
<div class="carousel-item"> <img src="http://bootstraplily.com/demo/detto-ui-kit/img/intro-one/slider-three.jpg" class="d-block w-100" alt="...">
<div class="background-overlay"></div>
<div class="carousel-caption">
<h5 class="display-4 mb-4 font-weight-bold">A modular UI Kit for Development</h5>
<p class="h4 mb-5 pb-3 text-white-50">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
<a href="" class="btn btn-lg btn-danger">View More</a> </div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.carousel-caption {
top: 33%;
}
.carousel-item {
position: relative;
}
.carousel-item img {
z-index: 2;
}
.btn {
padding: 14px 26px;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn-danger {
background-color: #e34c43;
border-color: #e34c43;
}
.background-overlay {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.carousel-control-next, .carousel-control-prev{
z-index: 4;
}
@media(max-width:1180px) {
.carousel-caption h5 {
font-size: 2.5rem !important;
margin-bottom:15px !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro Angular
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: