Struggling with Bootstrap's responsive design: Ensuring images remain anchored at the bottom of a div

I recently integrated the Bootstrap product example into my website, located at https://getbootstrap.com/docs/5.0/examples/product/. Everything works well except for a minor issue I encountered on iPads or when zooming in on computers - the images on the website tend to move around. For reference, you can view how it appears here: https://i.sstatic.net/3lOpQ.jpg

Here is a comparison of the normal appearance on my computer without any zoom: https://i.sstatic.net/Zw4ic.jpg

Would appreciate any suggestions or solutions on how I can ensure that the images remain fixed at the bottom?

Below is the HTML code snippet:

<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
        <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden" id="boats">
            <div class="my-3 py-3">
                <h2 class="display-5"><i class="fas fa-anchor"></i> Add your boat</h2>
                <p class="lead">We offer presets for many boats and are working on adding your boat to the Trimlog app.
                    In relation to your boat, the boat specific data will be stored.</p>
            </div>
            <div class="bg-light shadow-sm mx-auto" id="boats-bg"></div>
        </div>
        ...
    </div>

    ...

Additionally, here is the relevant CSS styling information:

#boats-bg {
    background-image: url("../assets/images/sailing/DSC06987.JPG");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    height: 300px;
    border-radius: 21px 21px 0 0;
}

...

Answer №1

Issue

The problem arises when cards have equal height regardless of their content, resulting in uneven positioning of the images within the cards.

https://i.sstatic.net/aM86A.png

Resolution

To address this issue, apply a flexbox context to all children elements within the cards and adjust the image's margin-top property to 'auto' to keep it positioned at the bottom.

  1. Add two classes, 'd-flex' and 'flex-wrap', to the card
  2. Apply the 'mt-auto' class to the image
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
    <div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden d-flex flex-wrap" id="boats">
        <div class="my-3 py-3">
            <h2 class="display-5"><i class="fas fa-anchor"></i> Add your boat</h2>
            <p class="lead">We offer presets for many boats and are working on adding your boat to the Trimlog app.
                In relation to your boat, the boat specific data will be stored.</p>
        </div>
        <div class="bg-light shadow-sm mx-auto mt-auto" id="boats-bg"></div>
    </div>
    <div class="bg-secondary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden d-flex flex-wrap" id="trims">
        <div class="my-3 p-3">
            <h2 class="display-5"><i class="fas fa-wrench"></i> Record trims</h2>
            <p class="lead">During the training you try many different trims in different weather conditions at
                different locations. Record this data while you're on the water so you'll never forget it.</p>
        </div>
        <div class="bg-dark shadow-sm mx-auto mt-auto" id="trims-bg"></div>
    </div>
</div>

Answer №2

The issue appears to persist in the bootstrap example as well.

Upon inspecting your site, it seems like you could solve this problem by creating a unique class for each of your card divs (such as the ones with IDs: boats, trims, etc...) and a separate class for the image within each card div.

Let's hypothetically name this card class custom-card and the image class within the card as custom-card-image. In that case, you can implement the following CSS:

div.custom-card {
    display: flex;
    flex-direction: column;
}

div.custom-card-image {
    flex-grow: 1;
}

This adjustment ensures that each custom-card-image always stays at the bottom of its respective parent custom-card.


display: flex and flex-direction: column arrange the items within the card vertically.

flex-grow determines how much leftover space in the flex container should be allocated to the item (Source). By assigning it a value of 1, it occupies all remaining space.

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

Is there a way to send the values of multiple checkboxes using Ajax and display them in separate div elements?

I have a JSP page with checkboxes. I am trying to retrieve the checkbox values and include them in the data property of an AJAX call. When the AJAX call is made, a div will open displaying the selected checkbox values as follows: fruits: Lichi, Mango H ...

Count divisions using PHP and the LI function

I'm struggling with a loop that is responsible for displaying <li> elements, and I need to incorporate a new class into the first item, as well as every sixth subsequent <li> element. For example: while ($db_field = mysql_fetch_assoc($re ...

Passing parameters from an HTML form using PHP

