0

I have the problem that the buttons as seen in the picture below are not aligned. I have tried the solution posteted in different StackOverlow Questions First Solution;Second Solution; Third Solution. None of them work for me. There is no additional css code effection the cards or elements.

Cards

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.cont2 {
overflow:hidden;

}
.cont2:hover .image2 {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;

-webkit-transform:scale(1);
transform:scale(1);
}
</style>

<div class="container-fluid">
  <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 ">
<div class="card card h-100" style="width: 100%; border-width: 2px; border-color: darkgray; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 0">
  <div class="h-100 cont2">
   <div class="cont2 card-img-top">
<img class="image2 card-img-top" src="http://via.placeholder.com/1365x768">
</div>

  <div class="card-body d-flex flex-column">
    <h5 class="card-title">Second</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, quod, deserunt. Libero suscipit ipsam rerum!</p>
    <a href="more.html" class="btn btn-primary mt-auto btn-block homecardbutton " style="background-color:#8e44ad; border-width:0px">Read More</a>
  </div>
</div>
</div>
</div>

        <div class="col-lg-3 col-md-3 col-sm-6">
<div class="card card h-100" style="width: 100%; border-width: 2px; border-color: darkgray; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
  <div class="h-100 cont2">
   <div class="cont2 card-img-top">
<img class="image2 card-img-top" src="http://via.placeholder.com/1365x768">
</div>

  <div class="card-body d-flex flex-column">
    <h5 class="card-title">First card</h5>
    <p class="card-text">Lorem ipsum dolor adipisicing elit. Natus est iusto aperiam nesciunt, fugit asperiores a recusandae, cum officiis optio repellat quos. Doloremque deleniti ducimus id reiciendis explicabo vel eum.</p>
    <a href="moremore.html" class="btn btn-primary mt-auto btn-block" style="background-color:#8e44ad; border-width:0px">Read More</a>
  </div>
</div>
</div>
</div>
    



</div>
</div>

PS: Sorry for my bad english

Mr_Grennn7
  • 109
  • 1
  • 12
  • 1
    I tried this sollution as well. But it did not work. – Mr_Grennn7 May 31 '18 at 15:53
  • You can also use `card-footer` with a few utility classes to remove its default styling: https://www.bootply.com/eKJcyjWkUo – Robert May 31 '18 at 16:13
  • The code needs to be cleaned-up, and take a few minutes to understand how the other answers work. The dup answer applied to your code works as expected: https://www.codeply.com/go/jp9FPuWGam – Carol Skelly May 31 '18 at 17:06

0 Answers0