Equal Height Columns and Vertical Align Image in Column

Equal height columns + vertical and horizontal centered content in Bootstrap 4

Center the content p inside the column...

https://codeply.com/go/lyPAOH1Tq2

<div class="row">
    <div class="col-lg-4 d-flex">
        <p class="my-auto">Text here should be centered both horizontally and vertically. But this col should have the same height as the col containing the image.</p>
    </div>
    <div class="col-lg-8">
        <img class="img-fluid" src="http://via.placeholder.com/1920x1080">
    </div>
</div>

CSS vertical align with different image heights

These codes will guide you. and for bottom section can use flex too (width=50%) there is no need for float left.

.main-wrapper {
  border: 1px solid red;
  width: 75%;
  margin: 0 auto 0 auto;
}

.main-wrapper .p-c-top {
  display: flex;
  width: 100%;
}

.main-wrapper .p-c-top .content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  width: 33.333%;
}

.main-wrapper .p-c-top .content-col img {
  width: 100%;
}

 <div class="main-wrapper">
        <div class="p-c-top">
            <div class="content-col">
                <img src="https://ir-uk.amazon-adsystem.com/e/ir?t=lawncarepro-21&language=en_GB&l=li2&o=2&a=B0099LETKS" alt="Sample Image">
            </div>
            <div class="content-col">
               <h4>overal value</h4>
               <p>stars</p>
            </div>
            <div class="content-col">
               <h4>price</h4>
               <p><a href="#">check on amazon</a></p>
            </div>
        </div>
        <div class="p-c-bot"></div>
    </div>

Bootstrap 4 columns center vertically and keeping same height

You can do this:

Remove align-items-center class from your row element
Add align-items-center and d-flex classes to each of your .why-choose-warranty .row div or add this to the style:
```
display: flex;
align-items: center;
```

See demo below:

.why-choose-warranty {  width: 100%;  height: 100%;  background-color: #f5f3ef;  color: #11155e;  padding: 1rem;}
.why-choose-warranty .row {  padding: 1rem;}
.why-choose-warranty .row div {  display: flex;  align-items: center;  justify-content: center;}

/* Small screens (mobiles) */
@media screen and (max-width: 992px) {  .why-choose-warranty .row {    background-color: white;    border-radius: .5rem;  }  .why-choose-warranty img {    max-width: 40%;    max-height: 40%;  }  .why-choose-warranty .row div:nth-child(1),  .why-choose-warranty .row div:nth-child(2) {    border-right: 1px solid #d7d5d1;    border-bottom: 1px solid #d7d5d1;  }  .why-choose-warranty .row div:nth-child(3) {    border-bottom: 1px solid #d7d5d1;  }  .why-choose-warranty .row div:nth-child(4),  .why-choose-warranty .row div:nth-child(5) {    border-right: 1px solid #d7d5d1;  }}

/* Big screens (desktops) */
@media screen and (min-width: 992px) {  .why-choose-warranty img {    max-width: 60%;    max-height: 60%;  }  .why-choose-warranty .row div {    border-right: 1px solid #d7d5d1;  }  .why-choose-warranty .row div:last-child {    border-right: 0;  }}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="why-choose-warranty">  <div class="row col-12 col-lg-10 m-auto">    <div class="col-4 col-lg-2">      <p class="text-center font-weight-bold">Test</p>    </div>    <div class="col-4 col-lg-2">      <p class="text-center font-weight-bold">Test<br /><br />Test TEST</p>    </div>    <div class="col-4 col-lg-2">      <p class="text-center font-weight-bold">TEST TEST</p>    </div>    <div class="col-4 col-lg-2">      <p class="text-center font-weight-bold">TEST</p>    </div>    <div class="col-4 col-lg-2">      <p class="text-center font-weight-bold">TEST <br /><br /><br /><br /><br />TEST</p>    </div>    <div class="col-4 col-lg-2">      <p class="text-center font-weight-bold">TEST</p>    </div>  </div></div>

Equal height columns and align last item to bottom

ul.list-container {  display: inline-flex;  justify-content: space-between;  list-style: none;  margin: 0;  padding: 0;  text-align: center;}ul.list-container > li {  display: flex;             /* new; nested flex container */  flex-direction: column;    /* new; stack flex items vertically */  flex-grow: 1;  min-width: 200px;  background-color: #e3e3e3;  /* height: 100%;           <-- remove to enable equal height columns; see reference #1 */  width: 100%;  border: 1px solid red;}ul.list-container > li > .pus-me-to-the-bottom {  margin-top: auto;          /* new; see reference #2 */  color: red;  /* margin-top: 10px;       <-- remove */  border: 1px solid black;}

<ul class="list-container">  <li>    <div class="title">title</div>    <div class="pus-me-to-the-bottom">title</div>  </li>  <li>    <div class="title">      Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>    <div class="pus-me-to-the-bottom">title</div>  </li>  <li>    <div class="title">title</div>    <div class="pus-me-to-the-bottom">title</div>  </li>  <li>    <div class="title">title</div>    <div class="pus-me-to-the-bottom">title</div>  </li></ul>

Bootstrap 4 - equal col height when using align-items-center

The problem is you want to center align the content of the column, not the column itself. You can make the blue-col a flexbox column (d-flex flex-column) and then use justify-content-center to align its' contents...

<div class="container">
    <div class="row yellow-row">
        <div class="col-lg-7 blue-col text-center d-flex flex-column justify-content-center">
            <h1>Testing</h1>
            <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
                    quasi</p>
        </div>
        <div class="col-lg-5 text-center">
            <h1>Only a test</h1>
            <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
            <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/kSvLCODvZC

Related: Equal height columns + vertical and horizontal centered content in Bootstrap 4