I have a background in C# and am still relatively new to PHP. I have an HTML form that submits its values to the PHP file below, but for some reason, the values are not being set. Can you help me identify what I'm doing wrong? <?php include(' ...

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

The left and right edges are not extending across the entire screen

Can anyone help me determine if this is a duplicate issue? I'm unsure why my left and right borders are not extending the full width of the screen. The website in question is ojs.monojitbanerjee.co.cc Here is the structure: <body> <div id= ...

Guide to positioning a card in the middle of a container using Bootstrap

I am struggling to center a card inside a container using CSS properties like justify-content-center, mx-auto, and hardcoding. However, I have not been able to achieve the desired result. Here is the code snippet from my HTML file: <div class="cont ...

Tips for opening a new browser tab

I'm having trouble getting my code to open in a new browser tab. Can someone help me figure out what's wrong? function getWaterMeterList() { // alert("ON"); var BillingPeriod = $('#BillingPeriod').val(); $.ajax({ ur ...

Utilizing an external SCSS or CSS file with Material UI in React: A step-by-step guide

Encountering issues with external CSS files in my React project that uses Material UI components. Despite creating a CSS file for each component in the react components folder, they fail to load upon hard reloading the site. I prefer using external CSS ov ...

Ways to display HTML code on a webpage

As part of my internship, I am tasked with creating a WYSIWYG editor that can incorporate logic such as if-statements and loops. While there are existing WYSIWYG editors available, none of them seem to support this type of functionality. I am seeking tech ...

The heights of columns in CSS column-count vary

I've been experimenting with creating a masonry grid of images using column-count to achieve a similar layout to this example. Despite following the CSS and HTML structure outlined in the link, I've encountered an issue where the columns don&apo ...

Tips for containing a range slider within a div element in a flexbox container

I am currently using Javascript to generate a grid of images, and I want to include a range slider at the bottom of one of the images. Here is a simplified version of my code using flex-container: <style> .flex-container { display: flex; fle ...

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

I recently successfully converted a dynamic webpage to PDF using jsPDF and now I'm looking to customize the font family of the PDF document. Is there an option for this in jsPDF? Please advise, thank you! Here is my code snippet: <div id="#p ...

Is there a way to retrieve the id attribute of an option element from the source component?

When a user makes a selection, I am trying to access the id attribute of the HTMLOptionElement. However, it always returns 0 instead of the actual id I passed (such as 1 or 2) from the select tag: <div class="col-8"> <select (cha ...

Having difficulty grasping the concept behind the prepend method's functionality

I encountered an issue with my code, where I successfully created a <th> element initially, but faced problems when trying to create it repeatedly. function createTH(){ var noOfRow = document.getElementById("addItemTable").rows.length; var t ...

Challenges with Hangman in JavaScript

As a beginner in JavaScript, I recently developed a simple hangman-like game. However, I encountered some challenges that I need help with. One issue is related to my lettersGuessed array. Currently, the array displays every time a key is pressed and repea ...

The onClick() function in JavaScript is encountering issues on the Firefox OS mobile application

I've been working on an app for Firefox OS mobile devices where I'm trying to trigger a Javascript function onClick() from a div attribute. It's functioning properly in regular browsers, but when I test it in the simulator, the onClick funct ...

How to position a "figure" element at the center using CSS creatively (without relying on Div elements)

Struggling with my first website creation, I encountered a challenge in centering three inline-block images using CSS. Despite successfully using the figure tag to title and display the images, I couldn't get them to align horizontally from the cente ...

Ways to combine text styling with images, stroke effects, and shadows all at once

I am looking to enhance my text with a background image, a text-stroke, and a text-shadow. The issue I am facing is that the text-shadow appears on top of the background image. Does anyone have a solution for placing the shadow behind the image? If you te ...

Tips for appending the id of an active element to a URL

My goal was to include the id value of the active element in a URL and then redirect to that URL with a button click. HTML <div class="icon" tabindex="0" id="company"> <img src="company.png"> </div> <button type="submit" onclick= ...

Is there a way to trigger the onclick event while dragging the div?

Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...