"Magazine Style Blog Section"
Bootstrap 4.1.1 Snippet by pineapp1es

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 ---------->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-6 py-0 pl-3 pr-1 featcard">
<div id="featured" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/f00" alt="">
<div class="card-img-overlay d-flex linkfeat">
<a href="#" class="align-self-end">
<span class="badge">Ekspor</span>
<h4 class="card-title">Review GSP: Amerika Ingin Perdagangan Saling Menguntungkan</h4>
<p class="textfeat" style="display: none;">makro.id – Duta Besar Amerika Serikat untuk Indonesia Joseph R. Donovan menegaskan, langkah pemerintah Amerika Serikat meninjau ulang pemberian Generalized System od Preferenes (GSP) akan menguntungkan kedua belah pihak. Menurut Donovan,</p>
</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/f60" alt="">
<div class="card-img-overlay d-flex linkfeat">
<a href="#" class="align-self-end">
<span class="badge">Pertumbuhan Ekonomi</span>
<h4 class="card-title">DPR Setujui Penambahan Anggaran BP Batam Rp565 Miliar</h4>
<p class="textfeat" style="display: none;">makro.id - Dewan Perwakilan Rakyat (DPR) menyetujui penambahan anggaran Badan Pengusahaan (BP) Batam Rp565 miliar. Dengan penambahan anggaran di tahun 2019 tersebut diharapkan dapat mendorong percepatan pembangunan Kota Batam. Anggota Komisi</p>
</a>
</div>
</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
* {
margin: 0 auto;
padding: 0;
color: white;
gap: 0;
}
a, a:focus , a:hover { text-decoration: none !important; color: white; }
a:hover, .btn { outline: none !important; }
/*CATEGORIES BADGE*/
.badge {
font-weight: 600;
font-size: .9rem;
color: white;
background-color: #00f;
}
.card-img { margin: 0; padding: 0; border-radius: 0 !important;}
/*FEATURED*/
.mg-2, .mg-4 { margin-left: -20px; }
.linkfeat {
background: rgba(76,76,76,0) black;
background: -moz-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: -webkit-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
$(".linkfeat").hover(
function () {
$(".textfeat").show(500);
},
function () {
$(".textfeat").hide(500);
}
);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template Pro
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Bootstrap 4 Blog Carousel

Questions / Comments: