Cards Bootstrap 5Free+ CSS
Testimonial with hover animation and social media icons: a hand-crafted, open-source Bootstrap 5 card. HTML & CSS included, ready to copy.
2.8k views39 downloads
gosnippets.com/preview/testimonial-with-hover-animation-and-social-media-icons
Source Code
1<div class="container-fluid my-5 justify-content-center">
2 <div class=" row justify-content-center ">
3 <div class="col-lg-4 col-12 mt-5 ">
4 <div class="card mt-3 ">
5 <div class="card-header bg-white text-center border-0 ">
6 <div class="row justify-content-center ">
7 <div class="col"> <img class="align-self-center text-center rounded-circle outside img-fluid" src="https://i.imgur.com/JI24t5h.jpg" width="110" height="110"> </div>
8 </div>
9 <div class="row text-center name">
10 <div class="col">
11 <h5 class="mb-0 profile-pic">Shusmit</h5> <small class="mt-0">Director of Marketing</small>
12 <p><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star-o me-1"></span></p>
13 </div>
14 </div>
15 </div>
16 <div class="card-body pt-0 text-center pb-3 ">
17 <div class="row justify-content-center">
18 <div class="col-md-8 col">
19 <p class="bold"> <span><img class="img-fluid quotes" src="https://i.imgur.com/U20aFIt.png" width="40" height="40"></span> Growth of data is exponential and our ability to get true insight that matter was challenging with classic, traditional Bi tools. Vertix allow us to unserstand what is driving exceptions so we can take action <span><img class="img-fluid quotes-down" src="https://i.imgur.com/DPzmyiD.png" width="40" height="40"> </span></p>
20 </div>
21 </div>
22 </div>
23 <div class="card-footer text-center bg-white border-0 mt-0 pt-0">
24 <div class="row">
25 <div class="col"><span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-pinterest-p" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-google-plus" aria-hidden="true"></i></span></div>
26 </div>
27 <hr class="my-1">
28 </div>
29 </div>
30 </div>
31 <div class="col-lg-4 mt-5 col-12 ">
32 <div class="card mt-3">
33 <div class="card-header bg-white text-center border-0 ">
34 <div class="row justify-content-center ">
35 <div class="col"> <img class="align-self-center text-center rounded-circle outside img-fluid" src="https://i.imgur.com/o5uMfKo.jpg" width="110" height="110"> </div>
36 </div>
37 <div class="row text-center name">
38 <div class="col">
39 <h5 class="mb-0 profile-pic">Priyanka</h5> <small class="mt-0">Director of Marketing</small>
40 <p><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span></p>
41 </div>
42 </div>
43 </div>
44 <div class="card-body pt-0 text-center pb-3 ">
45 <div class="row justify-content-center">
46 <div class="col-md-8 col">
47 <p class="bold"> <span><img class="img-fluid quotes" src="https://i.imgur.com/U20aFIt.png" width="40" height="40"></span> Growth of data is exponential and our ability to get true insight that matter was challenging with classic, traditional Bi tools. Vertix allow us to unserstand what is driving exceptions so we can take action <span><img class="img-fluid quotes-down" src="https://i.imgur.com/DPzmyiD.png" width="40" height="40"></span> </p>
48 </div>
49 </div>
50 </div>
51 <div class="card-footer text-center bg-white border-0 mt-0 pt-0">
52 <div class="row">
53 <div class="col"> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-pinterest-p" aria-hidden="true"></i></span><span class="mx-2"><i class="fa fa-google-plus" aria-hidden="true"></i></span> </div>
54 </div>
55 <hr class="my-1">
56 </div>
57 </div>
58 </div>
59 <div class="col-lg-4 col-12 mt-5">
60 <div class="card mt-3">
61 <div class="card-header bg-white text-center border-0 ">
62 <div class="row justify-content-center ">
63 <div class="col"> <img class="align-self-center text-center rounded-circle outside img-fluid" src="https://i.imgur.com/At1IG6H.png" width="110" height="110"> </div>
64 </div>
65 <div class="row text-center name">
66 <div class="col">
67 <h5 class="mb-0 profile-pic">Mukesh</h5> <small class="mt-0">Director of Marketing</small>
68 <p><span class="fa fa-star me-1"></span><span class="fa fa-star me-1"></span><span class="fa fa-star-o me-1"></span><span class="fa fa-star-o me-1"></span><span class="fa fa-star-o me-1"></span></p>
69 </div>
70 </div>
71 </div>
72 <div class="card-body pt-0 text-center pb-3 ">
73 <div class="row justify-content-center">
74 <div class="col-md-8 col">
75 <p class="bold"> <span><img class="img-fluid quotes" src="https://i.imgur.com/U20aFIt.png" width="40" height="40"></span> Growth of data is exponential and our ability to get true insight that matter was challenging with classic, traditional Bi tools. Vertix allow us to unserstand what is driving exceptions so we can take action <span><img class="img-fluid quotes-down" src="https://i.imgur.com/DPzmyiD.png" width="40" height="40"> </span></p>
76 </div>
77 </div>
78 </div>
79 <div class="card-footer text-center bg-white border-0 mt-0 pt-0">
80 <div class="row">
81 <div class="col">
82 <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span>
83 <span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span>
84 <span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span>
85 <span class="mx-2"><i class="fa fa-pinterest-p" aria-hidden="true"></i></span>
86 <span class="mx-2"><i class="fa fa-google-plus" aria-hidden="true"></i></span>
87 </div>
88 </div>
89 <hr class="my-1">
90 </div>
91 </div>
92 </div>
93</div>
94</div>More Cards snippets
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
CardsView →
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
CardsView →
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.