"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) - 1 year ago - Reply 1


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


@@JSQaw

testing223 (1) - 1 year ago - Reply 0


1'"

testing223 (1) - 1 year ago - Reply 0


testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year 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) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


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

testing223 (1) - 1 year ago - Reply 0


krNklzmm

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


e

testing223 (1) - 1 year ago - Reply 0


thanks very creative

HoussemBenmammar (2) - 2 years ago - Reply 1


thanks very creative

HoussemBenmammar (2) - 2 years ago - Reply 1


Thanks, for the appreciation!

Sunlimetech (-2) - 2 years ago - Reply 0


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

vikas772 (1) - 2 years ago - Reply 1


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

Thanks

Sunlimetech (-2) - 2 years ago - Reply 0


Very well presented! Thank you!

GAUSS123 (1) - 3 years ago - Reply 1


Thanks, for the appreciation!

Sunlimetech (-2) - 2 years 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) - 3 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) - 1 year ago - Reply 0


This is awesome,well done Sunlimetech

KojoShaddy () - 2 years ago - Reply 0


How can they be applied in wordpress?

germanccho () - 2 years ago - Reply 0


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

JohnatanJoseFerreira () - 2 years ago - Reply 0


how to add more than six members?

prachi12 () - 2 years ago - Reply 0


just copy paste the member

Sunlimetech (-2) - 2 years ago - Reply 0


how to add more than six members?

prachi12 () - 2 years 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) - 2 years 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) - 2 years ago - Reply 0


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

w11stop () - 2 years ago - Reply 0