How to put an icon on the right footer of the image

How to place an icon next to an image at the bottom

I've tried using display and everything but I can't remove the icon from below the img

Solution

You can do this ...

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-6 d-flex justify-content-start">
                <div class="mt-5 ">
                 <img style="height: 300px; width: 300px;" src="https://images.unsplash.com/photo-1427830574887-32e5702033b0" alt="" srcset="">
                </div>
                <div style="margin-top: auto; margin-bottom: -7px;"><i style="font-size: 30px;margin: 0px;" class="bi bi-trash3"></i></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>