Set right-aligned text within the footer of a Bootstrap card

Trying to display the status "Lost" in the Bootstrap card footer on the right side. The issue is, when I add margin-left to fix it in Chrome, it doesn't look the same in Microsoft Edge browser. How can I ensure it looks consistent across all browsers? Below is what I've attempted in a 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>

Link to my fiddle

cssbootstrap-4

Answer №1

To ensure that the status of "Lost" is consistently aligned to the right side of the card footer across different browsers, you can utilize the Bootstrap class ml-auto. This class adjusts the left margin of an element to auto, pushing it to the right side of its container.

Simply apply the ml-auto class to align the "Lost" status on the right side of the card footer.

Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f7edf3edf3">[email protected]</a>/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>

Additionally, include the classes d-flex and justify-content-between in the card footer to turn it into a flex container and align its children on the left and right sides. Use the ml-auto for the "Lost" status element to position it to the right within the container.

JSFiddle Link for Result

Answer №2

The problem has been resolved by applying float-right to the span. I also eliminated the margin-left property from the span.

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a4bea0bea0">[email protected]</a>/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>

Here is the updated functional fiddle. fiddle

Answer №3

Incorporating the bootstrap library into your webpage offers multiple options for achieving a desired layout. One effective method is utilizing the d-flex class to arrange content in rows, paired with the justify-content-between class to create space between child elements. By applying these classes to the card-footer element, a flexbox container layout can be achieved.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7aab7ab">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 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">
    <span style="color: red; font-style: normal;"><b>Lost</b></span>
  </p>
</div>

Note: The code above utilizes the latest version of bootstrap 5.3.2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using CSS to Customize TextField Focus in NativeScript

How can the focus state of a textfield be controlled in NativeScript? I would like to change its style when a user taps into it and begins typing, such as altering the border or background. Is there a way to achieve this using only CSS or by adding a styla ...

cssfocustextfieldnativescript

Navigational Dropdown implemented on Bootstrap 4 Navigation Bar

I'm encountering a problem with aligning a dropdown menu on the navbar-brand section of the Bootstrap 4 Navbar. Instead of being in the correct position, it's showing up at the top left corner of the page. https://i.sstatic.net/xU6Wc.png I&apos ...

cssbootstrap-4navbar

Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead. Does anyone have any suggestions on how I ...

jqueryhtmlcss

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...

javascriptjqueryhtmlcsscheckbox

Capture selected items from checkboxes and incorporate them into the CSS styling

I would like to give users the ability to choose from a series of checkboxes with additional options to add to their CSS. Using JavaScript, I am searching for checked boxes, extracting their names, adding them to a list, and then inserting that list into ...

javascriptjqueryhtmlcss

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

jqueryhtmlcss

I decided to uninstall Bootstrap, but now I find myself unable to make any CSS changes

After attempting to uninstall Bootstrap, my application.css no longer seems to have any effect on my app. Any suggestions on how to resolve this issue? Here is a breakdown of the steps I took that led to this problem: - Removed require bootstrap from app ...

cssruby-on-railstwitter-bootstrapruby-on-rails-4

Prevent iOS from scrolling both horizontally and vertically

I'm currently in the process of developing a web app and I want to prevent horizontal overflow (elastic band) type scrolling. Despite trying various solutions, such as: html, body {width: 100%; overflow-x: hidden;} Nothing seems to be effective... ...

htmlioscssoverflow

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

cssbootstrap-4responsive-designhtml5-canvas

Adjust the size of a nested div with varying height

Hey there! I'm facing an issue with a main div that contains 2 other divs. I need the height of the lower div to change dynamically based on the resize of the main div. Here's the code I have so far: <html> <head> <meta http- ...

javascripthtmlcssfunctionresize

The bootstrap fails to load when accessing on a different computer within the same network (although it functions properly on my personal laptop)

Why does Bootstrap fail to load when accessing the website from another computer on the same network, but works perfectly on my own laptop? Here are the comparison images: https://i.sstatic.net/oBu5j.jpg https://i.sstatic.net/XDRqj.jpg On my laptop: htt ...

phpbootstrap-4xampp

In order to position content at the center of a <div> element

Just recently delving into the world of Bootstrap, I've hit a roadblock. Here's my current conundrum: <div class="container px-4 py-5" id="hanging-icons"> <h2 class="pb-2 border-bottom">Work Experie ...

htmlcssbootstrap-5

Concealing visuals for smaller screens

I've been struggling to hide a specific image on my website for mobile devices. I've experimented with various combinations of HTML and CSS code, but I just can't seem to make it work. I suspect the issue might have something to do with my d ...

htmlcssmobile

What is the best way to find out the exact height of the viewport or window on mobile browsers?

When working on my computer or PC, adjusting the height of a div to match the window size is simple. I just use the following CSS code: div{ height: 100vh; } But when viewing the same page on mobile browsers, the div's height extends beyond the vie ...

htmlcssmobileviewport

I am looking to bring in just the tables from a different html/php page

I am currently working on a webpage that includes a php library, header, and other elements. I only need to import specific tables and information from this page onto another screen display, with the tables arranged side by side instead of vertically. My ...

phphtmlcss

What is the method for incorporating this effect into the final sentence of a text?

I am trying to create a unique design effect by applying a custom border to only the last line of text. You can see an example here. In this scenario, the target text is "2000 years old." (with that specific length) and not the entire width of the parent ...

htmlcss

Optimizing Static File Caching in Yii

Having a frustrating issue with Yii where my local development environment caches CSS and JS files. Despite making changes to the file, the edits do not reflect in the output and sometimes causes corruption leading to broken functionality. This problem see ...

javascriptphpcssyiifrontend

Hovering over a class list will modify various element IDs

Is there a way to change the height of an element with id = "header_nav" when hovering over the class "header_nav" li element? Here is the HTML Code: <div class="header_nav" id="header_nav"> <ul id="header_nav_mainmenu"> & ...

htmlcssclasshover