What is the best way to ensure that an element remains fixed at the bottom of a div or card

I am currently working on creating cards that contain a link at the end. My goal is to have these links consistently displayed at the bottom of the div, regardless of the text length. Currently, they appear at the end of the text content. Is there an easy way to achieve this?

Instead of using a card footer, I would prefer to align the link at the bottom of the same container where the product link is located. Here's how it appears at the moment:

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

HTML

            <div class="card wow fadeIn swipe-away hover-shadow ">
                <img class="card-img-top" src="<?php the_sub_field('product_image'); ?>">
                <div class="card-body">
                    <h5 class="card-title"> <?php the_sub_field('product_name'); ?></h5>
                    <p class="card-text"> <?php the_sub_field('brief_description'); ?></p>
                    <a href="<?php the_sub_field('product_link'); ?>" class="h3 read-more-full btn hero-btn wow fadeIn btn-accent">View Strain</a>
                </div>

            </div>
cssbootstrap-4

Answer №1

To ensure the card-body div takes up all available height and pushes the button down, you can set it to occupy 100% of the height by using flex properties. Here's an example of how it could be implemented:

 <div class="card-body d-flex flex-column h-100">
    <h5 class="card-title"gt; <?php the_sub_field('product_name'); ?></h5>
    <p class="card-text flex-grow-1"> <?php the_sub_field('brief_description'); ?></p>
    <a href="<?php the_sub_field('product_link'); ?>" class="h3 read-more-full btn hero-btn wow fadeIn btn-accent">View Strain</a>
 </div>

Answer №2

To achieve this effect, you can specify the position as absolute and then set the bottom value to either 0px or a slight offset.

<div style=position:absolute;bottom:10px;">

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

Guide to aligning text vertically in a column alongside an image using Bootstrap 5

I have been using the Bootstrap 5.3.2 grid system for most of my website. I am trying to create a layout with an image on the left and text on the right. However, I am facing an issue with aligning the text vertically in the column. Is there a way to achie ...

cssbootstrap-5

Looking to modify the CSS of an element during a drop event using interact.js?

I've encountered an issue in my code where setAttribute and .transform are not working as expected. I have tried using them within the ondrop event function, but with no success. interact('.dropzone') .dropzone({ // Setting the r ...

javascriptcssinteract.js

Can you provide examples of design patterns commonly used in HTML and CSS?

Starting out with Ruby on Rails is exciting, but I am feeling overwhelmed by CSS and HTML. While there are plenty of books on CSS and HTML patterns, I am more interested in learning what is actually used on real webpages. For example, when creating a simpl ...

htmlruby-on-railscss

What is the best way to duplicate an image on both sides in a vertical manner?

I've successfully implemented a background image on the left side of the website, however, I'm facing difficulty in replicating the same effect on the right side of the webpage. <style> body { background-image: url('background. ...

htmlcss

interactive symbols in a reorganizable tree structure

I have been developing a customizable tree list for our users to arrange their website content. It allows them to add and rearrange pages by dragging and dropping. Each list item includes the page name and three icons (lock, visible, and edit). The challe ...

javascriptjqueryhtmlcssjquery-ui

Using justify-content-between in a div container with only two items will not produce the desired effect

I'm having trouble aligning two elements on opposite ends of a div container using Bootstrap's justify-content-between class. The h4 element is not on the left and the button on the right as expected. I am using Bootstrap 5.2.3. Can anyone help m ...

htmlcsstwitter-bootstrapbootstrap-5

unrestricted motion through the utilization of css3 transitions and translations

When applying a new CSS translate, it's common practice to specify the exact number of pixels you want an element to move, such as 50px, 60px. This results in a relative movement from its current position. You can see an example of this here: http://j ...

csstransformtransition

Colorbox's functionality struggles to uphold several groups simultaneously without encountering errors

I have incorporated Colorbox on this page. On the setup, I have various groups listed as groups 1 to 9. However, when clicking on the second and third items, they display correctly according to the provided code. My aim is to make everything appear in the ...

javascriptjquerycsscolorbox

Show secret information once radio button is selected through JQuery code

I am dealing with two checkboxes ABC XYZ When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown. Everything works fine, except that if the ABC checkbox is checked by defaul ...

jqueryhtmlcss

The container is unable to contain the overflowing Slick carousel

The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...

htmlcssangularjssliderslick.js

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

I am in the process of creating a website that features a fixed (non-sticky) footer placed behind the main content using the z-index property. The footer only becomes visible when the user scrolls to the bottom of the page, achieved by assigning a margin-b ...

javascripthtmljquerycss

Encountering obstacles when attempting to save form information to a MongoDB database using Node.js

I've been struggling to save the data entered in my form to my database, but it's not working at all. No errors are showing up and nothing is being logged. Here's the HTML code I'm using: <!DOCTYPE html> <html lang="en"> & ...

javascriptnode.jshtmlmongodbbootstrap-4

The CSS slideshow is malfunctioning when displaying images retrieved from the database

I received a complimentary website layout to enhance my PHP skills. The website originally had slides on the index page, sourced directly from my computer when it was in index.html. However, now I have modified it to retrieve images from a database. Instea ...

phphtmlcssfunctionslide

What is the conventional method for organizing forms in ASP.Net?

Here's my forms layout: <body> <p>Please note that this form is solely for illustrating the Required Field Validator and does not perform any actual function.</p> <form id="frmValidator" method="post" runat=" ...

c#asp.nethtmlcsslayout

MySQL unable to access information entered into form

After creating a new log in / register template using CSS3 and HTML, I now have a more visually appealing form compared to the basic one I had before. To achieve this look, I referenced the following tutorial: http://www.script-tutorials.com/css 3-modal-po ...

phpmysqlcssxhtml

Webpack Setup Issue: Unable to locate the @import Declaration

I recently set up Webpack, but when I try to bundle my modules using npm run build, I encounter an error with Webpack stating: "Could not resolve the @import for ~bootstrap/scss/bootstrap.scss" To troubleshoot this issue, I made sure to install Bootstrap& ...

webpacksassbootstrap-4

CSS query: How to eliminate the extra space at the top of a webpage?

How can I eliminate the gray area visible here: The padding in style.css is currently set to: padding: 0; I have attempted to modify this by changing the following: #page { margin-top: 0; } I have tried variations such as: #page { margin-top: 5px !im ...

cssmargin

I am having trouble displaying the Modal when attempting to invoke the function through the onClick prop

import React, { useState } from 'react' import Header from './Header' import { Button } from '@material-ui/core'; import {Modal} from 'react-bootstrap'; import Dialog1 from './Dialog1'; const Assessment = ...

reactjsbootstrap-4react-hooks

The align-self-center property in Twitter Bootstrap Flex does not properly center elements vertically

I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss