Bootstrap 4 and Flex just can't seem to nail this down

Hi there, I'm in need of some assistance with a seemingly simple task that I've been struggling with for hours.

https://i.sstatic.net/6J6G7.png

I'm trying to create a 3 column layout where the images with varying heights align at the bottom, and the text with different lengths aligns at the top.

However, I've encountered an issue where the "h-100" class on the card is factoring in the text height, causing the alignment to be off. This results in the footer overlapping with the text.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">       
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="row bg-dark">
    <div class="col-12">
      <h1 class="text-light">Heading</h1>
    </div>
  </div>

  <div class="row">

    <div class="col-4">
      <div class="card border-0 h-100">
        <div class="card-body d-flex align-items-end px-0">
          <img src="https://placekitten.com/640/360" class="img-fluid">
        </div>
      </div>
      <div class="px-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>
    </div>
    <div class="col-4">
      <div class="card border-0 h-100">
        <div class="card-body d-flex align-items-end px-0">
          <img src="https://placekitten.com/360/640" class="img-fluid">
        </div>
      </div>
      <div class="px-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>
    </div>
    <div class="col-4">
      <div class="card border-0 h-100">
        <div class="card-body d-flex align-items-end px-0">
          <img src="https://placekitten.com/640/360" class="img-fluid">
        </div>
      </div>
      <div class="px-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>
    </div>

  </div>

  <div class="row border-1">
    <div class="col-12">
      <h3 class="text-dark mb-0">Footer</h3>
    </div>
  </div>

</div>

</body>
</html>

htmlcssbootstrap-4

Answer №1

Make sure to add the align-items-end class to the row element for proper alignment. Take a look at my solution in the full-page view below.

<div class="row align-items-end">
       <!-- content -->
  <div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row bg-dark">
    <div class="col-12">
      <h1 class="text-light">Heading</h1>
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col-4">
      <div class="card border-0">
        <div class="card-body d-flex align-items-end px-0">
          <img src="https://placekitten.com/640/360" class="img-fluid">
        </div>
      </div>
      <div class="px-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>
    </div>
    <div class="col-4">
      <div class="card border-0">
        <div class="card-body d-flex align-items-end px-0">
          <img src="https://placekitten.com/360/640" class="img-fluid">
        </div>
      </div>
      <div class="px-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>
    </div>
    <div class="col-4">
      <div class="card border-0">
        <div class="card-body d-flex align-items-end px-0">
          <img src="https://placekitten.com/640/360" class="img-fluid">
        </div>
      </div>
      <div class="px-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem ipsum dolor sit amet, consectetur adipisicing elit... Lorem
          ipsum dolor sit amet, consectetur adipisicing elit...</p>
      </div>
    </div>
  </div>
  <div class="row border-1">
    <div class="col-12">
      <h3 class="text-dark mb-0">Footer</h3>
    </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 is the best way to resize an HTML element to fill the remaining height?

I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for. Intended Goal : HTML Markup : <body> <div class="header"> THIS IS A HEADER W ...

htmlcsslayoutnode-webkit

Ensuring that the CSS aligns correctly with the HTML structure is essential in order to enable the hover

I am looking to have an image appear when a mouse hovers over ONLY the "name" of the food item, and not the "price" which is part of div.child. <div class="menu-block"> <div class ="menu-titles"><span><p class="title">Brunch< ...

htmlcssimagetext

ENTER DATE VALUE INTO ANGULAR

SERVICE.TS addP(nome: string, cognome: string, anno_n: string): Observable<any> { return this.http.post<Partecipanti>(this.partecipantiUrl, { nome: nome, cognome: cognome, anno_n: anno_n }, this.httpOptions).pip ...

htmlangular

Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...

javascriptasp.netcss

How can I adjust the Bootstrap container width without it changing when resizing the browser window?

As I work on developing my website, I am utilizing Twitter's bootstrap grid system. Despite my efforts, I have been unable to find a solution for fixing the width of the site. My goal is to lock the size in place so that it remains constant regardless ...

htmlioscsstwitter-bootstrapgrid

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Is there a way to remove a pseudo element in CSS using Internet Explorer

I've been struggling to make some pseudo elements work in Internet Explorer, but it seems like I can't get it to function as intended. It's as if IE is ignoring the CSS rules that I have set up for these elements, and it's quite frustr ...

cssinternet-explorerie-developer-tools

Troubleshooting a Scrolling Problem in AngularJS页面

My web page design incorporates a header, content body, and footer using Responsive and Angular Material. Within the Content Body, there is an md-content element containing multiple text paragraphs enclosed in <p>. I have set the overflow to auto (ov ...

htmlcssangularjsscrollbar

Difficulty encountered while trying to implement JQuery Typer effect in HTML

I'm new to web development and I'm currently working on my personal website. I've been trying to incorporate a JQuery effect into my site, but I'm facing some difficulties. I came across this code snippet online that supposedly makes it ...

jqueryhtml

If the div element contains an <li> element, jQuery animate() will not function properly

Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists. To trigger the animation, click on the Products option in the top menu. T ...

jqueryhtmlcssjquery-animatehtml-lists

Tips for accessing the value from a bootstrap datepicker input using angular 7

I'm currently working with Angular 7 and Bootstrap 4. I have integrated a Bootstrap datepicker to allow users to select a date, but I am having trouble retrieving the selected data. Here is a snippet of my HTML code: <div class="col-lg-8 form-gro ...

angularbootstrap-4angular7bootstrap-datepicker

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

csswordpresscss-selectors

The evolution of Bootstrap 4.5: a closer look at its

I am experiencing an issue with a grid containing three buttons. The position of the third button is not consistent between Bootstrap versions 4.4.1 and 4.5.0. The desired layout includes the first two buttons on one line and the third button on another l ...

bootstrap-4

Converting units to rem dynamically in CSS: a comprehensive guide

Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues. I have set the root font-size as 23px The current font-size is 16px The expected result should be 16 / 23 => 0.695rem Question: I am looking for ...

javascriptjquerycss

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

outputting mysql information onto an HTML webpage using socket.io and node.js

Currently, I am experimenting with printing MySQL data to an HTML page as a way to practice and enhance my learning. Updated Code Below is the snippet from my server.js file var mysql = require("mysql"); var app = require('express')(); var htt ...

htmlmysqlnode.jssocket.io

Tips for aligning multiline text in the center of images with varying widths

Excuse my lack of experience, but I have a question, I am looking to center a header and some text next to an image with variable width. Additionally, the text should be able to position on either side of the image, while still being coded first in the HT ...

phphtmlcsscenter

Adding color to a particular cell within a table using PHP

I'm working on a code that dynamically generates a table with unique IDs for each cell. while ($i <= 30) { echo "<tr id=\"Row{$i}\">"; while ($d <= 90) { $d = $d + 1; echo '<td i ...

phphtmlcss

personalized popup notification following execution of query

I have an anchor tag that when clicked, it takes the ID and runs a query to delete rows. Currently, a JavaScript alert box appears with a successful submission message (LOCAL host says:.....). However, I would like to display a custom message or modal popu ...

javascriptphpjqueryajaxhtml

The live search feature using AJAX is exceptionally sluggish

Update: I am utilizing XAMPP with the built-in Apache server and vscode. I have created a live search input functionality (HTML -> JavaScript -> PHP -> JavaScript -> HTML) that runs smoothly upon initial input. However, I have noticed that it ...

javascriptphphtmljqueryajax