Cards Bootstrap 5Free+ CSS
Add a card to your UI with Bootstrap 5 doctors profile card snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
9.6k views250 downloads
gosnippets.com/preview/bootstrap-5-doctors-profile-card-snippets
Source Code
1<div class="container mt-5 mb-5">
2 <div class="d-flex justify-content-between mb-3"> <span>Doctors</span> <button class="btn btn-success add">Add Doctors</button> </div>
3 <div class="row g-2">
4 <div class="col-md-3">
5 <div class="card p-2 py-3 text-center">
6 <div class="img mb-2"> <img src="https://i.imgur.com/LohyFIN.jpg" width="70" class="rounded-circle"> </div>
7 <h5 class="mb-0">Patey Cruiser</h5> <small>Neurosurgeon</small>
8 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
9 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
10 </div>
11 </div>
12 <div class="col-md-3">
13 <div class="card p-2 py-3 text-center">
14 <div class="img mb-2"> <img src="https://i.imgur.com/o5uMfKo.jpg" width="70" class="rounded-circle"> </div>
15 <h5 class="mb-0">Mario Speedway</h5> <small>Cardiologist</small>
16 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
17 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
18 </div>
19 </div>
20 <div class="col-md-3">
21 <div class="card p-2 py-3 text-center">
22 <div class="img mb-2"> <img src="https://i.imgur.com/tmdHXOY.jpg" width="70" class="rounded-circle"> </div>
23 <h5 class="mb-0">Anna Sthesia</h5> <small>Surgeon</small>
24 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
25 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
26 </div>
27 </div>
28 <div class="col-md-3">
29 <div class="card p-2 py-3 text-center">
30 <div class="img mb-2"> <img src="https://i.imgur.com/C4egmYM.jpg" width="70" class="rounded-circle"> </div>
31 <h5 class="mb-0">Paul Moliv</h5> <small>Dentist</small>
32 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
33 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
34 </div>
35 </div>
36 <div class="col-md-3">
37 <div class="card p-2 py-3 text-center">
38 <div class="img mb-2"> <img src="https://i.imgur.com/0LKZQYM.jpg" width="70" class="rounded-circle"> </div>
39 <h5 class="mb-0">Anna Maul</h5> <small>Eye Specialist</small>
40 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
41 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
42 </div>
43 </div>
44 <div class="col-md-3">
45 <div class="card p-2 py-3 text-center">
46 <div class="img mb-2"> <img src="https://i.imgur.com/ZSkeqnd.jpg" width="70" class="rounded-circle"> </div>
47 <h5 class="mb-0">Gail Forcewind</h5> <small>Urology</small>
48 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
49 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
50 </div>
51 </div>
52 <div class="col-md-3">
53 <div class="card p-2 py-3 text-center">
54 <div class="img mb-2"> <img src="https://i.imgur.com/MZm1LNz.jpg" width="70" class="rounded-circle"> </div>
55 <h5 class="mb-0">Patey Cruiser</h5> <small>Neurosurgeon</small>
56 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
57 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
58 </div>
59 </div>
60 <div class="col-md-3">
61 <div class="card p-2 py-3 text-center">
62 <div class="img mb-2"> <img src="https://i.imgur.com/HFpxxJz.jpg" width="70" class="rounded-circle"> </div>
63 <h5 class="mb-0">Patey Cruiser</h5> <small>Neurosurgeon</small>
64 <div class="ratings mt-2"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div>
65 <div class="mt-4 apointment"> <button class="btn btn-success text-uppercase">Book Appointment</button> </div>
66 </div>
67 </div>
68 </div>
69</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.