I have created a layout using the following HTML and CSS:
<div class="container-fluid header">
<div class="row text-center">
<div class="col-md-6 red">
<h1>First</h1>
</div>
<div class="col-md-6 red">
<h1>Second</h1>
</div>
</div>
</div>
CSS
.header {
background-color: blue;
}
.col-md-6 {
min-height: 300px;
}
.red {
border:2px solid red;
}
I have set the minimum height on col-md-6 to create extra space. I have also used text-center on the row to center the text horizontally. However, I am struggling to vertically center the content of the columns.
I have attempted the following:
<div class="container-fluid header">
<div class="row text-center d-flex align-content-center">
<div class="col-md-6 red align-self-center">
<h1>First</h1>
</div>
<div class="col-md-6 red align-self-center">
<h1>Second</h1>
</div>
</div>
</div>
Unfortunately, this approach did not work for me.