NiceSnippets.com
User Profile Card Design Usign Bootstrap 4
Here we are giving you new user profile card design with social icon. this is fully responsive user profile overview card design. in this card you can display user notification in number. display menu icon in this card on top corner. bootstrap 4 card design examples. bootstrap profile card layout.
We allows to free snippets of bootstrap 4 profile card , you can download full code of bootstrap 4 user profile template layout. Here in this post i will give you example of bootstrap profile layout snippet and you will get simple code of html, css and jquery. In profile card template snippet i give you three tab with html, css and js, you can easily get code of card css bootstrap layout.
<!DOCTYPE html>
<html>
<head>
<title>Card Design</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<br><br><br>
<div class="container main-section">
<div class="row">
<div class="offset-md-4 col-lg-4 bg-white">
<div class="row">
<div class="col-lg-12 text-right p-2">
<i class="fa fa-list" aria-hidden="true"></i>
</div>
<div class="col-lg-12 card-img text-center p-2">
<img src="https://thumbs.dreamstime.com/b/faceless-businessman-avatar-man-suit-blue-tie-human-profile-userpic-face-features-web-picture-gentlemen-85824471.jpg" class="rounded-circle">
<div class="badge badge-pill badge-danger p-1">2</div>
</div>
<div class="col-lg-12 text-center card-detail pt-3 pb-5">
<h2>Tom Toreto</h2>
<span>Designer & Web Developing</span>
<hr class="border">
</div>
<div class="col-lg-12 text-center pb-2 card-icon">
<span><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
<span><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></span>
<span><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background-color:#F44336;
}
.card-img img{
width:30%;
}
.card-img .badge{
position: absolute;
top:10px;
right:150px;
}
.card-detail span{
color:#a2a2a2;
font-size: 20px;
}
.border{
width: 20%;
}
.card-icon span i{
font-size:25px;
margin:10px;
color:#000;
}
.card-icon a .fa-twitter:hover{
color:#00ACED;
}
.card-icon a .fa-instagram:hover{
color:#D93965;
}
.card-icon a .fa-facebook:hover{
color:#3B5998;
}
