"Adorable Pets to Follow"
Bootstrap 4.1.1 Snippet by karanbohara0

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cute Pets</title> <style> .container { border: 1px solid rgb(188, 188, 188); border-radius: 4px; width: 280px; box-shadow: 1px 1px 1px 1px rgb(211, 209, 209); padding: 10px; } .pet { display: flex; align-items: center; margin-bottom: 10px; } .img-cat { height: 40px; width: 40px; border-radius: 50%; margin-right: 10px; } .info { flex: 1; } .name { font-weight: bold; } .description { color: rgb(131, 127, 127); } .btn-follow { background-color: rgb(0, 153, 255); border: none; border-radius: 3px; color: white; font-size: 12px; font-family: Arial; font-weight: bold; padding: 5px 10px; transition: background-color 0.15s, color 0.15s; } .btn-follow:hover { background-color: white; color: rgb(0, 153, 255); cursor: pointer; } </style> </head> <body> <div class="container"> <div class="pet"> <img class="img-cat" src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba" alt="Oliver"> <div class="info"> <div class="name">Oliver</div> <div class="description">the cat</div> <div class="description">Popular</div> </div> <button class="btn-follow">Follow</button> </div> <div class="pet"> <img class="img-cat" src="https://media.istockphoto.com/id/1456979356/photo/bengal-cat-and-soft-toy-sleep-together-pets-animal-care.webp?b=1&s=170667a&w=0&k=20&c=FyCzrzRfqPxZDMcvtXb0TOLrSPnPJfp5bCBSFpk8Tp8=" alt="Mimi"> <div class="info"> <div class="name">Mimi</div> <div class="description">Sleepy Cat</div> <div class="description">Popular</div> </div> <button class="btn-follow">Follow</button> </div> <div class="pet"> <img class="img-cat" src="https://media.istockphoto.com/id/1490277576/photo/close-up-boxer-dog-sitting-in-a-public-park.webp?b=1&s=170667a&w=0&k=20&c=hlvlUDKpqV9VuHc0cbWpro-cxVHxUrXrwuQKCgio0Bo=" alt="Rex"> <div class="info"> <div class="name">Rex</div> <div class="description">Happy Bulldog</div> <div class="description">Popular</div> </div> <button class="btn-follow">Follow</button> </div> </div> </body> </html>

Related: See More

Vue Paper Dashboard 2 PRO

Questions / Comments: