so i am using bootstrap 4 class 'h-100' to make all 3 column equal height so when data inside gets larger for one div all 3 div matched the height. but the buttons i had initially set to the bottom of each div now not aligning to the bottom. how can i have the buttons aligned to the bottom and have equal column height
before h-100
after h-100
my code
h1, h2, h3, h4, h5, h6 {
font-family: 'Teko', sans-serif;
}
html {
font-size: 18px;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Teko', sans-serif;
}
.threecol-teaser-cardWrap .threecol-teaser-card a {
text-decoration: none;
color: #000;
}
.threecol-teaser-cardWrap .threecol-teaser-card h3 {
padding: 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card p.card-text {
padding: 1.953rem 1.953rem 0.953rem 1.953rem;
}
.threecol-teaser-cardWrap .threecol-teaser-card hr {
border: 0;
border-top: 1px solid #d4272e;
width: 30%;
margin: 0;
transition: width 250ms ease-in-out 0s;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover hr {
width: 100%;
-webkit-transition: ease-out 0.2s;
-moz-transition: ease-out 0.2s;
transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText {
width: 100%;
text-align: left;
border-radius: 0px;
padding: 0.953rem 1.953rem 1.563rem 1.953rem;
color: #d4272e;
box-shadow: inset 0 0 0 0 #d4272e;
-webkit-transition: ease-out 0.2s;
-moz-transition: ease-out 0.2s;
transition: ease-out 0.2s;
}
.threecol-teaser-cardWrap .threecol-teaser-card .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
position: relative;
top: 4px;
display: inline-block;
padding-right: 1rem;
padding-left: 0.5rem;
font-family: Ionicons, sans-serif;
font-size: 150%;
transition: transform 300ms ease-in-out 0s;
transform: translateX(8px) translateY(0px) translateZ() scaleX(1.25) scaleY(1.25) scaleZ(1);
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText {
box-shadow: inset 0 100px 0 0 #d4272e;
color: #fff;
background-color: #d4272e;
}
.threecol-teaser-cardWrap .threecol-teaser-card:hover .threecol-teaser-bottomText .ion-ios-arrow-thin-right {
transition: transform 300ms ease-in-out 0s;
transform: translateX(8px) translateY(0px) translateZ(0px) scaleX(1.25) scaleY(1.25) scaleZ(1);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> -->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style/index.css">
</head>
<body>
<section class="threecol-teaser-cardWrap py-10">
<div class="container">
<div class=" mb-8">
<div class="text-left mb-8">
<h2>
Title
</h2>
</div>
<div class="Benefits-Card">
<div class="row">
<div class="threecol-teaser-card col-lg-4 mb-6">
<a href="">
<div class="border border-primary ">
<h3 class="">
title 1
</h3>
<hr>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
magni? Suscipit, labore repellat quos animi minus soluta?
</p>
<div class="threecol-teaser-bottomText ">
button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
<div class="threecol-teaser-card col-lg-4 mb-6">
<a href="">
<div class="border border-primary ">
<h3 class="">
title 1
</h3>
<hr>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
magni? Suscipit, labore repellat quos animi minus soluta?
rum pariatur nulla sapiente sit animi ut
magni? Suscipit, labore repellat quos animi minus soluta?
</p>
<div class="threecol-teaser-bottomText">
button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
<div class="threecol-teaser-card col-lg-4 mb-6">
<a href="">
<div class="border border-primary ">
<h3 class="">
title 1
</h3>
<hr>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
magni? Suscipit, labore repellat quos animi minus soluta?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum facilis
libero, aperiam fuga accusamus eos harum pariatur nulla sapiente sit animi ut
magni? Suscipit, labore repellat quos animi minus soluta?
</p>
<div class="threecol-teaser-bottomText">
button 1 <i class="ion-ios-arrow-thin-right" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
</body>
</html>
