Search code examples
bootstrap-4

bootstrap 4 - equal height columns - align button bottom


OK, known problem - bootstrap equal height columns. I have a row with 3 cols, within the cols there is a div with "h-100" to make the cols equal height an a "border", so the lines are inside the cols an there is a optical gap between the cols. Then there is the content (image, headline, text) and a button. This button should always be placed at the bottom of the column.

I found a solution with position absolute, but i think this is not the optimal solution. I try to solve this with the flexbox, but but find no working way. Maybe someone knows how to do this in a proper way with "align-end".

THX for any idea.

Demo: jsfiddle

p.btn-bottom {
  position: absolute;
  bottom:0;
  margin: 0 auto;
  width:100%;
}
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div class="container-fluid p-5">
  <div class="row"> 
    <div class="col-sm-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2>Normal Text col-1</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div> 
    <div class="col-sm-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2> Less Text col-2</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>  
    <div class="col-sm-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2>More text col-3</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>      
  </div>
</div>
<<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>


Solution

  • check below code. I used flex column class to align items vertically & then add mt-auto class in button area which fill blank space and stick button to bottom.

    <html>
    <head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
    </head>
    
    <body>
    <div class="container-fluid p-5">
      <div class="row"> 
        <div class="col-sm-4 text-center">
          <div class="border h-100 d-flex flex-column">
            <img src="https://via.placeholder.com/150">
            <h2>Normal Text col-1</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
          </div>
        </div> 
        <div class="col-sm-4 text-center">
          <div class="border h-100 d-flex flex-column">
            <img src="https://via.placeholder.com/150">
            <h2> Less Text col-2</h2>
            <p>Lorem ipsum dolor sit amet.</p>
            <p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
          </div>
        </div>  
        <div class="col-sm-4 text-center">
          <div class="border h-100 d-flex flex-column">
            <img src="https://via.placeholder.com/150">
            <h2>More text col-3</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
          </div>
        </div>      
      </div>
    </div>
    <<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
    </html>