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

Issue

enter image description here

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Answered By – Mahammadhusain kadiwala

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published