"Team Profiles with Social Links - Bootstrap 4"
Bootstrap 4.0.0 Snippet by Anita26

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="content">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb40 text-center">
<h1 class="page-title">MEET ATTORNEYS TEAM</h1>
<!-- /.section-title -->
</div>
</div>
<div class="row">
<!-- team-block -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb30">
<div data-aos="fade-up" class="team-block active">
<div class="team-img">
<a href="#">
<img src="https://easetemplate.com/free-website-templates/practical/images/team_img_1.jpg" alt="" class="img-fluid">
<div class="social-media">
<a href="#" class="social-icon-box"><i class="fab fa-facebook-f"></i></a>
<br>
<a href="#" class="social-icon-box"><i class="fab fa-twitter"></i></a>
<br>
<a href="#" class="social-icon-box"><i class="fab fa-google-plus-g"></i></a>
<br>
<a href="#" class="social-icon-box"><i class="fab fa-pinterest-p"></i></a>
</div>
</a>
</div>
<div class="team-content">
<h4>William B. Smith</h4>
</div>
</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
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Noto Serif', serif; letter-spacing: 0px; font-size: 16px; color: #55595d; font-weight: 400; line-height: 32px; }
h1, h2, h3, h4, h5, h6 { color: #113d71; margin: 0px 0px 12px 0px; font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: 1; }
h1 { font-size: 36px; }
h2 { font-size: 26px; line-height: 38px; }
h3 { font-size: 22px; line-height: 32px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; line-height: 27px; }
h6 { font-size: 12px; }
p { margin: 0 0 20px; line-height: 1.7; }
p:last-child { margin: 0px; }
ul, ol { font-family: 'Montserrat', sans-serif; }
a { text-decoration: none; color: #55595d; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #c38d3f; }
.content{padding-top:80px; padding-bottom:80px;}
.mb40{margin-bottom:40px;}
.team-block { }
.team-img { margin-bottom: 20px; position: relative; }
.team-img img { width: 100%; }
.team-img img.border { border-color: #fff !important; }
.social-media { position: absolute; bottom: 36px; opacity: 0; }
.social-icon-box { margin-bottom: 5px; background-color: #193e6b; width: 46px; height: 46px; color: #ffffff; font-size: 16px; padding: 15px 19px 26px 16px; display: inline-block; line-height: 1.2; }
.team-img:hover .social-media { opacity: 1; transition: 2s ease; }
.team-block.active .social-media { opacity: 1; transition: 2s ease; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Bootstrap Social Card

Questions / Comments: