"Add to Friends Carousel"
Bootstrap 4.0.0 Snippet by serkanbasdag

Post to Facebook Tweet this

<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 ----------> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous"> </head> <div class="container"> <div class="row"> <div class="col-4"> <div class="card border-danger golge"> <div class="card-header text-center" style="font-weight: bold;font-size: 19px"> <a href="arkadaslar.html" target="_blank" class="isteColor"> <h6><strong>Add to Friends</strong></h6> </a> </div> <div class="card-body p-1"> <div class="carousel vert slide " id="carouselEx" data-ride="carousel" data-interval="2000"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="list-group"> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Bilgisayar Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Serkan Başdağ</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Bilgisayar Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Name Surname</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Makine Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Name Surname</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Bilgisayar Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Name Surname</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> </div> </div> <div class="carousel-item "> <div class="list-group"> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Bilgisayar Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Serkan Başdağ</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Bilgisayar Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Name Surname</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Makine Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Name Surname</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> <div class="list-group-item list-group-item-action align-items-start mb-1 p-1"> <div class="d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Bilgisayar Mühendisi"> <img src="https://i.ibb.co/B3k89LJ/profile-2092113-960-720.png" class="img-arkadas"> <div class="flex-column mx-1"> <a href="#" class="text-dark"><small><strong>Name Surname</strong></small></a> </div> <button class="btn btn-dark fa-pull-right btn-block golge w-25 h-25 mx-1" type="button"><i class="fas fa-user-plus"></i></button> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.golge{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .isteColor{ color: #cd2147; } .isteColor:hover{ color: #353A40; } .img-deneyim { object-fit: cover; border-radius:50%; width: 90px; height: 90px; border-style: solid; } .img-arkadas { object-fit: cover; border-radius:50%; width: 40px; height: 40px; border-style: solid; }

Related: See More

Material Dashboard React
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: