Set Bootstrap 3 buttons to have same position in cards
Multi tool use
Clash Royale CLAN TAG#URR8PPPSet Bootstrap 3 buttons to have same position in cards
I am trying to align the Bootstrap 3 buttons on a horiziontal line like the below picture. Here is my demosite until now. I can align the buttons with setting a margin, but then it seems to be a puzzle to look good on all viewports.
Is there a smart way to align the buttons?
I have tried to delete so much code there is not relevant for the question. Therefore some css classes are not used in the below code:
/* Track and trace */
.bs-calltoaction{
position: relative;
width:auto;
padding: 15px 25px;
border: 1px solid black;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.bs-calltoaction > .row{
display:table;
width: calc(100% + 30px);
}
.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
float:none;
display:table-cell;
vertical-align:middle;
}
.cta-contents{
padding-top: 10px;
padding-bottom: 10px;
}
.cta-title{
margin: 0 auto 15px;
padding: 0;
}
.cta-desc{
padding: 0;
}
.cta-desc p:last-child{
margin-bottom: 0;
}
.cta-button{
padding-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 991px){
.bs-calltoaction > .row{
display:block;
width: auto;
}
.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
float:none;
display:block;
vertical-align:middle;
position: relative;
}
.cta-contents{
text-align: center;
}
}
.bs-calltoaction.bs-calltoaction-info{
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.bs-calltoaction.bs-calltoaction-info .cta-button .btn {
border-color:#fff;
}
.abc {
position: relative;
}
.def {
position: absolute;
top: 10px;
right: 20px;
max-width: 300px;
}
@media screen and (max-width: 480px) {
.def {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
width: 95%;
height: 85%;
}
.panel.panel-default .panel-heading {
padding: 5px 15px;
}
.panel.panel-default .panel-body {
padding: 5px;
}
}
/* Grid css */
p.bottom-column-color {
font-size: 0.82em;
color: green;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .cta {
width: 235px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .cta:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
}
@media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
.bottom-left {
position: static;
margin-left: 15px;
margin-bottom: 15px;
bottom: 8px;
left: 16px;
}
@media (max-width: 993px) {
.def {
position: relative;
top: auto;
right: auto;
}
}
@media (max-width: 480px){
.def {
position: relative;
top: 170px;
right: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kontakt Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End Trustbox script -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div>
<h4>Headline 1</h4>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<button type="button" class="btn btn-success bottom-left">See offer here</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div >
<h4>Headline 2</h4>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<button type="button" class="btn btn-success bottom-left">Read more</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div >
<h4>Headline 3</h4>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Consectetur adipiscing elit, sed do eiusmod tempor</p>
<button type="button" class="btn btn-success bottom-left">Read more</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div >
<h4>Headline 4</h4>
<p class="bottom-column-color">Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<button type="button" class="btn btn-success bottom-left">Read more</button>
</div>
</div>
</div>
</div>
</div>
</div>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
