Twitter Bootstrap Question posted in

Bootstrap align-items-end but without the columns-Twitter bootstrap

I need to align the elements inside a div to the end. And as I understand from Bootstrap’s documentation, I should use d-flex and align-items-end. When I apply it, it sticks the elements to the bottom, but it also splits them into columns. And I don’t want that.

What do I need to do to fix it?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex align-items-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    To stack elements on top of each other, use flex-column, and for column items to align at bottom, you need to use justify-content-end instead of align-items-end.

    Note, the horizontal misalignment is caused by the different class set on the a/h5/p elements.

    Stack snippet

    .card {
  height: 300px;      /*  just for this demo, so one can see how it aligns 
 */
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex flex-column justify-content-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Another way of doing it is to do this:

    1. Add the classes d-flex flex-column to the card-body div.
    2. Add the mt-auto class (margin-top:auto) to the first item.

    That will now push the first item and everything that follows to the bottom.

    Using this method allows you to have better control of the elements inside. So, if tomorrow you decide that only the last 2 elements should stick to the bottom, you can just move the mt-auto class to the second to last element. So, it gives you a bit more flexibility.

    Here’s a working code snippet (click the “run code snippet” button below to check) and notice that I’ve added min-height: 333px; inline to demonstrate that it works: 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-5">
            <div class="card">
                <div class="card-body text-left d-flex flex-column" style="min-height: 333px;">
                    <a href="#" class="card-link mt-auto">Link</a>
                    <a href="#" class="card-link">Link</a>
                    <h5 class="card-title">Title</h5>
                    <p class="card-text">Text goes here</p>
                    <a href="#" class="btn">Button</a>
                    <a href="#" class="btn">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search