A header is designed with two columns: the first column contains the logo, while the second column holds a centered heading. Below that, the main content also features a centered heading. The challenge is to align the header heading to the center of the main parent container similar to the heading in the main content section. The layout utilizes Bootstrap 4.6.
For visual clarification, refer to the following diagram: https://i.sstatic.net/pLmxe.png
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
min-height: 100%;
}
.row-color {
background-color: #DCE6F2;
}
.logo-width img{
width: 220px;
height: 210px;
}
.column-width img {
width: 120px;
height: 115px;
}
#page-container {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
background-color: #024393;
color: #fff;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b4aeb6aeb0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<div id="page-container" class="container-fluid">
<div class="row row-color align-items-center text-center p-5">
<div class="col-2 logo-width text-center">
<img src="img/shelter_logo.svg" alt="Logo Here">
</div>
<div class="col">
<div class="center">
<h2>Heading</h2>
<p>text</p>
<h2>Heading</h2>
<p>Text</p>
</div>
</div>
</div><!-- end row -->
<div class="row my-5">
<div class="col text-center">
<h2>Heading</h2>
</div>
</div>
<div class="row justify-content-around">
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
<h3>Heading</h3>
</div>
</div>
<footer class="d-flex justify-content-center mt-auto">
<div class="row justify-content-around p-3">
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
<div class="col text-center">
<img src="#g" alt="">
</div>
<div class="col text-center">
<h3>Heading</h3>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545312b332b35">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>Take a look at this codepen for a live demo: https://codepen.io/west4me/pen/vYywWVX