"Our Team section using bootstrap 4"
Bootstrap 4.1.1 Snippet by cleudiney

Post to Facebook Tweet this

<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 ----------> <html> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <section class="our-webcoderskull padding-lg"> <div class="container"> <div class="row heading heading-icon"> <h2>Our Team</h2> </div> <ul class="row"> <li class="col-12 col-md-6 col-lg-3"> <div class="cnt-block equal-hight" style="height: 349px;"> <figure><img src="http://www.webcoderskull.com/img/team4.png" class="img-responsive" alt=""></figure> <h3><a href="http://www.webcoderskull.com/">Pousada 1</a></h3> <p>Cabo Frio</p> <ul class="follow-us clearfix"> <li><a onclick="alterar()"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </ul> </div> </li> <li class="col-12 col-md-6 col-lg-3"> <div class="cnt-block equal-hight" style="height: 349px;"> <figure><img src="http://www.webcoderskull.com/img/team1.png" class="img-responsive" alt=""></figure> <h3><a href="#">Kappua </a></h3> <p>Freelance Web Developer</p> <ul class="follow-us clearfix"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </ul> </div> </li> <li class="col-12 col-md-6 col-lg-3"> <div class="cnt-block equal-hight" style="height: 349px;"> <figure><img src="http://www.webcoderskull.com/img/team4.png" class="img-responsive" alt=""></figure> <h3><a href="http://www.webcoderskull.com/">Manish </a></h3> <p>Freelance Web Developer</p> <ul class="follow-us clearfix"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </ul> </div> </li> <li class="col-12 col-md-6 col-lg-3"> <div class="cnt-block equal-hight" style="height: 349px;"> <figure><img src="http://www.webcoderskull.com/img/team2.png" class="img-responsive" alt=""></figure> <h3><a href="http://www.webcoderskull.com/">Atul </a></h3> <p>Freelance Web Developer</p> <ul class="follow-us clearfix"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </ul> </div> </li> </ul> </div> </section> <script type="text/javascript"> var livro = { autor: "Alexandre Dumas", titulo: "Os Três Mosqueteiros", id:1, dadoscompletos : function () { return "<br> ID: "+this.id +"<br> - Autor: "+this.autor+"<br> - Título: "+this.titulo; } }; function alterar() { document.getElementById("anabelle").innerHTML = "Este album é:" + livro.dadoscompletos(); } </script>
.row.heading h2 { color: #fff; font-size: 52.52px; line-height: 95px; font-weight: 400; text-align: center; margin: 0 0 40px; padding-bottom: 20px; text-transform: uppercase; } ul{ margin:0; padding:0; list-style:none; } .heading.heading-icon { display: block; } .padding-lg { display: block; padding-top: 60px; padding-bottom: 60px; } .practice-area.padding-lg { padding-bottom: 55px; padding-top: 55px; } .practice-area .inner{ border:1px solid #999999; text-align:center; margin-bottom:28px; padding:40px 25px; } .our-webcoderskull .cnt-block:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border: 0; } .practice-area .inner h3{ color:#3c3c3c; font-size:24px; font-weight:500; font-family: 'Poppins', sans-serif; padding: 10px 0; } .practice-area .inner p{ font-size:14px; line-height:22px; font-weight:400; } .practice-area .inner img{ display:inline-block; } .our-webcoderskull{ background: url("http://www.webcoderskull.com/img/right-sider-banner.png") no-repeat center top / cover; } .our-webcoderskull .cnt-block{ float:left; width:100%; background:#fff; padding:30px 20px; text-align:center; border:2px solid #d5d5d5; margin: 0 0 28px; } .our-webcoderskull .cnt-block figure{ width:148px; height:148px; border-radius:100%; display:inline-block; margin-bottom: 15px; } .our-webcoderskull .cnt-block img{ width:148px; height:148px; border-radius:100%; } .our-webcoderskull .cnt-block h3{ color:#2a2a2a; font-size:20px; font-weight:500; padding:6px 0; text-transform:uppercase; } .our-webcoderskull .cnt-block h3 a{ text-decoration:none; color:#2a2a2a; } .our-webcoderskull .cnt-block h3 a:hover{ color:#337ab7; } .our-webcoderskull .cnt-block p{ color:#2a2a2a; font-size:13px; line-height:20px; font-weight:400; } .our-webcoderskull .cnt-block .follow-us{ margin:20px 0 0; } .our-webcoderskull .cnt-block .follow-us li{ display:inline-block; width:auto; margin:0 5px; } .our-webcoderskull .cnt-block .follow-us li .fa{ font-size:24px; color:#767676; } .our-webcoderskull .cnt-block .follow-us li .fa:hover{ color:#025a8e; }

Related: See More

Vue Black Dashboard
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: