0

I am making contact pages with Bootstrap 3. Each employee has his own Bootstrap card. Not every person should have contact information on the card. But I would like that the cards align horizontally with each other.

I can do this by setting a margin or padding, but that is not a correct solution as far as I know?

How can I make the cards align with each other?

/* Grid css */

.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 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;
}


/* 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;
}

.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%
  }
  .index-content .card p {
    padding: 0 20px 10px;
    margin: 0;
  }
  /*
        .row [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }
        .row {
            margin-left: -20px;
            margin-right: -20px;
        }
        */
}

@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 10px;
    margin: 0;
  }
  .card-content-textbox {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.7);
    margin: 15px;
    max-width: 300px;
    height: 91%
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</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>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h2>Sale</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h2>Support</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salg</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salg</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salg</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> International export</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
MK-DK
  • 1,075
  • 1
  • 11
  • 27

6 Answers6

2

Min-height is what can help you out here.

.index-content .card {
      min-height: 441px;
      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);
    }

/* Grid css */
    .index-content .card {
      min-height: 441px;
      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 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;
    }
   
    /* 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;
    }
    
    .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% }
       
        .index-content .card p {
            padding: 0 20px 10px;
            margin: 0;
          }
          /*
        .row [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }
        .row {
            margin-left: -20px;
            margin-right: -20px;
        }
        */
    }

    @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 10px;
        margin: 0;
      }
      .card-content-textbox {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.7);
        margin: 15px;
        max-width: 300px;
        height: 91%
      }
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
  <div class="col-sm-12">
   <h2>Sale</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
  </div>
 </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
  <div class="col-sm-12">
   <h2>Support</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
  </div>
 </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> International export</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
justDan
  • 2,302
  • 5
  • 20
  • 29
  • Thank you for the suggestion. I just tried your solution, but can see it is not doing anything? – MK-DK Aug 06 '18 at 13:22
  • Odd. Are you targeting the right css selector? Try out your dev tools too to see if the `min-height` is being applied. – justDan Aug 06 '18 at 13:23
1

/* Grid css */
    .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 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;
    }
   
    /* 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;
    }
    
    .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% }
       
        .index-content .card p {
            padding: 0 20px 10px;
            margin: 0;
          }
          /*
        .row [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }
        .row {
            margin-left: -20px;
            margin-right: -20px;
        }
        */
    }

    @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 10px;
        margin: 0;
      }
      .card-content-textbox {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.7);
        margin: 15px;
        max-width: 300px;
        height: 91%
      }
    }
    
    .card{
      min-height:386px;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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>

</head>
<body>
    
<div class="container-fluid">
    <div class="row">
  <div class="col-sm-12">
   <h2>Sale</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
  </div>
 </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
  <div class="col-sm-12">
   <h2>Support</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
  </div>
 </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> International export</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

adding minimum height to the card class will resolve your problem..

Deepak Verma
  • 617
  • 5
  • 18
1
var minHeight = parseInt(0);
$(".card").each(function(){
  if($(this).outerHeight() > minHeight){
    minHeight = $(this).outerHeight();
  }
});
$('.card').css('height', minHeight);

It works for same height

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
0

Use min-height: 139px; on the card info. Set the max height property to the same value as well if you always want the card info to be that height.

Adam
  • 1,724
  • 13
  • 16
0

You can refer to Card Deck Equal Height - Codeply Demo

Reference: How to make Bootstrap 4 cards the same height in card-columns?

Inizio
  • 2,226
  • 15
  • 18
0

This might help you... I've added min height to the card's text block

    /* Grid css */
        .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 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;
        }
       
        /* 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;
        }
        
        .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%;
        }
        
        /* Added min height */            
        .card > div {min-height:130px;}
  
        /* Set full width on columns */
        @media (max-width: 768px) {
            .img-responsive {
                width: 100%;
            }
            .index-content .card img {
                height: 100% }
           
            .index-content .card p {
                padding: 0 20px 10px;
                margin: 0;
              }
              /*
            .row [class*="col-"] {
                padding-right: 10px;
                padding-left: 10px;
            }
            .row {
                margin-left: -20px;
                margin-right: -20px;
            }
            */
        }

        @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 10px;
            margin: 0;
          }
          .card-content-textbox {
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.7);
            margin: 15px;
            max-width: 300px;
            height: 92%;
          }
        }
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</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>

    </head>
    <body>
        
    <div class="container-fluid">
        <div class="row">
      <div class="col-sm-12">
       <h2>Sale</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
     </div>
        <div class="row">
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
      <div class="col-sm-12">
       <h2>Support</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
     </div>
        <div class="row">
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> International export</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </body>
    </html>
Viira
  • 3,805
  • 3
  • 16
  • 39