2

I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).

current view

Relevant HTML (for full code view CodePen):

<div class="row portfolio">

      <div class="col-sm-12">
        <h2>Portfolio</h2>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body d-flex flex-column">
            <h4 class="card-title">Project One</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
            <a href="#" class="card-link text-info mt-auto">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Two</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Three</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Four</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Five</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 portfolio-item">
        <div class="card h-100">
          <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
          <div class="card-body">
            <h4 class="card-title">Project Six</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
            <a href="#" class="card-link text-info">View CodePen</a>
          </div>
        </div>
      </div>

    </div>
nCardot
  • 5,992
  • 6
  • 47
  • 83
  • It'll be easier if those boxes are of a fixed size, at least in terms of height, but it's not clear from your code if they are. Is `h-100` a height directive? – tadman Apr 20 '18 at 06:17
  • I don't see those classes added to `.card-body` or the link in your codepen. If you add the rules in the inspector it works as you want – sol Apr 20 '18 at 06:19
  • If those boxes are a fixed size, then give the box a position of relative, and give the links a position of absolute and bottom however many pixels up from the bottom.. then on the text you can have set height and have the overflow set to ellipses – Smokey Dawson Apr 20 '18 at 06:20
  • @tadman yes--h-100 means height 100% https://getbootstrap.com/docs/4.0/utilities/sizing/ – nCardot Apr 20 '18 at 06:20
  • You may need to specify a fixed height for the inner box, as once you do that there's a fixed offset from the top for the labels and everything's much easier. If that height flexes it could get a bit tricky. – tadman Apr 20 '18 at 06:23
  • You can do this without adding any CSS. Just you need change the anchor "" link position. @ https://codepen.io/syedrafeeq/pen/vjOLBG – Sayed Rafeeq Apr 20 '18 at 06:37
  • what if we can't change the HTML @SayedRafeeq – Zuber Apr 20 '18 at 06:59
  • if this or any answer has solved your question please consider accepting it by clicking the check-mark and upvote. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this :) – patelarpan Apr 25 '18 at 02:35

3 Answers3

3

The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!

Note: You can find this example also on the official documentation of Bootstrap 4.

To center the links you can use the text-center class on the card-link.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row portfolio">
  <div class="col-sm-12">
    <h2>Portfolio</h2>
  </div>
  <div class="col-lg-4 col-sm-6 portfolio-item">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body d-flex flex-column">
        <h4 class="card-title">Project One</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
        <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 portfolio-item">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body d-flex flex-column">
        <h4 class="card-title">Project Two</h4>
        <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 portfolio-item">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body d-flex flex-column">
        <h4 class="card-title">Project Three</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
        <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 portfolio-item">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body d-flex flex-column">
        <h4 class="card-title">Project Four</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 portfolio-item">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body d-flex flex-column">
        <h4 class="card-title">Project Five</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 portfolio-item">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
      <div class="card-body d-flex flex-column">
        <h4 class="card-title">Project Six</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
        <a href="#" class="card-link text-info mt-auto text-center">View CodePen</a>
      </div>
    </div>
  </div>
</div>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
1

Add this css, it will work 

.card-body {
  display: flex;
  flex-direction: column;
}
.card-link {
   margin-top: auto;
}

codepen link

patelarpan
  • 7,188
  • 2
  • 20
  • 25
0

An alternative solution

You can align the link at the bottom of the card-body by following these three steps:

  1. Apply the d-flex and flex-column classes to card-body
  2. Wrap all the content of card-body in a div.
  3. Use flex: 1 1 auto on this new div

Doing so, the newly created div always takes all the available space. Hence, the link is always at the bottom of the card-body.

.flex-grow {
  flex: 1 1 auto;
}
<div class="card-body d-flex flex-column">
  <div class="flex-grow">
    <h4 class="card-title">Project One</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
  </div>
  <a href="#" class="card-link text-info mt-auto">View CodePen</a>
</div>

Check this pen on CodePen

FYI, You can make an element occupy all the available space using this method.

mahan
  • 12,366
  • 5
  • 48
  • 83