I've got two bootstrap columns, one containing text and the other containing an image.
Firstly, I want to vertically center both columns in the row.
Secondly, If the image height is less than the text height or vice-versa, I want the one with the smaller height to be vertically in the middle of its column.
#welcome-section {
padding: 80px 60px;
}
#welcome-section .column {
height: 100%;
}
#welcome-section .column .welcome-content,
#welcome-section .column img {
width: 100%;
height: auto;
}
#welcome-section .column img {
-webkit-box-shadow: 4px 4px 10px #000;
box-shadow: 4px 4px 10px #000;
}
#welcome-section .column .welcome-content .welcome-txt {
color: #102542;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 2px;
}
#welcome-section .column .welcome-content .subhead {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 1px;
}
#welcome-section .column .welcome-content p {
font-size: 1.1rem;
letter-spacing: 1px;
margin-bottom: 10px;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<section id="welcome-section">
<div class="container">
<div class="row">
<div class="column col-lg-6 col-md-12">
<div class="welcome-content">
<p class="welcome-txt">Welcome</p>
<h1 class="my-4">A New Vision of Luxury</h1>
<p class="subhead my-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
<span>- John Doe, Manager</span>
</div>
</div>
<div class="column col-lg-6 col-md-12">
<img src="https://images.pexels.com/photos/221457/pexels-photo-221457.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</div>
</div>
</div>
</section>
</body>
</html>
