Question 273558 in CSS Question posted in
Some basic documentation can be found here.

Css – Align text right inside bootstrap card footer

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue has been fixed by using float-right on the span. I removed the margin-left property from the span.

    <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<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 
      <span style="color: red; font-style: normal; float:right;">Lost</span></b></p>
   </div>
</div>

    Below is the updated working fiddle. fiddle


  2. 0

    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/[email protected]/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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search