"Instagram like user profile cards"
Bootstrap 4.0.0 Snippet by KrishnaPraveenVemuri

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <body> <div class="navbar navfar"> <a href="#"><i class="fa fa-instagram bisc"></i><span class="mini"></span></a> </div> <!-- Page Content --> <div class="container page-top"> <div class="container"> <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000"> <div class="carousel-inner row w-100 mx-auto" role="listbox"> <div class="carousel-item col-md-3 active"> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/907267/pexels-photo-907267.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/907267/pexels-photo-907267.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Diane</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/1036628/pexels-photo-1036628.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/1036628/pexels-photo-1036628.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>John Doe</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src=" https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/774095/pexels-photo-774095.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Margaret E</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/452738/pexels-photo-452738.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Dolor</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/843256/pexels-photo-843256.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/326559/pexels-photo-326559.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Mr.Lorem</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/119972/pexels-photo-119972.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Dipendra</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/274011/pexels-photo-274011.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/375880/pexels-photo-375880.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Paul</h3> </a> </div> </div> </div> </div> <div class="carousel-item col-md-3 "> <div class="card h-100"> <div class="card-body"> <div class="myback-img "> <img src="https://images.pexels.com/photos/734725/pexels-photo-734725.jpeg?auto=compress&cs=tinysrgb&h=350" class=""> </div> <div class="myoverlay"></div> <div class="profile-img"> <div class="borders avatar-profile"> <img src="https://images.pexels.com/photos/211050/pexels-photo-211050.jpeg?auto=compress&cs=tinysrgb&h=350"> </div> </div> <div class="profile-title"> <a href="#"> <h3>Ipsum</h3> </a> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body>
body { font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #989898; margin: 10px; } .navfar { background-color: white; border-bottom: 1px solid #e6e6e6; -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12); } .navbar { z-index: 16; position: fixed; top: 0; width: 100%; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; height: 77px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-bottom: 1px solid transparent; } .navbar span { position:relative; top:5px; background-image: url(https://goo.gl/NLUdLH); background-position: 0px 0px; height: 51px; width: 177px; display: inline-block; -webkit-transition: .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); -o-transition: .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); transition: .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); } .navbar a i { position:relative; top:-10px; font-size: 45px; height: 43px; width: 43px; line-height: 42px; text-align: center; margin-right: 10px; border-radius: 6px; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .carousel-control-prev, .carousel-control-next{ background: black; width: 4.5% !important; transition: opacity .2s ease-in; } .bisc { color: white; margin-right: 0px; background: -webkit-gradient(linear, right top, left bottom, from(#4c68d7), color-stop(#8a3ab9), color-stop(#cd486b), color-stop(#fb8750), to(#FF9800)); background: -webkit-linear-gradient(right top, #4c68d7, #8a3ab9, #cd486b, #fb8750, #FF9800); background: -o-linear-gradient(right top, #4c68d7, #8a3ab9, #cd486b, #fb8750, #FF9800); background: linear-gradient(to left bottom, #4c68d7, #8a3ab9, #cd486b, #fb8750, #FF9800); -webkit-transform: rotate(360deg) scale(1.1); -ms-transform: rotate(360deg) scale(1.1); transform: rotate(360deg) scale(1.1); } #demo { height: 100%; position: relative; overflow: hidden; } .green { background-color: #6fb936; } .page-top { margin-top: 150px; } .portfolio-item { margin-bottom: 30px; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: none; border-radius: .25rem; } .myback-img { display: flex; justify-content: center; height: 372px; overflow: hidden; object-fit: cover; border-radius: .25rem; } .myoverlay { position: absolute; background: -webkit-linear-gradient( top, transparent 0%, rgba(0, 0, 0, 0.72) 100%); height: 100%; width: 100%; top: 0; } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0; } .avatar-profile img { width: 90px; height: 90px; border-radius: 100%; overflow: hidden; opacity: 0.9; object-fit: cover; -o-object-fit: cover; } .borders { position: relative; border: 5px solid #fff; border-radius: 100%; } .borders:before { content: " "; position: absolute; z-index: -1; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 100%; background-image: linear-gradient(90deg, #FDA240, #C5087E), linear-gradient(90deg, #FDA240, #C5087E); background-position: 0 0px, 100% 100%; background-size: 100% 5px; border-left: 5px solid #FDA240; border-right: 5px solid #C5087E; padding: 10px 5px; } .profile-img { position: absolute; top: 71%; left: 50%; transform: translate(-50%, -50%); } .profile-title { text-align: center; position: relative; top: -39px; margin-bottom: -26px; } .profile-title h3 { font-size: 18px; color: #fff; font-weight: bold; margin-bottom: 0; } a:hover { text-decoration: none !important; } /*--carousel css--*/ @media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item { transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -25%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } }
$('#carouselExample').on('slide.bs.carousel', function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 4; var totalItems = $('.carousel-item').length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $('.carousel-item').eq(i).appendTo('.carousel-inner'); } else { $('.carousel-item').eq(0).appendTo('.carousel-inner'); } } } }); $('#carouselExample').carousel({ interval: 2000 });

Related: See More


Questions / Comments: