Hey there, I'm new to react js and I'm looking to create a list with images and text using html, css, and bootstrap. The list should include song images and have options for download and liking them after the user clicks on three dots.
I've managed to display the image with text and a heart icon, but I'm struggling with how to open the options for like and download when the three dots are clicked. Can someone please help me with this?
When clicking on the three dots, I want to open this list https://i.sstatic.net/jqZ47.png
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<div class="row">
<div class="col-md-2">
<img src="cinqueterre.jpg" class="rounded img-fluid" alt="Cinque Terre" height="150px" width="150px">
</div>
<div class="col-md-4">
<h5> Test test </h5>
<p> test demo add here </p>
</div>
<div class="col-md-5 jusfity-content-end">
<span> 12.35 PM</span>
<span class="fa fa-icon"><i class="fa fa-heart-o" aria-hidden="true"></i>
</span>
<span class="fa fa-icon"><i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</body>
</html>
I tested the above code on the W3Schools site. Looking forward to your assistance!