"Responsive Team Profiles with Social Links Free For Bootstrap"
Bootstrap 4.0.0 Snippet by nopapermarketing

<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://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <section class="team"> <div class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="col-lg-12"> <h6 class="description">Full-Time Faculty</h6> <div class="row pt-md"> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh4.googleusercontent.com/pDK93yBt7X07QgftJThFmqpPYmAcwLQ3FZUs45CDdHvCCu6fnHsSv-kjD5hhaA0veCnTgrL3BjBCXmg=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:lcalvert@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927218"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Loretta Calvert</h1> <h2>Paralegal</h2> <p>Office: 1318-02 <br>714.992.7218</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh6.googleusercontent.com/agiL1hLeyVRICyDc8zGx6mMr71EItfaLhyc7Hc2tJfJuydm6OJ_qe0YyPzJm68cdfCiAdruLLNRoyf4=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:ccantrell@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927203"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Candice Cantrell</h1> <h2>Computer Information Systems</h2> <p> Office: 1318-01 <br>714.992.7203</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh6.googleusercontent.com/a7s5a42BBrixrciB87N7XY-GUOC016QYN7Y3B7f--zOS3ndYsBnpgHvpLS7LeaXCYCkhmYm5K4QUEiY=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:acarlin@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927210"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Anna Carlin</h1> <h2>Computer Information Systems</h2> <p>Office: 320 – 07 <br>714.992.7210</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh6.googleusercontent.com/S2dQ3Pfatn7BD4msr4RJAM8skXHHne9DVfD6Eh6dvWutOt-0j4uySF7RjEMzw4Qrc6nHyj9GbtdRIDQ=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:dcraig@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927204"> <i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Dale Craig</h1> <h2>CIS Coordinator</h2> <p>Office: 511-01 <br>714.992.7204</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh4.googleusercontent.com/d0RG8g7HMwgI4nCyb6nYOrFSCzhRCi1QN4XXHQj5CNyoWAsgcM870Xl8fq6Bzom4K8_rV6O2koISkwM=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:sdayton@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927223"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Steve Dayton</h1> <h2>Paralegal Coordinator</h2> <p>Office: 320-07 <br>714.992.7214</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh4.googleusercontent.com/d0RG8g7HMwgI4nCyb6nYOrFSCzhRCi1QN4XXHQj5CNyoWAsgcM870Xl8fq6Bzom4K8_rV6O2koISkwM=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:gfernandez@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927214"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Gabriella Fernandez</h1> <h2>Computer Information Systems</h2> <p>Office: 320-07 <br>714.992.7214</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh6.googleusercontent.com/iy3rSHItUw6Sbh-qG8lRnAHIOvPN441n8aYJBEs3X4z25LXX5VPtNQf-LXw70Czd5oSRf_tsf0G1aFg=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:ggraves@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927220"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Gary Graves</h1> <h2>Business Management </h2> <p>Office: 320-03 <br>714.992.7220</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh3.googleusercontent.com/Ba9vmwXrMHYZHqBLmHXvoj5pHNMP_F2u1yg4hAMAil_usxr6Qim_lEppw6WZklCHRbuM38wiLcQ9XfY=w1260-h693" class="img-responsive"> <ul class="text-center"> <a href="mailto:cjane@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927209"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Courtney Jane</h1> <h2>Business Management</h2> <p>Office: 320-01 <br>714.992.7209</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh6.googleusercontent.com/zRGMLN5IrAj-I4IYHg0mN4lqx54aSjk2v3Oxy-VsL9dbe0d59CuyVshVRu5Vqap0GYa6wIDPIqwnjCg=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:smanjra@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927201"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Samreen Manjra</h1> <h2>Accounting</h2> <p>Office: 320 – 02 <br>714.992.7201</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh6.googleusercontent.com/R5G97mSt19NbpwT42pD128zrJb3nB31tvbSWhiTTI3gNjyVVZUtX7WG0Dm3RTnB7g-4g01CunhJmmfY=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:amcallister@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927200"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Alan McAllister</h1> <h2>Accounting Coordinator</h2> <p>Office: 320-05 <br>714.992.7200</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh3.googleusercontent.com/N_4m3dSnIzhPAejJrj7bfvA77KSK7DWXYPf5PiDo3fYt0AOWjeuwhmJSuHLgSVqE_2EM4uqxFIZuKEk=w1260-h693-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:bmccarthy@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927205"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Barry McCarthy</h1> <h2>Business Management</h2> <p>Office: 320-04 <br> 714.992.7205</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh3.googleusercontent.com/RpeW_ZVDK21fguBtiPDP7BNOECJgUltVRS0eF0keDNgE2BxVogMRygMfjL5wGXK5-M2qfhsrhlCyWVg=w1440-h806-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:lmelella@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927219"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Laura Melella</h1> <h2>Computer Information Systems</h2> <p>Office: 1318-03 <br>714.992.7219</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh4.googleusercontent.com/by0vBud71OzpXOlueYu1utpr8yMjkoyQqtSJxLkqdKTuoWv4XD3j3viKtj0BjOXYgRYx80wQQjFqyJI=w1440-h806-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:mscott1@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927216"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Ming-Yin Scott</h1> <h2>Accounting</h2> <p>Office: 320-06 <br>714.992.7216</p> </div> <div class="col-lg-3 col-md-6 col-sm-9 col-xs-12 profile"> <div class="img-box"> <img src="https://lh5.googleusercontent.com/zIr8txXkv4yc1G-H0bbS-2_GWINTfMjzk1tgEQK9nHZstwErixFqLvH4MeBol6MBRja1fKwWWLWW7gI=w1440-h806-rw" class="img-responsive"> <ul class="text-center"> <a href="mailto:rsmead@fullcoll.edu"><i class="fa fa-envelope-o fa-2x"></i></a> <a href="tel:+17149927207"><i class="fa fa-phone fa-2x"></i></a> </ul> </div> <h1>Richard Smead</h1> <h2>Computer Information Systems</h2> <p>Office: 1318-05 <br>714.992.7207 </p> </div> <div> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="col-md-10 col-md-offset-1 text-center"> </div> </div> </footer>
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); body{ font-family: 'Quicksand', sans-serif; } .team{ padding:75px 0; } h6.description{ font-weight: bold; letter-spacing: 2px; color: #999; border-bottom: 1px solid rgba(0, 0, 0,0.1); padding-bottom: 5px; } .profile{ margin-top: 25px; } .profile h1{ font-weight: normal; font-size: 20px; margin:10px 0 0 0; } .profile h2{ font-size: 14px; font-weight: lighter; margin-top: 5px; } .profile .img-box{ opacity: 1; display: block; position: relative; } .profile .img-box:after{ content:""; opacity: 0; background-color: rgba(0, 0, 0, 0.75); position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .img-box ul{ position: relative; z-index: 2; bottom: 50px; text-align: center; width: 100%; padding-left: 0px; height: 0px; margin:0px; opacity: 0; } .profile .img-box:after, .img-box ul, .img-box ul li{ -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .img-box ul i{ font-size: 20px; letter-spacing: 10px; } .img-box ul li{ width: 30px; height: 30px; text-align: center; border: 1px solid #00449e; margin: 2px; padding: 5px; display: inline-block; } .img-box a{ color:#fff; } .img-box:hover:after{ opacity: 1; } .img-box:hover ul{ opacity: 1; } .img-box ul a{ -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .img-box a:hover li{ border-color: #fff; color: #88C425; } a{ color:#88C425; } a:hover{ text-decoration:none; color:#00449e; } i.red{ color:#BC0213; }

Related: See More


Questions / Comments: