make bootstrap card same height

bootstrap 3 cards same height
bootstrap 4 card image same height
bootstrap 3.3.7 cards
bootstrap cards same width
make two divs side by side same height bootstrap
bootstrap 4 equal height
bootstrap 4 card examples
bootstrap 4 cards with different height

I am making contact pages with Bootstrap 3, where the different employees are represented:

See demo site here

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>

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>

Codeply HTML CSS JavaScript Editor, Bootstrap 4 Equal Height Cards using Grid. Card. I'm just a simple card-block. Danger rgdfgsdfgdgfsdgfsfdgsdfgsdgsdfgsdgsdfgsdfgsdfgsdfgsdfgsdgdfg. With  The nature of flexbox is to make all div containers within a display:flex; container the same height. However, using it with bootstrap might be problematic (to be honest, I’ve never tried), but I did find this: Flex for bootstrap.


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

Different Tricks on How to Make Bootstrap Columns All the Same , Bootstrap 4 also introduced a concept called "Cards". there's many options to match height on columns. I'm trying to order cards in a grid with the same height and width. These cards will have different content with different sizes. They should also go by 3 in each row. It is OK for each row to have different height, but the height should be the same within the row. The width of each card should be the same for the whole grid.


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>

Bootstrap 4 - Equal Height Cards, <h5>Bootstrap 4 Equal Height Cards using Grid and Flexbox Utilities</h5>. 3. <​div class="row equal">. 4. <div class="col-sm-4 d-flex pb-3">. 5. <div class="card​  So here is my code, it displays 6 cards, three across and two rows. I would like for the images to all be the same size without having to manually resize the images. The responsiveness does work, I use "img-fluid" as a class and when I go to a mobile or smaller browser, they all have the same width, but the height is still off.


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.

Cards · Bootstrap, Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list  Make Bootstrap Columns All the Same Height: Make the row think it's a table A Pen by ncerminara Run Pen You'll have to adjust this a bit based on what size column you're using. So it would actually makes sense to create multiple utility classes: is-xs-table-row, is-sm-table-row, is-md-table-row,


You can refer to Card Deck Equal Height - Codeply Demo

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

How to make Bootstrap 4 cards have the same height in a single row , Use attributes like align-items and justify-content to keep them at equal height. In order to do that, you need to create a parent container which you  A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc. Some example text some example text.


Bootstrap Card Component: a Complete Introduction, you can easily and quickly build a responsive layout by having only some Controlling Bootstrap Card Component Width and Height In the same way, we can add navigation pills by simply replacing .nav-tabs with nav-pills  Learn how to create equal height columns with CSS. When you have columns that should appear side by side, you'll often want them to be of equal height (matching the height of the tallest). The columns we made in the previous example are responsive (if you resize the browser window in the try it example, you will see that they automatically


Card height : bootstrap, How can i get a row of 6 cards, to have the same height, no matter what MY QUESTION IS: Should I build what I need using the Bootstrap  Hi, how would one adjust the cards to the same height and move footers to bottom in the following case: Demo cards. Just point me to the link in the manual where you explain it.


Container to create a grid of Bootstrap 4 cards of equal height and , Set a container of cards, using the card-deck class.Work it inside the following div that would be of equal width and height: Bootstrap Equal Height Columns. The goal is to make each column same height as the adjacent columns. (such as cards), there is no easy way to make the child block 100% height of the column.