position fixed bottom image with flexbox in bootstrap styling

I am encountering an issue with the positioning of images in my columns. I have multiple columns with titles at the top (using flexbox) where the height of the columns adjust dynamically to maintain uniformity.

However, below each title is an image and I want the image to always be positioned at the bottom of the column.

Here is my code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
      <div class="card-body flex-fill">
        <h4 class="article-preview__headline"><a href="#">title</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=990" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
      <div class="card-body flex-fill">
        <h4 class="article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=991" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>
htmlcsstwitter-bootstrapflexbox

Answer №1

To rearrange the elements, you have two options: modify the HTML structure or utilize the CSS order property.

If you set each card-body as a flex-column, you can then use the order property to ensure the image div appears at the bottom of each column visually, and apply margin-top:auto to push it down.

.card-body {
  flex: 1;
}

.card-body .image {
  order: 2;
  margin-top: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="article-preview__headline"><a href="#">title</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

Answer №2

According to Paulie_D's insightful response

You don't need extra CSS for this; just utilize some additional css classes: order-1, order-2, order-3 and mt-auto 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="order-1 article-preview__headline"><a href="#">title</a></h4>
        <div class="order-3 mt-auto image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="order-2 link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="order-1 article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="order-3 mt-auto image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="order-2 link" href="#">Link goes here</a>
        <hr/>
      </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

Using Bootstrap 3 to implement various grid systems within a single website

For a current project I am working on, my goal is to fill the entire .container with 7 columns within my grid system. To achieve this, I plan on adjusting the Less variable (@grid-columns) before compiling a bootstrap.css file at http://getbootstrap.com/cu ...

csstwitter-bootstraptwitter-bootstrap-3

The issue of unselection not functioning properly for multiple items when using both selectable and draggable features

i need the unselection of list items to be as smooth as selectable() but without draggable() My desired outcome is similar to the following gif showcasing combined selectable and draggable functionality: https://i.stack.imgur.com/3GjTD.gif here's t ...

javascriptjqueryhtmljquery-uidraggable

Customizing Your Accordion Group Code for Maximum Impact

var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { var active = document.querySelector(".accordion.active"); if (active && active != this) { active.cla ...

javascriptjqueryhtmlcssaccordion

What is the significance of Error: [$injector:unpr] Unknown provider: tProvider <- t <- myActiveLinkDirective?

Just testing how my PROD version of the app looks, ran it through some gulp tasks (minify, strip unused css etc.) and encountered this error: Error: [$injector:unpr] Unknown provider: tProvider <- t <- myActiveLinkDirective Anyone know what's ...

htmlangularjsgulp

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

htmlcss

PHP script, creating a public function that manipulates an array while also incorporating CSS styles

Within a public function, I have the following PHP: [ 'type' => 'text', 'desc' => $this->l('some information'), ] Using this code will show the text "some information" on a webpage. Is there a way ...

phpcssarrays

Is there a way to implement a scrolling feature that specifically identifies an h1 element, and subsequently alters the color of said element upon reaching a distinct section?

Currently, my function changes the color to black when the scroll number reaches 100. However, I am looking to target the JavaScript so that it changes the color to black when the scroll reaches a specific section designated by a p tag. My code is almost t ...

javascripthtmlcss

Tips for extracting multiple attributes from XML using jQuery

I have successfully created an autocomplete search box that displays only a list of names. But now, I want to expand it to show all data using an XML file, including attributes such as name, city, country, and more. How can I achieve this? Your assistance ...

jqueryxmlhtml

Based on the action taken, send specific data through AJAX - whether a form submission or a div click

There is a function called search, which can be triggered either by clicking on a div or submitting a form. When the div is clicked, the id of the div is sent as data in an AJAX call. However, if the form is submitted, I want to send the inputted data thr ...

javascriptjqueryhtmlajax

Incorporate a share (contact) feature for WhatsApp and various messaging platforms on your website

Is there a way to include a share button on my website's page? I found that we can add a send SMS feature to mobile HTML pages using the following code: <a href="sms:?body=...">title</a> How can we implement this code for sharin ...

javascriptandroidhtml

Upload a gltf file to a three.js environment using an HTML `<input>` tag

Struggling to incorporate a gltf object into a three.js scene by allowing users to upload it via an HTML input tag. The goal is to choose a specific file from the client's computer, display it on the website, compress it, and then transfer it to a mu ...

javascripthtmlthree.js3d

The latest Bootstrap 5 design elements are incorporated into both FullCalendar version 5 and Angular 8 for a

I recently developed a calendar using FullCalendar v5 in Angular 8, and I was pleased with how it looked without any additional styling. However, I now want to integrate forms for creating events when a date is clicked, so I decided to incorporate Bootstra ...

cssangular8fullcalendar-5

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

I am trying to implement a drag and drop file feature on my webpage, but for some reason, it's not working as expected. The drop zone is supposed to change its background color when I drag a file onto it, but that functionality doesn't seem to be ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. https://i.sstatic.net/Yct2d.png How can I ensure that the video thumbna ...

htmlcssreactjs

Can a TypeScript variable in Angular contain a mixture of HTML and plain text?

I have a website where I am displaying content from a Model file. I would like to create a TypeScript variable that contains both a string related to the website's content and a URL enclosed in an HTML tag. When this variable is rendered on the view, ...

htmlangulartypescript

Launching the Bootstrap 5 modal will cause the header and background to shift towards the right side

Currently, I am working with Angular 2 and Bootstrap 5 for the front-end of my project. I noticed that when I open a modal, the header and background shift to the right, covering the scrollbar. Upon closer inspection, I discovered that the HTML code trans ...

htmlcssangularbootstrap-modalbootstrap-5

Activate CSS when the mouse is released

I have developed a tool with a console setup that can be toggled between minimized and maximized states upon clicking. However, I am facing an issue where the console automatically minimizes once it is maximized. What solutions can I explore to address thi ...

javascriptjqueryhtmlcss

HTML5 video starting soon - countdown timer initialized

I'm currently working on incorporating a 3-second timer to display before the HTML5 video starts playing. Right now, I have a hover function in place that successfully starts the video upon hovering over it. However, I'd like to add a timer featu ...

jqueryhtml

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

javascriptjqueryhtml

How to interrupt a JQuery animation and restart it from the middle?

Currently, I am tackling my first JQuery project and facing a challenge. As the user mouseleaves the .container, the animation does not reset but continues as if they are still within it. My goal is to have the animation revert in reverse if the user decid ...

javascriptjqueryhtmlcss