jsPlayer
Reputation: 1245
Bootstrap 4 equal column height - buttons inside not pushing to bottom
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>Upvotes: 0
Views: 115
Answers (2)
Mansour Al-Moukdad
Reputation: 1
As I know, when you use Bootstrap and then change the styling using CSS for main tags(Like h1, h2, div), It's gonna effect all your original styling which coming form bootstrap, one potential solution is to, give every tag a unique id OR class, then change it, the second is, you can use feature to ignore any other conflicts in CSS like :
*{
box-sizing: border-box;
}
you can read about this issues Lagacy CSS Conflicts
Upvotes: 0
Piotr Wicijowski
Reputation: 2115
You can achieve the required effect just by using bootstrap classes.
The required changes are
- Add
h-100class to your cards - Make the cards column flex containers by adding classes
d-flexandflex-column - Add auto bottom margin using class
mb-autoto the text just before the button, so that the button is pushed all the way down of the container
The results is shown in the snippet below:
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 h-100 d-flex flex-column">
<h3 class="">
title 1
</h3>
<hr>
<p class="card-text mb-auto">
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 h-100 d-flex flex-column">
<h3 class="">
title 1
</h3>
<hr>
<p class="card-text mb-auto">
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 h-100 d-flex flex-column">
<h3 class="">
title 1
</h3>
<hr>
<p class="card-text mb-auto">
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>Upvotes: 2
Related Questions
- In bootstrap 3, why isn't button aligning to the bottom of the column as the CSS states?
- Bootstrap Column Same Height with Button
- Bootstrap 4 row with left & right aligned buttons on the bottom of div
- Bootstrap table : input and button don't have the same height in TD
- How to align buttons to bottom of column?
- Align two buttons at the bottom
- Make A Button Stay At The Bottom Of Its Column, Vertical Align Isn't Working
- Make bootstrap vertical buttons fit screen height
- how to stick buttons on the same height bootstrap
- How do I align the button to the bottom of the row/column in bootstrap?