Bootstrap Snippet Our Team section using bootstrap 4 using HTML CSS Bootstrap

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="msvalidate.01" content="36A28D9109C077BA3E623651FC1656F4" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="fb:admins" content="19908503" /> <meta property="fb:app_id" content="112989545392380" /> <meta property="og:title" content="HTML Snippets for Twitter Boostrap framework : Bootsnipp.com" /> <meta property="og:type" content="website" /> <meta property="twitter:account_id" content="786331568" /> <meta property="og:url" content="https://bootsnipp.com/snippets/nNoMz" /> <meta itemprop="name" content="Bootstrap Our Team section using bootstrap 4 Example"> <meta itemprop="description" content="Bootstrap example of Our Team section using bootstrap 4 using HTML, Javascript, jQuery, and CSS. Snippet by webcoderskull"> <meta name="description" content="Bootstrap example of Our Team section using bootstrap 4 using HTML, Javascript, jQuery, and CSS. Snippet by webcoderskull"> <meta name="keywords" content="Bootstrap, css, javascript, jquery, code, example, snippet,Our Team section using bootstrap 4, "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@bootsnipp"> <meta name="twitter:title" content="Our Team section using bootstrap 4"> <meta name="twitter:description" content="High quality Bootstrap 4.1.1 Snippet by webcoderskull. Share yours today!"> <meta name="twitter:creator" content="@bootsnipp"> <meta name="twitter:image" content="https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/0b0e75d3ced144613843e0c811de78e6ea977534.png "> <meta property="og:image" content="https://bootsnipp.com/img/logo.jpg" /> <meta property="og:site_name" content="Bootsnipp.com" /> <meta property="og:description" content="Awesome Bootstrap HTML CSS JS Snippet on Bootsnipp.com." /> <title>Bootstrap Snippet Our Team section using bootstrap 4 using HTML CSS Bootstrap </title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <link rel="shortcut icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-144x144-precomposed.png"> <link rel="alternate" type="application/rss+xml" title="Latest snippets from Bootsnipp.com" href="https://bootsnipp.com/feed.rss" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">  <link rel="stylesheet" href="/dist/bootsnipp.min.css">   <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); window.onload = function() { /* $('body').append('<script type="text/javascript" src="https://srv.buysellads.com/ads/CVADLKQJ.json?callback=drop_ad" async><\/script>'); $('body').append("<style>.bsa-apiads {\ line-height: 1.5;\ display: inline-block;\ float: left;\ font-size: 12px;\ background-color: #5A8DB6;\ border: solid 1px #337799;\ box-shadow: inset 0 1px hsla(0, 0%, 100%, .1);\ box-sizing: border-box;\ background-image: url('http://www.danstools.com/devops/img/devoops_pattern_b10.png');\ margin: 1em 1em 0 2em;\ border-radius: 4px;\ text-align: center;\ padding: .25em;\ }\ \ .bsa-apiads a:before {\ margin-right: 4px;\ padding: 2px 6px;\ border-radius: 3px;\ background-color: #58B668;\ color: #fff;\ content: 'Ad';\ }\ \ .bsa-apiads a {\ color: #fff;\ }\ \ .bsa-apiads a:hover {\ color: inherit;\ }</style>");*/ setTimeout(function() { var ad = document.querySelector(".bsap_ac1f95c148ce6148393fd34e69a52240"); var promos = document.querySelectorAll(".l26ul"); var isblock = 0; for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (isblock ==1 || (ad && ad.innerHTML.replace(/\s/g, "").length == 0)) { isblock = 1; // ad.style.cssText = 'display:block !important'; // promo.style.cssText = 'display:none !important'; promo.innerHTML = ''; promo.style.display= 'inline-block'; promo.style.visibility= 'visible'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = ''; // var promotwo = document.querySelector("#toppromo2"); promo.childNodes[0].childNodes[0].style.width= ''; } } }, 1000); }; </script> <script type="text/javascript"> var fb_param = {}; fb_param.pixel_id = '6007046190250'; fb_param.value = '0.00'; (function(){ var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(fpw, ref); })(); </script> <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6007046190250&value=0" /></noscript> </head> <body>  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>  <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a class="navbar-brand animate" href="https://bootsnipp.com">Bootsnipp</a> </div> </div>   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-left"> <li> <a href="#" class="dropdown-toggle " data-toggle="dropdown">Bootstrap <span class="caret"></span> <span style="font-size:.5em; position:absolute; top:3px; left:2px">For</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">CSS Frameworks</li> <li class="active"><a href="/" class="">Bootstrap</a></li> <li class=""><a href="/foundation" class="">Foundation</a></li> <li class=""><a href="/semanticui" class="">Semantic UI</a></li> <li class=""><a href="/materialize" class="">Materialize</a></li> <li class=""><a href="/purecss" class="">Pure</a></li> <li class=""><a href="/bulma" class="">Bulma</a></li> <li class="dropdown-header">References</li> <li class=""><a href="/cssref" class="">CSS Reference</a></li>  </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class=""> <form action="https://bootsnipp.com/search" method="GET" role="search"> <input style="width:100%;margin-top:10px;" type="text" class="input-sm form-control" name="q" placeholder="Search for snippets"> </form> </li>    <li> <a href="#" class="dropdown-toggle " data-toggle="dropdown">Tools <span class="caret"></span></a> <ul class="dropdown-menu" role="menu">  <li class=""><a href="https://bootsnipp.com/forum/bootstrap" class="">Community</a></li> <li class=""><a href="https://bootsnipp.com/builder" class="">Page Builder <span class="pull-right glyphicon glyphicon-modal-window"></span></a></li> <li class=""><a href="https://bootsnipp.com/forms" class="">Form Builder <span class="pull-right glyphicon glyphicon-tasks"></span></a></li> <li class=""><a href="https://bootsnipp.com/buttons" class="">Button Builder <span class="pull-right glyphicon glyphicon-edit"></span></a></li> <li class=""><a href="https://bootsnipp.com/iconsearch" class="">Icon Search <span class="pull-right glyphicon glyphicon-search"></span></a></li> <li class="dropdown-header">Dan's Tools</li> <li class=""><a href="http://www.cleancss.com/diff-compare-merge/" class="">Diff / Merge <span class="pull-right glyphicon glyphicon-transfer"></span></a></li> <li class=""><a href="http://www.hexcolortool.com/" class="">Color Picker <span class="pull-right glyphicon glyphicon-pencil"></span></a></li> <li class=""><a href="http://www.danstools.com/keyword-tool/" class="">Keyword Tool <span class="pull-right glyphicon glyphicon-list-alt"></span></a></li> <li class=""><a href="http://www.cssfontstack.com/Web-Fonts" class="">Web Fonts <span class="pull-right glyphicon glyphicon-font"></span></a></li> <li class=""><a href="http://www.htaccessredirect.net/" class="">.htaccess Generator <span class="pull-right glyphicon glyphicon-console"></span></a></li> <li class=""><a href="http://www.favicon-generator.org/" class="">Favicon Generator <span class="pull-right glyphicon glyphicon-picture"></span></a></li> <li class=""><a href="http://www.website-performance.org/" class="">Site Speed Test <span class="pull-right glyphicon glyphicon-dashboard"></span></a></li> </ul> </li> <li class="dropdown"> <a href="https://bootsnipp.com/snippets" class="dropdown-toggle " data-toggle="dropdown">Snippets <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class=""><a href="https://bootsnipp.com" class="">Featured <span class="pull-right glyphicon glyphicon-star"></span></a></li> <li class=""><a href="https://bootsnipp.com/tags" class="">Tags <span class="pull-right glyphicon glyphicon-tags"></span></a></li> <li class="dropdown-header">By Bootstrap Version</li> <li><a href="https://bootsnipp.com/tags/4.1.1" class="">4.1.1</a></li> <li><a href="https://bootsnipp.com/tags/4.0.0" class="">4.0.0</a></li> <li><a href="https://bootsnipp.com/tags/3.3.0" class="">3.3.0</a></li> <li><a href="https://bootsnipp.com/tags/3.2.0" class="">3.2.0</a></li> <li><a href="https://bootsnipp.com/tags/3.1.0" class="">3.1.0</a></li> <li><a href="https://bootsnipp.com/tags/3.0.3" class="">3.0.3</a></li> <li><a href="https://bootsnipp.com/tags/3.0.1" class="">3.0.1</a></li> <li><a href="https://bootsnipp.com/tags/3.0.0" class="">3.0.0</a></li> <li><a href="https://bootsnipp.com/tags/2.3.2" class="">2.3.2</a></li> </ul> </li> <li class=""><a href="https://bootsnipp.com/register" class="">Register</a></li> <li id="nav-login-btn" class=""><a href="https://bootsnipp.com/login" class="">Login</a></li>  </ul> </div> </div>  </nav> <div class="container" style="margin-top:10px;"> <div class="row" itemscope="http://schema.org/Thing"> <div class="col-sm-12 col-md-4"> <div class="title-bar" style="margin-bottom:0px;"> <a href="https://bootsnipp.com/webcoderskull" title="Bootstrap snippets by webcoderskull" class="avatar-sm-container pull-left"><img src="https://secure.gravatar.com/avatar/d2b57121e4f1740006ce3ce58b1ad838?s=100&r=g&d=mm" class="img-rounded user-avatar-sm"></a> <h4 itemprop="name">"Our Team section using bootstrap 4"<br> <small>Bootstrap 4.1.1 Snippet by <a href="https://bootsnipp.com/webcoderskull" title="Bootstrap snippets by webcoderskull" itemscope itemtype="http://schema.org/Person" itemprop="name">webcoderskull</a></small> </h4> <div class="clearfix"></div> </div> <div id="tags" itemprop="description" style="padding-top:0px; float:left;"> <a href="https://bootsnipp.com/tags/4.1.1"><span class="label label-primary">4.1.1</span></a> </div> </div> <div class="col-sm-12 col-md-8"> <div class="row" style="margin-top:10px"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"> <center>  <div id="ezoic-pub-ad-placeholder-103"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block;width:728px;height:90px" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="728x90"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </center> </div>  </div> </div> </div> <div class="row" style="margin-top: 10px;margin-bottom:10px;"> <div class="col-md-8"> <div class="btn-group"> <button type="button" id="show-preview" class="active btn btn-info">Preview</button> <button type="button" id="show-html" class="btn btn-info">HTML</button> <button type="button" id="show-css" class="btn btn-info">CSS</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-cog"></span>  </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="https://bootsnipp.com/fullscreen/nNoMz" target="_blank"><span class="glyphicon glyphicon-fullscreen"></span> View Full Screen</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="icon-code-fork"></span> Fork </button> <ul class="dropdown-menu pull-right" role="menu" style="max-height:300px;overflow-y:scroll"> <li><a href="https://bootsnipp.com/fork/nNoMz" id="reboot" title="Copy this snippet"><span class="icon-code-fork"></span> Fork this</a></li> </ul> </div>  <div id="action-bar" style="display: inline-block"> <a href="#" class="btn btn-default disabled"><i class="icon-eye-open"></i> 238.8K</a> <a href="#comments" class="btn btn-default tip" title="View comments"><i class="icon-comment"></i>&nbsp</a> <a href="https://bootsnipp.com/favorites/snippet/nNoMz?url=snippets%2FnNoMz" class="btn btn-default tip" title="Please log in to favorite this snippet"><span class="glyphicon glyphicon-thumbs-up"></span> 77 Fav</a> </div> </div> <div class="col-md-4"> <div class="pull-right social-sharing hidden-xs" style="padding: 0px"> <a href="#" class="btn btn-primary" onclick="window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('http://bootsnipp.com/snippets/nNoMz') +'&t=' + encodeURIComponent('Our Team section using bootstrap 4 #Bootstrap #snippet'), 'facebook-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-facebook"></i> </a> <a href="#" class="btn btn-info" onclick="window.open( 'https://twitter.com/share?url='+encodeURIComponent('http://bootsnipp.com/snippets/nNoMz')+'&text='+encodeURIComponent('I shared a cool #snippet on @bootsnipp :') + '&count=none/', 'twitter-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-twitter"></i> </a> </div> </div> <div class="row visible-xs"> <div class="col-md-12"> <p> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary" onclick="window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('http://bootsnipp.com/snippets/nNoMz') +'&t=' + encodeURIComponent('Our Team section using bootstrap 4 #Bootstrap #snippet'), 'facebook-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-facebook"></i> Post to Facebook </a> <a href="#" class="btn btn-info" onclick="window.open( 'https://twitter.com/share?url='+encodeURIComponent('http://bootsnipp.com/snippets/nNoMz')+'&text='+encodeURIComponent('I shared a cool #snippet on @bootsnipp :') + '&count=none/', 'twitter-share-dialog', 'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 )); return false;"> <i class="icon-twitter"></i> Tweet this </a> </div> </p> </div> </div> </div> </div> </div> <div id="playground-container" style="overflow: hidden"> <div id="preview-container"><iframe id="snippet-preview" class="preview-iframe" src="//s.bootsnipp.com/iframe/nNoMz"></iframe></div> <div class="container"> <div class="row" itemscope="http://schema.org/Code" > <div class="col-lg-12" itemprop="programmingLanguage" content="html/css/js"> <div id="editor-html" class="playground-editor" style="height:500px;" itemprop="sampleType"><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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <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/">Web coder skull</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/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></div> <div id="editor-css" class="playground-editor" style="height:500px;" itemprop="sampleType">.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; } </div> <div id="editor-js" class="playground-editor" style="height:500px;" itemprop="sampleType"></div> </div> </div> </div> </div> <div class="container"> <div class="col-md-12"> <h2>Related: <small><a href="https://bootsnipp.com/similar/nNoMz">See  More</a></small></h2> <div class="row"> <div class="scrollpost col-sm-12 col-xs-12 col-md-3 col-lg-3 col-xl-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts"> <a target="_new" href="https://www.creative-tim.com/product/material-dashboard-dark?partner=114912" class="tip" data-toggle="tooltip" title="Favorited"></a> <a href="/templates"> <span class="label label-info tip" data-toggle="tooltip" title="" data-original-title="Templates"> Free Template</span></a> </p> <p class="lead snipp-title"> <a target="_new" href="https://www.creative-tim.com/product/material-dashboard-dark?partner=114912">Material Dashboard Dark Edition<br/></a> </p> </div> <a target="_new" href="https://www.creative-tim.com/product/material-dashboard-dark?partner=114912"> <img class="danlazy" src="https://s3.amazonaws.com/creativetim_bucket/products/95/thumb/opt_mdb_thumbnail.jpg?1535551949" width="320" height="240" alt="Material Dashboard Dark Edition"> </a> <div class="caption"> </div> </div> </div> <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts hidden-md"> <a href="https://bootsnipp.com/snippets/qr9bx" class="tip" data-toggle="tooltip" title="Viewed">139.3K <i class="icon-eye-open"></i></a> <a href="https://bootsnipp.com/snippets/qr9bx" class="tip" data-toggle="tooltip" title="Favorited">97 <i class="icon-thumbs-up"></i></a>  </p> <p class="lead snipp-title"> <a href="https://bootsnipp.com/snippets/qr9bx">Team Design Section with Pure CSS Effect</a> </p> </div> <a href="https://bootsnipp.com/snippets/qr9bx"> <img class="lazy" data-original="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/fa88be3efe14c58d9ae483609872650beec7b6c4.jpg" width="320" height="240" alt="Team Design Section with Pure CSS Effect"> </a> <div class="caption"> </div> </div> </div> <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts hidden-md"> <a href="https://bootsnipp.com/snippets/0ekoq" class="tip" data-toggle="tooltip" title="Viewed">124.0K <i class="icon-eye-open"></i></a> <a href="https://bootsnipp.com/snippets/0ekoq" class="tip" data-toggle="tooltip" title="Favorited">122 <i class="icon-thumbs-up"></i></a>  </p> <p class="lead snipp-title"> <a href="https://bootsnipp.com/snippets/0ekoq">Services section using bootstrap 4</a> </p> </div> <a href="https://bootsnipp.com/snippets/0ekoq"> <img class="lazy" data-original="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/823270539964d74cd4ef07f144da0c0a9fe3493c.jpg" width="320" height="240" alt="Services section using bootstrap 4"> </a> <div class="caption"> </div> </div> </div> <div class="col-sm-3 col-xs-3 col-md-3 col-lg-3"> <div class="thumbnail bootsnipp-thumb"> <div> <p class="pull-right view-counts hidden-md"> <a href="https://bootsnipp.com/snippets/92xNm" class="tip" data-toggle="tooltip" title="Viewed">340.1K <i class="icon-eye-open"></i></a> <a href="https://bootsnipp.com/snippets/92xNm" class="tip" data-toggle="tooltip" title="Favorited">238 <i class="icon-thumbs-up"></i></a>  </p> <p class="lead snipp-title"> <a href="https://bootsnipp.com/snippets/92xNm">Team design card flipper using bootstrap 4</a> </p> </div> <a href="https://bootsnipp.com/snippets/92xNm"> <img class="lazy" data-original="//d2d3qesrx8xj6s.cloudfront.net/img/screenshots/b43c39513963d870d399a0aab2438af225f9f485.jpg" width="320" height="240" alt="Team design card flipper using bootstrap 4"> </a> <div class="caption"> </div> </div> </div> </div> </div> </div> <hr> <div class="container"> <div class="col-md-8"> <a name="comments"></a> <h2 id="comments">Questions / Comments: </h2> <input type="hidden" id="forumIdHash" value="nNoMz"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <style>.hljs { white-space: nowrap; max-height: 300px;}pre {padding:0}.forumDivOuter {padding:10px 10px;}.forumTagline {padding:10px 0;}.forumvote:hover {color:orange; cursor: pointer;}.forumText { font-weight:500; font-size:1.2em;}.forumName { font-weight:200; font-size:1em;}.forumTime { font-size:1em;}.forumKey { border-radius: 4px; border: 2px solid #555; width: 20px; display: inline-flex; align-items: center; justify-content: center; height: 20px; margin: 0 2px;}</style><div class="newPost"><div id="newPostContainer" class="container-fluid" style="margin-top:10px;"></div><div class='forumDivOuter' style=''><div id="forumDiv"><textarea class="autoExpand forumPost form-control" rows="4" data-min-rows="4" placeholder="Enter your message here"></textarea><br/><button class="forumPostButton btn btn-default">Post</button><span style="margin: 0 10px;" class="pull-right"><a href="#" data-toggle="popover" title="" data-html="true" data-content="<ul><li>When asking a question, provide as much detail as possible. Posts of simply "It doesn't work" may be removed. </li><li>Don't Spam</li><li>Be respectful</li></ul>">Posting Guidelines</a></span><span style="margin: 0 10px;" class="pull-right"><a href="#" data-toggle="popover" title="" data-html="true" data-content="<ul><li><span class='forumKey'>`</span> - Surround code with backticks</li><li><span class='forumKey'>*</span> - Surround text with stars to italicize.</li><li><span class='forumKey'>></span><span class='forumKey'>></span> - A line starting with two greater than characters will be indented as a quote.</li><li>A blank line will separate paragraphs.</li></ul>">Formatting</a></span></div></div><hr><div class='col-md-12 hidden'><p class='forumTagline'><strong class='reply 0 name'></strong> - Now</p><hr></div></div><div id='jump31407' data-postid='31407' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>e</p></div><p class='forumTagline'><span class='forumName'>xhat007 <small>(1)</small></span> - <span class='text-muted'>3 years ago</span> - <a href='#' class='forumReply' data-id='31407'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 31407 name'></strong> - Now</p><hr></div><div id='jump27767' data-postid='27767' class='col-md-12 col-md-offset-0'><div class='forumText forumMax'><p>Hey, trying to follow The Team on twitter but can't find you guys</p></div><p class='forumTagline'><span class='forumName'>hjones <small>()</small></span> - <span class='text-muted'>5 years ago</span> - <a href='#' class='forumReply' data-id='27767'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-13 col-md-offset-1 hidden'><p class='forumTagline'><strong class='reply 27767 name'></strong> - Now</p><hr></div><div id='jump31409' data-postid='31409' class='col-md-11 col-md-offset-1'><div class='forumText forumMax'><p>e</p></div><p class='forumTagline'><span class='forumName'>xhat007 <small>(1)</small></span> - <span class='text-muted'>3 years ago</span> - <a href='#' class='forumReply' data-id='31409'>Reply</a><span class='pull-right'><span data-vote='1' class='forumvote fa fa-chevron-up icon-chevron-up'></span> <span class='forumVoteTotal'>0</span> <span data-vote='-1' class='forumvote fa fa-chevron-down icon-chevron-down'></span></span></p><hr></div><div class='col-md-12 col-md-offset-2 hidden'><p class='forumTagline'><strong class='reply 31409 name'></strong> - Now</p><hr></div> <div style="margin-top:10px"> <center>  <div id="ezoic-pub-ad-placeholder-102"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>   </center> </div> </div> <div class="col-md-4"> <div style="margin-top:10px"> <center>  <div id="ezoic-pub-ad-placeholder-147"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>   </center> </div> </div> <hr /> <div class="row"> <div class="col-md-8">  </div> <div class="col-md-4" style="padding-top: 60px">  <div id='div-gpt-ad-1490987467028-0'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1490987467028-0'); }); </script> </div> </div> </div> </div> <footer class="bs-footer" role="contentinfo"> <div class="container"> <div class="bs-social"> <ul class="bs-social-buttons"> <li class="facebook-button"> <div id="fb-root"></div> <div id="js-facebook-share" class="fb-like" data-href="http://bootsnipp.com" data-width="130" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div> </li> <li class="follow-btn"> <a id="js-twitter-follow" href="https://twitter.com/bootsnipp" class="twitter-follow-button" data-show-count="false">Follow @bootsnipp</a> </li> <li class="tweet-btn"> <a id="js-twitter-tweet" href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootsnipp.com" data-text="RT Design elements and code snippets for #twbootstrap HTML/CSS/JS framework" data-via="bootsnipp" data-related="bootsnipp">Tweet</a> </li> </ul> </div> <p>Bootsnipp.com © 2017 <a href="http://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="https://bootsnipp.com/privacy" target="_blank">Site Privacy policy</a> | <a href="/about">About</a> | <a href="mailto:bootsnipp@gmail.com">Advertise</a> | Featured snippets are <a href="https://bootsnipp.com/license">MIT license.</a> </p> </div> </footer> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="/dist/scripts.min.js"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="//www.danstools.com/js/forum.js"></script> <script type="text/javascript"> $(function(){ $('iframe.new-preview').each(function() { previewportWidth = $(this).parent().innerWidth()-15; factor = previewportWidth/1200; console.log(factor); $(this).css({ 'height': '800px', 'width': '1200px', '-ms-zoom': factor, '-ms-transform': 'scale('+factor+')', 'transform': 'scale('+factor+')', '-moz-transform': 'scale('+factor+')', '-moz-transform-origin': '0 0', '-o-transform': 'scale('+factor+')', '-o-transform-origin': '0 0', '-webkit-transform': 'scale('+factor+')', '-webkit-transform-origin': '0 0' }); $(this).parent().css('height',$(this).parent().innerWidth()*.75); }); $('iframe.snippet-preview').each(function() { previewportWidth = $(this).parent().parent().innerWidth()-30; $(this).zoomer({ width: previewportWidth, height: $(this).parent().innerWidth()*.75, zoom: .5, message : '' ,messageURL : $(this).attr('data-url') }) $(this).zoomer('refresh'); }); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script> <script type="text/javascript"> (function($) { window.addEventListener('message', receiveMessage, false); function receiveMessage(evt) { if (evt.origin !== 'https://bootsnipp.com') return; if ((evt.data != undefined) && (evt.data) && (typeof evt.data === "number")) if(evt.data >= 500) { // $('#playground-container').css('height', evt.data+30+'px'); } } var version = '4.1.1'; var version_jq = '3.2.1'; var htmleditor = ace.edit("editor-html"); var jseditor = ace.edit("editor-js"); var csseditor = ace.edit("editor-css"); $('#theme_chooser').change(function(){ whichCSS = $(this).val(); document.getElementById('snippet-preview').contentWindow.changeCSS(whichCSS); }); function setEditorOptions(editor, type){ editor.setTheme("ace/theme/clouds"); editor.setHighlightActiveLine(false); // editor.setReadOnly(true); editor.getSession().setMode("ace/mode/"+type); }; setEditorOptions(htmleditor,'html'); setEditorOptions(jseditor,'javascript'); setEditorOptions(csseditor,'css'); function markActive(el) { $(el).siblings().removeClass('active'); $(el).addClass('active'); } $('#show-html').click(function(e){ e.preventDefault(); $('#editor-html').show().siblings().hide(); markActive(this); $('#preview-container').hide(); htmleditor.resize(); }); $('#show-js').click(function(e){ e.preventDefault(); $('#editor-js').show().siblings().hide(); $('#preview-container').hide(); markActive(this); jseditor.resize(); }); $('#show-css').click(function(e){ e.preventDefault(); $('#editor-css').show().siblings().hide(); $('#preview-container').hide(); markActive(this); csseditor.resize(); }); $('#show-preview').click(function(e){ e.preventDefault(); markActive(this); $('.playground-editor').hide(); var html = buildSource(htmleditor, jseditor, csseditor); var iframe = document.createElement('iframe'); iframe.src = 'about:blank'; iframe.frameBorder="0"; iframe.height = 496; iframe.className = 'preview-iframe'; $('.preview-iframe').remove(); $('div#preview-container').append(iframe); iframe.contentWindow.document.open('text/html', 'replace'); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); $('#preview-container').show(); }); var cssurls = {}; var jsurls = {}; var jqurls = {}; cssurls['4.1.1'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'; jsurls['4.1.1'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'; cssurls['4.0.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; jsurls['4.0.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'; cssurls['3.3.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'; jsurls['3.3.0'] = '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'; cssurls['3.2.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'; jsurls['3.2.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'; cssurls['3.1.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'; jsurls['3.1.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'; cssurls['3.0.3'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'; jsurls['3.0.3'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'; cssurls['3.0.1'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css'; jsurls['3.0.1'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js'; cssurls['3.0.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'; jsurls['3.0.0'] = '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'; cssurls['2.3.2'] = '//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'; jsurls['2.3.2'] = '//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'; jqurls['3.2.1'] = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'; jqurls['2.2.4'] = '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'; jqurls['1.11.1'] = '//code.jquery.com/jquery-1.11.1.min.js'; function buildSource(htmleditor, jseditor, csseditor) { var code = {}; code.html = htmleditor.getValue(); code.css = csseditor.getValue(); code.js = jseditor.getValue(); code.bootstrapcss = cssurls[version]; code.bootstrapjs = jsurls[version]; code.jqueryurl = jqurls[version_jq]; var template = "<!doctype html>\n\ <html>\n\ <head>\n\ <meta charset='utf-8'>\n\ <meta name='viewport' content='width=device-width, initial-scale=1'>\n\ <title>Snippet - Bootsnipp.com</title>\n\ <link href='|bootstrapcss|' rel='stylesheet'>\n\ <style>|css|\x3C/style>\n\ \x3Cscript type='text/javascript' src='|jqueryurl|'>\x3C/script>\n\ \x3Cscript type='text/javascript' src='|bootstrapjs|'>\x3C/script>\n\ \x3Cscript type='text/javascript'>|js|\x3C/script>\n\ </head>\n\ <body>\n\ |html|\n\ </body>\n\ </html>"; content = template.replace(/\|(\w+)\|/g, function(match, str) { if(str in code) return code[str]; return ''; }); return content; } })(jQuery); </script> <div class="modal fade" id="DonateModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:100px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Donate</h1> </div> <div class="modal-body text-center">  <br>BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT <br>ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76 <hr> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="FDGD82NBKQDHJ"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Bootstrap Snippet Our Team section using bootstrap 4 using HTML CSS Bootstrap