'Bootstrap 5 Card question, float-right, d-flex with justify-context-end etc, not working

I've started learning Bootstrap 5 today and came up with a card that will be populated by a collection of products in my code. I've toyed with rows and cols and positioning and I think this is so far my best shot at it, spending 4 hours just to design this card which probably would have taken someone here 5 minutes to code, and trying to figure out why some BStrap classes are not working in combination with other, watched a couple of videos, but my only problem now is this pencil which should be position at the farthest right, which cannot be budge unless the H5 tag will come with it.

Actual result of Bootstrap Card

Index.html

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="container mt-3">
        <div class="row">
            <div class="col">
                <div class="card" style="width: 350px; border:red 2px solid;">
                    <div class="row g-0">
                        <div class="col-12">
                            <h5 class="card-header text-white bg-info">Pet Harness
                                <a class="mr-auto" href=""><i class="bi bi-pencil-square"></i></a>    
                            </h5>
                            
                        </div>
                        <div class="col-6 text-center">
                            <img class="rounded mt-2" src="images/arya.jpg" style="width:150px; max-height:150px;"
                                alt="Card image cap" />

                        </div>

                        <div class="col-6">
                            <div class="row mt-2 mx-0">
                                <div style="border: red 1px solid">
                                    Some text1
                                </div>
                                <div style="border: red 1px solid">
                                    Some text2
                                </div>
                                <div style="border: red 1px solid">
                                    Some text3
                                </div>
                                <div style="border: red 1px solid">
                                    Some text4
                                </div>
                                <div style="border: red 1px solid">
                                    Some text5
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <a href="#" class="btn btn-primary">Add to cart (Price:$12.99)</a>
                            <a href="#" class="btn btn-primary">Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

I have tried class="d-flex justify-content-end" like below, and also "float-right" in the class, but that icon doesn't move, i've adde containers and rows/columns around this H5 tag, but everything in the card gets distorted because of that.

Any ideas what have I missed or if this structure I created is good enough to use in my UI? Just added the borders as visual guide to see where the bounderies are taking place.Thanks

<h5 class="d-flex justify-content-end card-header text-white bg-info">
   Pet Harness <a class="mr-auto" href=""><i class="bi bi-pencil-square"></i></a></h5>
htmltwitter-bootstrap


Solution 1:[1]

The answer I found (finally!) is float-end, as float-right(or left) is deprecated in BS5.0

CSS float-right not working in Bootstrap 4 Navbar

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dave

Related Questions