all elements with equal height within a flexbox positioned at the bottom

Check out this HTML code snippet I have for constructing a grid using Bootstrap 4:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        Different heights can be achieved here
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        Should always be positioned at the bottom (similar to the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        Different heights can be achieved here
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        Should always be located at the bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        Different heights can be achieved here
        Different heights can be achieved here
        Different heights can be achieved here
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        Should always be placed at the bottom (similar to the fourth date)
      </div>
    </div>
  </div>
  
</div>

I am trying to ensure that the date always appears at the bottom of the second row. For a clearer understanding of the issue, refer to the image:

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

twitter-bootstrapcssflexboxbootstrap-4

Answer №1

It is not possible to align the content evenly in children of separate flexbox parents. However, you can turn the columns into flexbox containers using d-flex and then use mt-auto (margin-top:auto) to move the dates to the bottom of the columns.

        <div class="col-sm-12 col-md-3 d-flex flex-column">
            <div class="row">
                <div class="col-lg-12">
                    Different heights can be achieved here
                </div>
            </div>
            <div class="row mt-auto">
                <div class="col-lg-12 date">
                    date
                </div>
            </div>
        </div>

Demo:

Also see: bootstrap 4 cards - vertical alignment body with variable header line rows

Answer №2

To make the date container stretch to fill the remaining space of the row, use flex:1 and align all content to the bottom with align-items:flex-end :-)

I made a slight adjustment to your example below. You actually don't need an extra .row within the wrapper - the col-lg-12 should suffice to wrap onto the next row.

The added border:white 1px solid; is just for visualization purposes, so feel free to ignore it.

(For optimal viewing of the stacked elements, consider viewing in full screen)!

.wrapper {
  display: flex;
  flex-direction: column;
  background: #1D3159;
  color: white;
}

.date {
  background: #1D3159;
  color: white;
  flex: 1;
  display: flex;
  align-items: flex-end;
  border:white 1px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- just for this example -->

<div class="row">
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible here are different heights possible here are different heights possible here are different heights possible here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </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

Difficulty achieving gradient effect with partial background color change in table-cell

In order to achieve a unique look for this particular design, I am seeking ways to alter the red background color of each cell in varying degrees - such as 100% for the first cell, 100% for the second cell, and 50% for the third cell. Update: After experi ...

htmlcssbackground-colorlinear-gradients

Creating an HTML form that resembles StackOverflow's form

I am having an issue with the behavior of my form when inserting multiple tags. I want it to function like the one on this particular website where a scroll bar appears and a new line is created. Is there a way to keep everything on the same row? Check ou ...

javascriptjqueryhtmlcss

jQuery Accordion not showing up on screen

On my FAQ page, I have integrated a jQuery Accordion with a repeater control nested inside to display various questions and answers. The FAQ page utilizes a master page named LaunchPage.Master. Here is the code for LaunchPage.Master: <html> <he ...

jquerycssasp.netjquery-ui-accordion

Tips for implementing unique fonts on a website

I've noticed that some websites use unique fonts. One font in particular caught my eye - it's called MuseoSlab500Regular. How can I incorporate this font into my styles? Do I need to download the font from a specific source to ensure it display ...

cssfontsfont-facewebfonts

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

When you wish to navigate by scrolling with the middle mouse button instead of using the scroll wheel, simply middle-click and your cursor will change allowing for easy scrolling on web pages. Even though I am utilizing style="cursor: pointer" and @click. ...

javascriptcssvue.jscursorvuetify.js

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

issue with border color staying the same when focusing

I've been struggling with changing the border on focus in my code. Despite trying various methods, nothing seems to be working. Can someone help me figure out what I'm doing wrong? <input type="text" spellcheck="false" data-placement="top" id ...

htmlcss

What are some ways I can ensure my divs are fully responsive on all devices

Why are my three transparent divs in the center of the page not functioning properly when resizing the screen to md, sm, and xs? The one on the left is offset to the left. How can I make them adaptive? They are meant to be centered next to each other, but ...

htmlcsstwitter-bootstrap-4

Tips for highlighting the final word in the headline using an underline

I'm attempting to create a title style similar to what is shown below https://i.sstatic.net/Qao4g.png The issue I'm facing is achieving the underline effect. I tried using title:after but it didn't give me the exact result I'm looking ...

htmlcssbootstrap-4

Unique Text: "Personalized marker/pin for interactive map feature"

Looking to create a custom image map marker/pin with a unique bottom design resembling a union shape using CSS and Vue.js. I've attempted it myself but haven't been able to achieve the exact look as shown in the reference image. Any advice or ass ...

javascripthtmlcssvue.jsgoogle-maps-markers

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

htmlcss

Change the order of the div to be placed before the previous element

In this scenario, the third div is positioned to the right of the second div rather than the first div. There is space available to the right of the first div, but it is constrained from appearing above the second div. How can I adjust the placement of th ...

htmlcss

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

javascriptjquerycss

Creating visually stunning full-width sections with graphic backgrounds using Bootstrap

Trying to bring a unique design concept to life, courtesy of my talented graphic designer. However, this sleek look is proving to be quite the challenge as I navigate through bootstrap implementation. We are focusing on a call to action section that perfe ...

htmlcsstwitter-bootstrap

Creating this design using only HTML and CSS is possible by following these steps

I attempted to create this design using only HTML and CSS but unfortunately couldn't achieve it. Can anyone provide me with some assistance? Thank you in advance Check out the image on imgur.com ...

htmlcss

Fluidly Floating and Steadfastly Sized Element

Creating a 4-column Panel Bar Layout with Specific Conditions: #c1, #c2 = fixed width #c3 autofill with remaining width #c4 auto width (adjusts based on content) corresponding to #c3 Requirements: Float #c4 to the right instead of absolute positionin ...

htmlcsscss-floatfixed-widthvariable-width

Close BS4 accordion when clicking outside the card-body

Is there a way to collapse or close an accordion in Bootstrap 4 when clicking outside the card-body? Previously in Bootstrap 3, this functionality was straightforward and functional as shown here. The accordion should not close when clicking inside the car ...

jquerybootstrap-4accordion

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

javascriptjquerycss

Failed CSS login form

Take a look at my login-form (here). I am having an issue where the Text-Field is not aligning properly with the login field - it seems to be shifted 10px to the left and right (margin). Can anyone point out what mistake I might have made? Your help would ...

cssformsauthentication

How can you align two div elements side by side, if the first div is spanning across two lines?

I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed. <div id="wrapper"> ...

htmlcss