Can someone help me figure out how to position a button on the top right corner next to my bootstrap card? Here's the code I have so far:
<div className="row p-5 m-2">
{savedEpisodes?.map((saved) => {
return (
<div className="col-md-2" key={saved.episode.id}>
<div style={{ color: "white" }}>X</div>
<div className="card">
<div style={{ color: "white" }}>X</div>
<img
src={saved.episode.images[1].url}
alt="podcastimg"
className="card-img-top"
/>
<div className="card-body">
<h5 className="card-title" style={{ textAlign: "center" }}>
<Link to={`/episode/${saved.episode.id}`}>
<span style={{ fontWeight: "bold", color: "white" }}>
{saved.episode.name}
</span>
</Link>
</h5>
</div>
</div>
<div style={{ color: "white" }}>X</div>
</div>
);
})}
</div>
I've been experimenting with different positioning options, but I can only get the button to appear at the top and bottom. Ideally, I want it to be in the top right corner next to the bootstrap card, similar to this example where I marked the black X:
https://i.sstatic.net/p3w4A.png
Any suggestions or solutions would be greatly appreciated. Thank you!