Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom of the card. I attempted to use d-flex and align-bottom, but couldn't get the text to appear at the bottom.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001d001e034f425e464f1f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card p-2">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
    </div>
    <div class="col-7">
      <div class="card-body h-100 p-0 m-0">
        <span class="card-text mb-1 small">463</span>
        <h6 class="card-title custom-text-truncate">How a responsive website can boost user satisfaction</h6>
        <div class="d-flex align-items-end">
          <a href="#" class="mb-0 small">Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-5card

Answer №1

Combine the tile and text into a single div to ensure that the flex container only has 2 child items. Set the flex container to flex-column and justify-content-between to position one item at the top and the other at the bottom of the container.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4b4c4a5948791d170a17081a4b4d454c0a1d1a4a4b4b4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
    </div>
    <div class="col-7">
      <div class="d-flex flex-column justify-content-between card-body h-100 p-0 m-0">
        <div>
          <!-- Grouping title and text within this div -->
          <div class="card-text mb-1 small">463</div>
          <div>
            <h6 class="card-title custom-text-truncate">
              How a responsive website can enhance user satisfaction
            </h6>
          </div>
        </div>
        <div>
          <a href="#" class="mb-0 small">Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

To achieve this desired layout, simply set the .card-body to utilize a flex arrangement with a direction of column. Additionally, include a margin-top: auto property for the "read more" link. By implementing Bootstrap's utility classes, the end result will appear as shown:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c110c120f434e524a4313">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card p-2">
  <div class="row g-3">
    <div class="col-5">
      <img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
    </div>
    <div class="col-7">
      <div class="card-body h-100 p-0 m-0 d-flex flex-column">
        <span class="card-text mb-1 small">463</span>
        <h6 class="card-title custom-text-truncate">
          How a responsive website can enhance user satisfaction
        </h6>
        <div class="d-flex align-items-end mt-auto">
          <a href="#" class="mb-0 small">Read more -></a>
        </div>
      </div>
    </div>
  </div>
</div>

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

Button Click Not Allowing Webpage Scroll

I am currently in the process of developing a website that aims to incorporate a significant amount of motion and interactivity. The concept I have devised involves a scenario where clicking on a button from the "main menu" will trigger a horizontal and ve ...

javascriptjqueryhtmlcss

Why does the pound symbol in z-index always show up in Angular?

Having an issue with my code where I set a z-index in the CSS like this: .mat-mini-fab { position: absolute; right: 5px; top: 4px; z-index: 999; box-shadow: none !important; } However, whenever I visit my site, the z-index is not being appl ...

javascriptcssangulartypescript

The size of HTML select input varies among IOS, Android, and Windows devices

Does anyone know of a CSS property that can be used to tailor the styling specifically for IOS devices in order to achieve a similar look to that of windows and android?https://i.sstatic.net/VMSXb.jpg I attempted using -webkit, but unfortunately it did no ...

javascripthtmlcssresponsive-designselectinput

Personalizing MaterialUI's autocomplete functionality

Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...

javascripthtmlcssreactjsmaterial-ui

Variations in the implementation of responsive web design on laptops versus mobile devices

Looking at the css code below: @media only screen and (min-width: 0px) and (max-width: 768px) { ... } I'm curious about why, on my laptop, when I resize the browser window to exactly 768px, the css properties inside this media query are applied. ...

androidhtmlcss

Utilize the id in AngularJS to bring attention to a specific row within a table

I am brand new to using angularjs. I currently have a table structured like this: HTML <table class="table table-striped" id="manageResumeTable"> <thead class="text-center text-info text-capitalize"> <th class="text-center col- ...

javascriptjqueryhtmlcssangularjs

Can the Apache tomcat located at "localhost:8080/app.html" be accessed from a different network?

Currently, I am hosting my webpage on a Tomcat server. While I can easily access it from different computers on the same network, I am curious if there is any way to access this webpage/localhost from a different network? ...

tomcatwebserverhtml

Converting dynamic text enclosed in asterisks (*) into a hyperlink on a webpage with the use of JavaScript

I'm facing a unique situation where I need to transform specific text on an HTML page into anchor tags using JavaScript/jQuery. The text format is as follows: *www.google.co.uk/Google* *www.stackoverflow.com/StackOverflow* The desired outcome should ...

javascripthtmljqueryhyperlink

Issue with Ajax request failing to successfully send and retrieve raw HTML data

Utilizing an Ajax call to trigger a C# method that is responsible for processing user paste input by eliminating unwanted html tags and attributes. Encountering an issue where my Ajax call fails when I paste in content with html formatting (containing tag ...

htmlajaxmodel-view-controlleractionresultcontenttype

Modifying the appearance of Bootstrap button colors

I recently came across this code on the Bootstrap website. I am curious about how to change the text color from blue to black in this specific code snippet. Currently, the text is appearing as blue by default. For reference and a live example, you can vis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Conceal Bootstrap Toast for a day following dismissal

I have implemented Bootstrap 5 toasts to showcase an advertisement on my website. The goal is to make the advertisement disappear for 24 hours once the user closes it. Here's the current code snippet: <div class="position-sticky bottom-0" ...

javascripttwitter-bootstraplocal-storagebootstrap-5

Can JavaScript be used to continuously monitor a window variable object in real-time?

Is there a way to dynamically control a variable in JavaScript? I'm currently working on a code that needs to display a button when it reaches the last signature of an automatic request process. The code for activating/deactivating the button is show ...

javascriptjqueryhtml

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

javascripthtmlreactjs

A guide on transferring model value from a view to a controller upon button click in ASP.NET MVC

Is there a way to pass a value from a model in the view to a controller when a button is clicked, while also redirecting the user to that controller? Here is the code for the view: @model Status_Pedido.ViewModels.CodigoPedidoViewModel @{ ViewBag.Titl ...

c#htmlasp.net.netasp.net-mvc

Creating a dynamic navbar in an ASP.NET website by populating it with data from a

Seeking guidance on creating a dynamic Bootstrap navbar in an ASP.NET website based on the user's role stored in a database, while maintaining the same style. I have extensively searched for a solution without success. Any assistance would be greatly ...

cssasp.nettwitter-bootstrap

Localized Error: The property 'clientWidth' cannot be retrieved as the object is null or undefined

The issue with the error message seems to only occur on Internet Explorer, and unfortunately there doesn't seem to be a clear solution at the moment. Even after setting http-equiv="X-UA-Compatible" to IE8, the problem persists and I cannot seem to re ...

javascriptjqueryhtmlinternet-explorerdom

Can Angular's built-in internationalization features be used to translate bindings?

Challenge The task at hand involves integrating translations into an Angular 6 application to support static text in multiple languages. The objective is to have the ability to choose a language during the build process without requiring dynamic translati ...

javascripthtmlangularinternationalizationangular-i18n

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

javascripthtmlember.jsmodel

How to Build a Number Spinner Using Angular Material?

Is there a number spinner in Angular Material? I attempted to use the code provided in this question's demo: <mat-form-field> <input type="number" class="form-control" matInput name="valu ...

htmlangularangular-material

Exploring the possibilities of CSS grids within the Wordpress platform

After successfully building my website, I am now in the process of converting it into a customizable wordpress theme. One challenge I am facing is integrating a dynamic gallery using CSS grid. The goal is to upload photos, videos, and gifs in Wordpress and ...

phpwordpresscsscss-grid