"Bootstrap 4 Cards"
Bootstrap 4.1.1 Snippet by Reason706

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<div class="container">
<div class="row">
<h1 class="text-center"><span>Bootstrap 4 Cards</span>Created with <i class="fa fa-heart"></i> from<a href="http://grafreez.com"> Grafreez.com</a></h1>
<div class="col-md-4">
<div class="card profile-card-1">
<img src="https://images.pexels.com/photos/946351/pexels-photo-946351.jpeg?w=500&h=650&auto=compress&cs=tinysrgb" alt="profile-sample1" class="background"/>
<img src="https://randomuser.me/api/portraits/women/20.jpg" alt="profile-image" class="profile"/>
<div class="card-content">
<h2>Savannah Fields<small>Engineer</small></h3>
<div class="icon-block"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i></a><a href="#"> <i class="fa fa-google-plus"></i></a></div>
</div>
</div>
<p class="mt-3 w-100 float-left text-center"><strong>Basic Profile Card</strong></p>
</div>
<div class="col-md-4">
<div class="card profile-card-2">
<div class="card-img-block">
<img class="img-fluid" src="https://images.pexels.com/photos/870903/pexels-photo-870903.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Card image cap">
</div>
<div class="card-body pt-5">
<img src="https://randomuser.me/api/portraits/men/64.jpg" alt="profile-image" class="profile"/>
<h5 class="card-title">Landon Hunt</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div class="icon-block"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i></a><a href="#"> <i class="fa fa-google-plus"></i></a></div>
</div>
</div>
<p class="mt-3 w-100 float-left text-center"><strong>Social Profile Card</strong></p>
</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
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700');
body{
font-family: 'Open Sans', sans-serif;
}
*:hover{
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
section{
float:left;
width:100%;
background: #fff; /* fallback for old browsers */
padding:30px 0;
}
h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
h1 a{color:#131313; font-weight:bold;}
/*Profile Card 1*/
.profile-card-1 {
font-family: 'Open Sans', Arial, sans-serif;
position: relative;
float: left;
overflow: hidden;
width: 100%;
color: #ffffff;
text-align: center;
height:368px;
border:none;
}
.profile-card-1 .background {
width:100%;
vertical-align: top;
opacity: 0.9;
-webkit-filter: blur(5px);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard React
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: