0

I have a deck of cards in my Bootstrap 4 page. I want to align these button to have a nicer look. How can we do that?

Here is an image: Screenshot

And here is the demo : http://7freres.com/new

The table dosen't seem to works, as they are separated.

Thanls

danopz
  • 3,310
  • 5
  • 31
  • 42
Félix Desjardins
  • 3,223
  • 3
  • 21
  • 36
  • 2
    _"...have a nicer look"_ is very vague. What _exactly_ are you trying to achieve? – Turnip Dec 06 '15 at 23:11
  • @SexyTurnip I want the button to be aligned, on mobile and desktop. – Félix Desjardins Dec 06 '15 at 23:12
  • 1
    Greetings from the future. Since an external link was used to reference the original code, and the link is now 404, this question is useless. This is why code should always be posted in the question. – Carol Skelly Apr 09 '18 at 11:51

2 Answers2

4

You can make all the card-text elements to have the same height. One way to do it can be through javascript. Write a function like this:

document.addEventListener("DOMContentLoaded", function(event) { 
    adjustCardTextHeights();
});

function adjustCardTextHeights() {
    var heights = $(".card-text").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".card-text").height(maxHeight);
}

Or with jQuery:

$( document ).ready(function() {
    adjustCardTextHeights();
});

function adjustCardTextHeights() {
    var heights = $(".card-text").map(function() {
        return $(this).height();
    }).get();

    maxHeight = Math.max.apply(null, heights);

    $(".card-text").height(maxHeight);
}

This gets you: enter image description here

jianweichuah
  • 1,417
  • 1
  • 11
  • 22
  • I have added `window.onload = function() { function adjustCardTextHeights() { var heights = $(".card-text").map(function() { return $(this).height(); }).get(); maxHeight = Math.max.apply(null, heights); $(".card-text").height(maxHeight); }; };` and it'S dosent work. How do you have done this? – Félix Desjardins Dec 06 '15 at 23:16
  • Then you should also call the function with `adjustCardTextHeights ()` in onload. Or you can just get rid of the function and just have the content in the onload function. – jianweichuah Dec 06 '15 at 23:18
0

You could set position: absolute; bottom: 20px; for the buttons and add an extra padding-bottom: 50px; to the card-block

Khalid T.
  • 10,039
  • 5
  • 45
  • 53