Search code examples
htmlcssalignmentbootstrap-5vertical-alignment

Align div element at the bottom of another div element using Bootstrap 5

I have three cards which can be displayed side by side.

Motivations is, that the orange part with the icon should be always displayed at the bottom, when all are displayed side by side. How can I achieve this?

I expected to achieve this with align-items-end, but it didn't work.

Currently, there may be many of redundant classes used.

The ideal solution would use only Bootstrap classes.

Detailed code below and Fiddle:

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/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>

Solution

  • I updated your markup a bit, and this uses only Bootstrap classes. Here's what I changed:

    1. Remove col-md-6, flex-column and justify-content-center from your main wrapping column. Those are unnecessary. col-sm-6 will work until you get to your lg rule and we don't need this element to display flex-column or justify.. since it isn't a flex element - those classes don't do anything.
    2. Wrap img, p and icon div in a div that is a flex parent. We give it a height of 100% h-100, this is so we can put the icon at the bottom.
    3. Unwrap the img tag, you really don't need that parent container.
    4. Set the icon div classes to w-100 - width 100% and align-self-end which will position it to the bottom of the new wrapping div. This works because the wrapper is set to flex direction row, because d-flex by default is direction row - and align-self positions the cross-axis - in this case the y or vertical.

    EDIT Minor update (doesn't change the solution) - remove the d-flex class from your row element. Bootstrap row classes are already have the display: flex property set

    @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
.coolspan {
  background-color: #a71a0b !important;
  color: #fff !important;
}
    <h2 class="text-center">Title</h2>
<div class="row justify-content-center">
  <div class="m-3 py-3 col-xl-3 col-lg-4 col-sm-6 col-xs-12 border rounded-2 border-dark position-relative">
    <div class="d-flex flex-wrap h-100">

      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">

      <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 class="w-100 align-self-end d-flex justify-content-center coolspan rounded-2 shadow align-items-end">
        <i class="bi bi-person-circle big-icon"></i>
      </div>
    </div>
  </div>
  <div class="m-3 py-3 col-xl-3 col-lg-4 col-sm-6 col-xs-12 border rounded-2 border-dark position-relative">
    <div class="d-flex flex-wrap h-100">

      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">

      <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 class="w-100 align-self-end d-flex justify-content-center coolspan rounded-2 shadow align-items-end">
        <i class="bi bi-person-circle big-icon"></i>
      </div>
    </div>
  </div>
  <div class="m-3 py-3 col-xl-3 col-lg-4 col-sm-6 col-xs-12 border rounded-2 border-dark position-relative">
    <div class="d-flex flex-wrap h-100">

      <img class="img-fluid" src="https://mdbcdn.b-cdn.net/img/new/slides/041.jpg">

      <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
        
        "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 class="w-100 align-self-end d-flex justify-content-center coolspan rounded-2 shadow align-items-end">
        <i class="bi bi-person-circle big-icon"></i>
      </div>
    </div>
  </div>