"Bootstrap 4 Blog Carousel"
Bootstrap 4.1.1 Snippet by themesberg

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container cta-100 ">
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide container-blog" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
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
.cta-100 {
margin-top: 100px;
padding-left: 8%;
padding-top: 7%;
}
.col-md-4{
padding-bottom:20px;
}
.white {
color: #fff !important;
}
.mt{float: left;margin-top: -20px;padding-top: 20px;}
.bg-blue-ui {
background-color: #708198 !important;
}
figure img{width:300px;}
#blogCarousel {
padding-bottom: 100px;
}
.blog .carousel-indicators {
left: 0;
top: -50px;
height: 50%;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
background: #708198;
border-radius: 50%;
width: 8px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: