Align text right inside bootstrap card footer

October 27, 2023

In the bootstrap card footer, I am trying to show the status "Lost" towards the right side. The problem is if I am giving some margin-left to fix it in chrome, then its not looking same in Microsoft edge browser. How would I manage it so it works fine on all browsers.
Below is my what I have tried in fiddle.

    <div  class="card tile-card">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">ABC</p>
         <p class="text-xs mb-0 tile-subtitle-p">PQR</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;font-style:italic">123</p>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023 &nbsp;&nbsp;&nbsp;&nbsp; 
      <span style="color: red; font-style: normal; margin-left:26px;">Lost</span></b></p>
   </div>
</div>

My fiddle link

>Solution :

to align the "Lost" status to the right side of the card footer in a consistent way across different browsers, you can use the ml-auto class by Bootstrap. This class sets the left margin of an element to auto, which causes it to be pushed to the right side of its container.

use the ml-auto to align the "Lost" status to the right side of the card footer.

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-footer p-3 d-flex justify-content-between">
  <p class="tile-subtitle-p tile-subtitle-footer mb-0">Updated On: <b>10/27/2023</b></p>
  <p class="tile-subtitle-p tile-subtitle-footer mb-0 ml-auto">
    <span style="color: red; font-style: normal;"><b>Lost</b></span>
  </p>
</div>

and added the d-flex and justify-content-between to the card footer to make it a flex container and align its children to the left and right sides. use the ml-auto to the "Lost" status element to push it to the right side of the container.

JSFiddle: Result