"Team design card flipper using bootstrap 4"
Bootstrap 4.0.0 Snippet by Sunlimetech

<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 ----------> <!-- Team --> <section id="team" class="pb-5"> <div class="container"> <h5 class="section-title h1">OUR TEAM</h5> <div class="row"> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" > <div class="mainflip flip-0"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_02.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_03.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_04.jpg" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_05.png" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> <!-- Team member --> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card"> <div class="card-body text-center"> <p><img class=" img-fluid" src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_06.jpg" alt="card image"></p> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="https://www.fiverr.com/share/qb8D02" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i></a> </div> </div> </div> <div class="backside"> <div class="card"> <div class="card-body text-center mt-4"> <h4 class="card-title">Sunlimetech</h4> <p class="card-text">This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.This is basic card with image on top, title, description and button.</p> <ul class="list-inline"> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-facebook"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-twitter"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-skype"></i> </a> </li> <li class="list-inline-item"> <a class="social-icon text-xs-center" target="_blank" href="https://www.fiverr.com/share/qb8D02"> <i class="fa fa-google"></i> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- ./Team member --> </div> </div> </section> <!-- Team -->
/* FontAwesome for working BootSnippet :> */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); #team { background: #eee !important; } .btn-primary:hover, .btn-primary:focus { background-color: #108d6f; border-color: #108d6f; box-shadow: none; outline: none; } .btn-primary { color: #fff; background-color: #007b5e; border-color: #007b5e; } section { padding: 60px 0; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; } #team .card { border: none; background: #ffffff; } .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); border-radius: .25rem; } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside { position: relative; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; margin-bottom: 30px; } .backside { position: absolute; top: 0; left: 0; background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; } .frontside .card, .backside .card { min-height: 312px; } .backside .card a { font-size: 18px; color: #007b5e !important; } .frontside .card .card-title, .backside .card .card-title { color: #007b5e !important; } .frontside .card .card-body img { width: 120px; height: 120px; border-radius: 50%; }
//No Js required

Related: See More


Questions / Comments:

In web view like this 123

456 but in mobile view will come like this 12

45

36 ...plz send me the code?

Rahhava (1) - 5 months ago - Reply 1


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


@@JSQaw

testing223 (1) - 5 months ago - Reply 0


1'"

testing223 (1) - 5 months ago - Reply 0


testing223 (1) - 5 months ago - Reply 0


e'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'

testing223 (1) - 5 months ago - Reply 0


UrrVYp5p')) OR 136=(SELECT 136 FROM PG_SLEEP(15))--

testing223 (1) - 5 months ago - Reply 0


8oQs05JW') OR 465=(SELECT 465 FROM PG_SLEEP(15))--

testing223 (1) - 5 months ago - Reply 0


U0U3jvl8' OR 274=(SELECT 274 FROM PG_SLEEP(15))--

testing223 (1) - 5 months ago - Reply 0


AEIfBtWH'; waitfor delay '0:0:15' --

testing223 (1) - 5 months ago - Reply 0


1 waitfor delay '0:0:15' --

testing223 (1) - 5 months ago - Reply 0


(select(0)from(select(sleep(15)))v)/'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"/

testing223 (1) - 5 months ago - Reply 0


0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z

testing223 (1) - 5 months ago - Reply 0


0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z

testing223 (1) - 5 months ago - Reply 0


if(now()=sysdate(),sleep(15),0)

testing223 (1) - 5 months ago - Reply 0


-1" OR 2+515-515-1=0+0+0+1 --

testing223 (1) - 5 months ago - Reply 0


-1' OR 2+956-956-1=0+0+0+1 or 'ibOzIxIc'='

testing223 (1) - 5 months ago - Reply 0


-1' OR 2+482-482-1=0+0+0+1 --

testing223 (1) - 5 months ago - Reply 0


-1 OR 2+181-181-1=0+0+0+1

testing223 (1) - 5 months ago - Reply 0


-1 OR 2+340-340-1=0+0+0+1 --

testing223 (1) - 5 months ago - Reply 0


krNklzmm

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


e

testing223 (1) - 5 months ago - Reply 0


thanks very creative

HoussemBenmammar (2) - 1 year ago - Reply 1


thanks very creative

HoussemBenmammar (2) - 1 year ago - Reply 1


Thanks, for the appreciation!

Sunlimetech (-2) - 1 year ago - Reply 0


why i cannot see the twitter icon and other icon in the card

vikas772 (1) - 1 year ago - Reply 1


vikas772 please check your font awesome file. it should be the same version. Or import it correctly.

Thanks

Sunlimetech (-2) - 1 year ago - Reply 0


Very well presented! Thank you!

GAUSS123 (1) - 2 years ago - Reply 1


Thanks, for the appreciation!

Sunlimetech (-2) - 1 year ago - Reply 0


Thank for snippets. Please add width:100% to .frontsize and .backside will fix the stretch issue on IE when hover on card.

.frontside,

.backside {

width: 100%;

}

tranquyetdev (-1) - 2 years ago - Reply -1


In web view like this 123

456 but in mobile view will come like this 12

45

36 ...plz send me the code?

Rahhava (1) - 5 months ago - Reply 0


This is awesome,well done Sunlimetech

KojoShaddy () - 1 year ago - Reply 0


How can they be applied in wordpress?

germanccho () - 1 year ago - Reply 0


the boxes are not squared, they are more like retangules, and the text is not centralized :(

JohnatanJoseFerreira () - 1 year ago - Reply 0


how to add more than six members?

prachi12 () - 1 year ago - Reply 0


just copy paste the member

Sunlimetech (-2) - 1 year ago - Reply 0


how to add more than six members?

prachi12 () - 1 year ago - Reply 0


hey I saved the filename by team.html and what should be the name of css i.e. name of css file

I saved it by team.css but it's not working please help...

vikas772 (1) - 1 year ago - Reply 0


this is how it work

add this into html

<link href="css/styles.css" rel="stylesheet">

then create folder at root with name css and create styles.css init

Let me know if you still need help

Sunlimetech (-2) - 1 year ago - Reply 0


I guess you can name it team.html.css. You can try it. It might work. Good Luck!

w11stop () - 1 year ago - Reply 0