How to use Bootstrap 5 to position a bottom div element inside another div element

I am trying to display three cards side by side, with the orange part containing the icon always at the bottom. How can I achieve this without using redundant classes?

I attempted to use align-items-end, but it did not work as expected.

The goal is to only use Bootstrap classes for the solution.

For detailed code and an example check out this Fiddle:

@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d130d12">[email protected]</a>/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9bc68288848598abdac5d2c5da">[email protected]</a>/font/bootstrap-icons.css");
.coolspan {
  background-color: #a71a0b !important;
  color: #fff !important;
}
<h2 class="text-center">Title</h2>
<div class="row justify-content-center d-flex">
  <div class="m-3 py-3 col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12 justify-content-center border rounded-2 border-dark flex-column position-relative">
    <div class="d-flex">
      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">
    </div>
    <div>
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <div class="d-flex justify-content-center coolspan rounded-2 shadow align-items-end">
      <i class="bi bi-person-circle big-icon"></i>
    </div>
  </div>

  <div class="m-3 py-3 col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12 justify-content-center border rounded-2 border-dark flex-column position-relative">
    <div class="d-flex ">
      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">
    </div>
    <div>
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

      </p>
    </div>
    <div class="d-flex justify-content-center coolspan rounded-2 shadow align-items-end">
      <i class="bi bi-person-circle big-icon"></i>
    </div>
  </div>

  <div class="m-3 py-3 col-xl-3 col-lg-4 col-md-6 col-sm-6 col-xs-12 justify-content-center border rounded-2 border-dark flex-column position-relative">
    <div class="d-flex ">
      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">
    </div>
    <div>
      <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
    <div class="d-flex justify-content-center coolspan rounded-2 shadow align-items-end">
      <i class="bi bi-person-circle big-icon"></i>
    </div>
  </div>

htmlcssalignmentbootstrap-5vertical-alignment

Answer №1

Upon analyzing your code, I have optimized it by utilizing Bootstrap classes exclusively to enhance its structure. The following key modifications have been made:

  1. I removed unnecessary classes like col-md-6, flex-column, and justify-content-center. Instead, I utilized col-sm-6 up to the lg breakpoint, eliminating redundant elements in this context.
  2. To improve alignment, I grouped the img, p, and icon div within a new parent div acting as a flex container. By setting its height to 100% using h-100, the icon can be effectively positioned at the bottom.
  3. I simplified the structure by removing an unnecessary parent container that enclosed the img tag.
  4. The styling of the icon div was adjusted to make use of w-100 for full width and align-self-end to align it at the bottom of the containing div. This approach worked due to the default flex row direction set by the d-flex class.

UPDATE A minor refinement has been made (without impacting the solution) involving the removal of the d-flex class from the row element since Bootstrap's row classes already have the display: flex property configured

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

Web-based client services

Context: An HTML file I'm working with takes in multiple parameters and utilizes JavaScript to dynamically render the content. The page pulls data from various local XML files for processing. For instance, accessing service.html?ID=123 displays info ...

javascriptjqueryhtmlajax

Include a Condition in Thymeleaf to Determine Action Based on Value Type

When creating a table, I need to insert values. While most values are plain, some require their decimal values to be displayed. To remove all decimal values, I am utilizing the formatDecimal function. <td th:each="dayWorked:${metier.getUserDayWorked(u ...

htmlspring-mvcthymeleaf

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

htmlcss

Loading a local FBX file in Three.js without the need to upload it

When attempting to load files selected by users in an HTML input, I encountered a problem with the loader expecting a URL in Linux style. I have tried various methods such as using a blob as a URL object, providing raw data to the FBX loader, and even usin ...

javascripthtmlthree.js

Can a HTML element be transferred from one div to another div in React?

Is there a way to transfer an HTML element from one div to another in React and add animation during the transition process? Any suggestions on how to achieve this would be highly appreciated. ...

javascripthtmlreactjs

The link generated through ERB using link_to cannot be clicked on

