Bootstrap 4 Buttons on the bottom of Cards regardless of height

Navigation
1

I have the following code: 

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <div class="container">
  <div class="card-deck">
    <div class="card">
      <img class="card-img-top" src="http://lorempixel.com/230/180" alt="Card image cap" style="margin:0.4rem;">

      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         <a href="#" class="mx-auto btn-block btn btn-outline-info">Go somewhere</a>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="http://lorempixel.com/150/180" alt="Card image cap" style="margin:0.4rem;">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        <a href="#" class="mx-auto btn-block btn btn-outline-secondary">Go somewhere</a>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="http://lorempixel.com/150/180" alt="Card image cap" style="margin:0.4rem;">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="http://lorempixel.com/230/180" alt="Card image cap" style="margin:0.4rem;">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>

On the first two cards I have buttons, however I would like them to be at the bottom at the same level regardless of the size of the Card, can it be done with any kind of bootstrap? Or should we do it with an additional CSS?

    
asked by Andress Blend 13.06.2017 в 21:30
source

3 answers

1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <div class="container">
  <div class="card-deck">
    <div class="card">
      <img class="card-img-top" src="http://lorempixel.com/230/180" alt="Card image cap" style="margin:0.4rem;">

      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        <div style="position: absolute; bottom: 15px;">
         <a href="#" class="btn btn-outline-info col-xs-3">#1</a>
         <a href="#" class="btn btn-outline-success col-xs-3">#2</a>
         <a href="#" class="btn btn-outline-danger col-xs-3">#3</a>
         <a href="#" class="btn btn-outline-default col-xs-3">#4</a>
         </div>
      </div>
    </div>
    
    </div>
  </div>
    
answered by 13.06.2017 в 22:57
1

For that you must use the footer of the cards as I show you in the following: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
    <div class="card-deck">
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/230/180" alt="Card image cap" style="margin:0.4rem;">

            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                
            </div>
            <div class="card-footer">
                <a href="#" class="mx-auto btn-block btn btn-outline-info f">Go somewhere</a>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/150/180" alt="Card image cap" style="margin:0.4rem;">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
            <div class="card-footer">
                <a href="#" class="mx-auto btn-block btn btn-outline-secondary">Go somewhere</a>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/150/180" alt="Card image cap" style="margin:0.4rem;">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top" src="http://lorempixel.com/230/180" alt="Card image cap" style="margin:0.4rem;">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>
    
answered by 28.02.2018 в 19:21
-1

An easy way out is to use a <br> , so that the text is at the same height.

Do not get complicated.

    
answered by 01.04.2018 в 22:53
Python command not found in Windows 10 with the subtyme of linux Positioning of boostrap panels