The align-self-end CSS class seems to be malfunctioning

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
  <div class="card bg-dark text-white">
    <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
    <div class="card-img-overlay">
      <h5 class="card-title">Title</h5>
      <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
      <div class="align-self-end">Text I want at bottom</div>
    </div>
  </div>
</div>

I am facing a challenge in positioning the text within the last align-self-end div to the bottom of the image. Despite applying the class, the text doesn't align as expected due to flex being applied to the .card-img-overlay div with a column direction. Why is it that I am unable to achieve this alignment?

csshtmlflexboxbootstrap-4

Answer №1

The card-img-overlay element does not have the display:flex property.

To achieve this, you can add the d-flex flex-column classes to it and utilize mt-auto to align the text at the bottom.

View example here

<div class="card bg-dark text-white">
       <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
       <div class="card-img-overlay d-flex flex-column">
            <h5 class="card-title">Title</h5>
            <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
            <div class="mt-auto">Text I want at bottom</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

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

Press a button to instantly switch the image in Chrome and Safari with no transition

I am working on an interface that contains multiple buttons. Whenever a user clicks on a button, I am using jQuery to toggle the button image. The code looks something like this: $(".button").click(function() { $(".button").html("<img src="...">" ...

jqueryhtmlgoogle-chromesafarionclick

stopPropagation() halts the propagation in the opposite direction

I encountered an issue while attempting to create a non-clickable div. While it does stop propagation, it doesn't prevent what should be stopped and allows things that shouldn't be clickable. js //screen has set stopPropagation $("#smokeScree ...

javascriptjqueryhtml

Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...

javascriptjqueryhtmlcsssass

CSS form not aligning properly within wrapper div and appears to be floating outside of it

I am in the process of creating a website that includes a wrapper div containing a: -Header -Content -Footer The issue I am encountering is when I insert regular text into the content section, everything displays properly and the background stretches s ...

htmlcss

changing the size of a carousel

I am faced with a challenge in resizing my carousel. While I can resize the images successfully, I am struggling to adjust the size of the next and previous buttons as well as the image indicator. No matter what size the images are, these elements remain ...

htmlbootstrap-4carousel

Is it possible to save the location of a draggable box using CSS3?

I'm trying to figure out how to store the position of a box in a fluid sortable row. Essentially, I want the position to be remembered when a user drags a box from category 1 to category 2, even after refreshing the page. Below is the HTML code for t ...

phpjqueryhtmlcss

The html-docx-js package generates incomprehensible text

Has anyone successfully utilized html-docx-js recently? I attempted the following code snippet: var newHTML = "<!DOCTYPE html><html><head lang='en'><meta charset='UTF-8'><title>Report</title& ...

javascripthtmlnpmms-worddocx

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

I am encountering an issue with my JavaScript and CSS code. It works perfectly fine within the fiddle environment but fails to function properly outside of it. Here is the link to the fiddle When I embed the code into an HTML document directly, it does n ...

javascripthtmlcss

ES6 import of CSS file results in string output instead of object

Too long; Didn't read I'm facing an issue where the css file I import into a typescript module resolves to a string instead of an object. Can someone help me understand why this is happening? For Instance // preview.ts import test from './ ...

javascriptcssangularwebpackimport

Filtering out section boxes does not eliminate empty spaces

Link to Fiddle I've run into a bit of a roadblock while trying to filter my section box for a project I'm currently working on. The issue I'm facing is that instead of collapsing the first section box to display only the filtered options, i ...

javascriptjqueryhtmlangularjs

The parent of these inline-blocks does not adjust its width to match its children, even when the parent has overflow-hidden applied

This is the code snippet I have been working with: <!DOCTYPE html> <html> <head> <style> div.ex2 { background-color: lightblue; width: 110px; height: 110px; overflow: ...

htmlcss

Incorporating an external URL into a webpage with a method that allows for overflow

Let me explain my current predicament. I recently created a new navigation menu using a php framework different from the one used in the existing site. Both the new menu and the old site exist on the same domain. To integrate the new navigation, I attempte ...

javascriptjqueryhtmlcss

How can I correctly embed a PHP variable within an HTML document?

How can I properly include the variable $var from the file.php: <?php $var = 5; ?> and use it in this php file with embedded html code: <?php include "file.php" ?> <!doctype html> <html lang="en"> <head&g ...

phphtml

"Present a continuous sequence of images in HTML to create a dynamic video-like experience

A PHP file has been created to extract images from a MySQL database and display them as a sequence of images that update every half second. Using the setInterval method in JavaScript, the page is refreshed every half second to display a new picture. $(doc ...

javascriptphphtmlcssvideo-streaming

Attempting to utilize a Python web scraping tool to extract content from a webpage that undergoes regular text updates

I must admit that I am a complete beginner who is feeling lost and unsure of what to do. My goal is to extract 4 pairs of numbers from a webpage using a web scraper. These numbers change when modified on a different page, but I'm unable to pull the d ...

javascriptpythonhtmlcss

Reduce the size of Scripts/CSS for production mode using node.js

I currently have a node-based web app where the (client) JavaScript and CSS files are not minified for easier debugging purposes. As I prepare to launch into production, I am looking at minifying these scripts. It would be convenient to have a command lik ...

javascriptcssnode.jsminifyproduction

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

javascripthtmlcsscss-transitionscss-animations

Creating a functional dropdown form in Ruby On Rails: A Step-by-Step Guide

Having an issue with implementing a dropdown form in the navigation bar of my Rails application. The problem arises randomly - sometimes it works smoothly, while other times I have to refresh the page for it to function properly. The Rails version being u ...

javascriptjqueryhtmlruby-on-railsruby

Utilize Javascript or Jquery to intercept and handle both GET and POST requests

Is there a method to effectively intercept and capture both GET and POST requests as they are sent from the browser to the server? In my web application, full page refreshes occur after each request is submitted, however, some pages experience delays in r ...

javascriptjqueryhtmlasp.net-mvc