When using the ERB link_to helper method to generate a hypertext link to an individual article, I am encountering an issue where the link appears as clickable in the view but is not actually clickable (the cursor does not change to a pointer). I have atte ...

htmlcssruby-on-railsruby

Minimum and Maximum Price Input Field

Hello everyone, I'm currently facing an issue with a code that is supposed to filter with minimum and maximum price values, but it's not working as expected. Below is the HTML form snippet: <form> <select class="custom-select my ...

javascriptphphtmlsqlmysqli

Restrict the HTML date input to only allow selection of the current date

In my form, I have set an input type date that is restricted to today's date by using the min and max attributes with JavaScript. The issue is that users are still able to manually input a different date instead of selecting it from the calendar popup ...

javascripthtml

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Here is a link to see how my page looks with the header, table, and footer: https://i.sstatic.net/U6tdO.png If you want to see how it looks when responsive (with smaller width), check out this link: https://i.sstatic.net/zsGkc.png I have encountered 2 ma ...

htmlcssangular

Troubleshooting navigation bar problems: dealing with overlapping and padding challenges in

I'm exploring how to create a hover effect with a bottom border that overlaps with the parent div (navbar) bottom border. I've applied margin:0px and padding:0px to the navbar container. I'm unsure how to make the hover bottom border effec ...

htmlcssbootstrap-4frontendpadding

Angular default route with parameters

Is it possible to set a default route with parameters in Angular, such as www.test.com/landing-page?uid=123&mode=front&sid=de8d4 const routes: Routes = [ { path: '', redirectTo: 'landing-page', pathMatch: 'full' }, ...

htmlangulartypescriptangular-materialangular-router

What is the best way to conceal a button while maintaining its position in the layout?

My intention is to place two buttons, Reset Form and Save, next to each other using the following code. I want the Save button to be hidden when the user first lands on the page, but reveal itself as the user progresses through the forms. Even when the S ...

javascriptjqueryhtmlcss

Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

When using Material UI v4.9.12, it is possible to create a customized checkbox with a specific color that remains fixed: const GreenCheckbox = withStyles({ root: { color: green[400], '&$checked': { color: green[600], }, ...

cssreactjsmaterial-ui

Leveraging Enums in Angular 8 HTML template for conditional rendering with *ngIf

Is there a way to implement Enums in an Angular 8 template? component.ts import { Component } from '@angular/core'; import { SomeEnum } from './global'; @Component({ selector: 'my-app', templateUrl: './app.componen ...

htmlangulartypescriptenums

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

javascriptjquerycss

Achieving a child div to occupy the entire available space when the parent is specified as `mx-auto` can be accomplished using Vue and Tailwind CSS

Sorry if this seems like a basic question, I'm still getting the hang of Vue and tailwind. In my parent template, it looks like this: <template> <div class="mx-auto mt-4 max-w-3xl"> <slot></slot> </div> ...

htmlcssvue.jstailwind-css

Unable to access a frame inside an iframe and frameset using JavaScript when both domains are identical

I am attempting to use JavaScript to access an HTML element within a nested frame in an iframe and frameset. The structure of the HTML is as follows: <iframe id="central_iframe" name="central_iframe" (...)> <frameset cols="185, *" border="0" ...

javascripthtmldom

``on click of the back button of the browser, automatically submit the form

I'm facing a specific issue that I need help with. I have created a form with a hidden value, and I want it to be submitted when the user clicks the browser's back button. Although I've managed to control the backspace key, I haven't be ...

javascriptphpjqueryhtmlforms

A specific image is loading after being clicked in a new page

Despite my efforts to search on various platforms, I have not been able to find a comprehensive solution to my query. Scenario: I currently have a webpage containing a div with multiple images. These images load without any issues and are set to open in ...

javascriptjqueryhtmlimage

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

Is there a way to display a pdf from another website without having to redirect to that site? I'm looking for a solution that involves using the URL directly. ...

javascripthtml