How to add close icon to bootstrap 5 mobile menu? - html

I am new to web development, I am trying to make responsive/ mobile menu with a close icon, How to show/ add close icon for bootstrap 5 mobile menu? I explored and tried a lot but unfortunately, was not able to achieve that.
Any help will be appreciated.
Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
</body>
</html>
I am using Bootstrap 5 cdn
default classes of bootstrap 5


Try that, Note using jQuery library for javascript part and also adding bootstrap icons library, study the changes I made so that you could use the same icon methods around the script to improve:
$( document ).ready(function() {
$('.navbar-toggler').click(function(){
if($('.navbar-toggler').hasClass('collapsed')){
$('.navbar-toggler .bi').removeClass('bi-x');
$('.navbar-toggler .bi').addClass('bi-list');
}else{
$('.navbar-toggler .bi').removeClass('bi-list');
$('.navbar-toggler .bi').addClass('bi-x');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="bi bi-list"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Related

Why does the HTML file render differently through Django and when opened directly?

When I run the below HTML file via Django's render function, I get the following result: Django result
However, when I open the HTML file directly by clicking on it, I get the following result: HTML result
Why do they render so differently? How should I modify the code such that when I render the HTML file through Django, I can obtain the same result as when I open the HTML file directly?`
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.82.0">
<title>Headers · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/headers/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/5.0/examples/headers/headers.css" rel="stylesheet"/>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bootstrap" viewBox="0 0 118 94">
<title>Bootstrap</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
</symbol>
<symbol id="home" viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"></path>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"></path>
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"></path>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"></path>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"></path>
</symbol>
</svg>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Simple header</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
</header>
</div>
<div class="b-example-divider"></div>
<div class="container">
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
</header>
</div>
<div class="b-example-divider"></div>
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="col-md-3 text-end">
<button type="button" class="btn btn-outline-primary me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</header>
</div>
<div class="b-example-divider"></div>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control form-control-dark" placeholder="Search...">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="b-example-divider"></div>
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Overview</li>
<li>Inventory</li>
<li>Customers</li>
<li>Products</li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
<input type="search" class="form-control" placeholder="Search...">
</form>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="b-example-divider"></div>
<header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
<li><a class="dropdown-item active" href="#">Overview</a></li>
<li><a class="dropdown-item" href="#">Inventory</a></li>
<li><a class="dropdown-item" href="#">Customers</a></li>
<li><a class="dropdown-item" href="#">Products</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Reports</a></li>
<li><a class="dropdown-item" href="#">Analytics</a></li>
</ul>
</div>
<div class="d-flex align-items-center">
<form class="w-100 me-3">
<input type="search" class="form-control" placeholder="Search...">
</form>
<div class="flex-shrink-0 dropdown">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</header>
<main class="container-fluid pb-3">
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="bg-light border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</main>
<div class="b-example-divider"></div>
<nav class="py-2 bg-light border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
<ul class="nav">
<li class="nav-item">Login</li>
<li class="nav-item">Sign up</li>
</ul>
</div>
</nav>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Double header</span>
</a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0">
<input type="search" class="form-control" placeholder="Search...">
</form>
</div>
</header>
<div class="b-example-divider"></div>
<header class="px-3 py-2 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
</div>
</div>
</header>
<div class="px-3 py-2 border-bottom mb-3">
<div class="container d-flex flex-wrap justify-content-center">
<form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
<input type="search" class="form-control" placeholder="Search...">
</form>
<div class="text-end">
<button type="button" class="btn btn-light text-dark me-2">Login</button>
<button type="button" class="btn btn-primary">Sign-up</button>
</div>
</div>
</div>
<div class="b-example-divider"></div>
<script src="https://getbootstrap.com/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body></html>
`
The code above is taken from https://getbootstrap.com/docs/5.0/examples/headers/.

How to change bootstrap 5 default menu to off-canvas menu?

I am creating one landing page in Bootstrap 5, where default menu should be replaced by off-canvas menu with a close icon.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Geometry Global</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<style>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;600;700;800;900&display=swap');
body, h1, h2, h3, h4, h5, article, section, div, p, ul, li, ol, a {
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:5.3rem;
font-weight:900;
line-height:0.8;
}
h2{
font-size:2rem;
font-weight:700;
}
body{
max-width:1414px;
margin:0 auto;
}
[x-cloak] { display: none; }
button {vertical-align: middle;}
input#s {border-radius: 0;border-width: 0 0 1px 0;font-size: 1.5rem;}
input#s:focus {outline: none;box-shadow: none;}
.search-panel-wrap {
position: relative;
height: 1px;
}
.search-panel {
background-color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 20px 0;
z-index: 9;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body x-data="{s_open: false}">
<section>
<div class="container border-bottom border-1 border-dark">
<div class="row py-3">
<div class="col-sm-6 col-6">
Geometry Global
</div>
<div class="col-sm-6 col-6 d-block d-sm-none">
<div class="text-end">
Explore Geometry Global
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg>
</div>
</div>
</div>
</div>
</section>
<section class="sticky-top bg-white">
<nav class="navbar container navbar-expand-lg navbar-light px-0">
<div class="container-fluid">
<a class="navbar-brand" href="#">Annual Report</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Reports 2020
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Report Architecture</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Planning</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Report Development</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
External Links
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</li>
</ul>
<span class="navbar-text d-none d-sm-block">
Download Geometry Global Report
<button class="btn" id="js-toggle-sp" #click="s_open = true" x-show="s_open === false"style="padding:0;height:24px;width:24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" x-show="s_open" x-cloak></button>
</span>
</div>
</div>
</nav>
<div class="search-panel-wrap">
<div class="search-panel" x-show="s_open" #click.away="s_open = false" x-cloak>
<div class="container search-panel__wrap">
<form action=""><input class="form-control" type="text" name="s" id="s" placeholder="Type here"></form>
</div>
</div>
</div>
</section>
<section class="py-3" style="background-color:#F9ECE4;">
<div class="container">
<div class="row">
<div class="col-sm-4 align-self-center">
<div><h2>STATISTICS <br/>2020</h2></div>
<div>An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
</div>
<div class="col-sm-8 text-center">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/09/28/10/38/medical-4510408_1280.png" alt=""/>
</div>
</div>
</div>
</section>
<section class="py-3">
<div class="container">
<div class="row">
<div class="col-sm-6 align-self-center">
<div class="py-3"><h1>Gross <br/>Income <br/>2020</h1></div>
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
<div class="col-sm-6">
<div class="py-3">An annual report is a comprehensive report on a company's activities throughout the preceding year. Annual reports are intended to give shareholders and other interested people information about the company's activities and financial performance.</div>
<div class="py-3">They may be considered as grey literature. Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry. Companies listed on a stock exchange are also required to report at more frequent intervals (depending upon the rules of the stock exchange involved).</div>
<div class="py-3">This doctype is meant to help our users create various business or project proposals and help them get approved. Proposals themes can be categorised per industry.</div>
</div>
</div>
<div class="row py-5">
<div class="col">
© geometry global inc. 2021
</div>
</div>
</div>
</section>
</body>
</html>
I searched some tutorial but was not able to implement close button. I need menu icon to be opened from right as a off-canvas menu with working dropdowns, Any help will be appreciated.
Thanks.

Bootstrap 5 Beta 3 (update 2021)
Introducing the new Bootstrap 5 Offcanvas Component
Bootstrap 5 Beta 2 (original answer)
Off-canvas menus are not an official Bootstrap component, but you can create one by using this "experimental" template as an example. You'll see that it requires additional CSS and JS.

HTML & CSS - Differences in Formatting with IE

I'm a complete novice when it comes to front end coding. I've made a simple design using Bootstrap 4 but some elements look completely different in IE than Chrome / Opera:
Chrome:
IE:
I've tried doing some research but I can't figure out what could be causing it. Here is the code for the search box and the card footer:
<ul class="nav navbar-nav flex-fill w-100 justify-content-end">
<li class="nav-item">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-primary" name="searchAll" onclick=" search_all()">Search</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" onclick="search_newest()">Newest</a>
<a class="dropdown-item" href="#" onclick="search_lowest()">Lowest Price</a>
<a class="dropdown-item" href="#" onclick="search_incOOS()">Include Out of Stock</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#" onclick="search_premium()">Premium Sellers Only</a>
</div>
</div>
<input type="text" class="form-control border-primary" id="searchbox" aria-label="Search for a product ...">
</div>
</li>
</ul>
and the code for the Card footer:
<div class="card-footer text-muted">
<div class="row">
<div class="col-sm-6">
<h5 class="Product-Info" style="float:left; margin-top: 4px;">0.00</h5>
</div>
<div class="col-sm-6">
<h5 class="Product-Info-Stock" style="float:right;">
<div class="box">
<span><svg aria-hidden="true" style="width:20px;" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-circle fa-w-16 text-success mr-1"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path></svg>
</span>
<span class="text-muted" style="margin-top: 5px;">0</span>
</div>
</h5>
</div>
</div>
</div>
</div>
</div>
Does anyone have any tips on how I can make the layout work properly with IE11 too?
Thanks!

Bootstrap 4 Carousel 3 items move advance 1

Sorry to be a pain. I might have been staring at my code for way to long but I am trying to implement a Bootstrap Carousel into my website that will show 3 and then progress one. I am currently following the code sniper at: https://www.codeply.com/go/EIOtI7nkP8 but can only get it to show one and progress one at a time.
Any help would be most appreciated.
Many thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="THE CARE COMPANY (SW) LTD, home care, care, care company, the, company, jobs, care jobs, TORBAY, DEVON, kingsbridge, totnes, plymouth, Care in Torbay , care Torbay, Care torquay, Torbay care , Care for eldery torbay, Torquay, the care company, home care services, home care medical, come care near me, home care elderly, home care agency, caregiver, home health care, respite care, home health aide, homecare, home care services, health, healthcare, assisted living, caregiver, respite care">
<meta name="description" content="Delivering professional home care & live-in care services. The Care Company provides bespoke respite care, dementia care, Alzheimer's care & much more." class="">
<title>The Care Company (SW) LTD</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top" style="font-size: 1rem !IMPORTANT">The Care Company (SW) LTD</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Our Expertise
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How Does Our Care Work</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our CAREGivers</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Partnerships and professionals</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Our Care Options</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Home Care Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Companionship</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Home Help and Housekeeping</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Personal Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Dementia Care Including Alzheimer's desease</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Advice and Support
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Cost Of Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">FAQ'S</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">How To Age Well</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Understanding And Preparing For Home Care</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Choosing The Right Care For You</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Nutrition</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Preventing Hospitalisation</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Alzheimers and Dementia Care</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Executive Profile</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Community Involvement</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Awards</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">What People Say About Us</a>
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">Why Choose The Care Company (SW) LTD</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Join Our Team
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color: #6B244D !IMPORTANT; color: white !IMPORTANT;">
<a class="dropdown-item" href="#" style="color: white !IMPORTANT;">#YouCanCare</a>
</div>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">News & Events</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead v-header">
<div class="fullscreen-video-wrap">
<video src="video/vid.mp4" autoplay="yes" loop="yes">
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content text-md-center container">
<h1 class="mx-auto my-0 text-uppercase" style="margin-bottom: 2px !IMPORTANT">Welcome To The Care Company (SW) LTD</h1>
<p style="color: white !IMPORTANT">Supporting Independence At Home</p>
<p>Our home care services not only provide you with the care you want, where and when you want it, we strive to keep you in control. It is your decisions, your life, your way.</p>
<h2 class="text-white-50 mx-auto mt-2 mb-5" style="color: white !IMPORTANT"></h2>
<p>Call on: 01548 521789</p>
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Supported at home the<img class="img-fluid mb-3 mb-lg-0" src="img/words/you.jpg" width="30%" alt="way you want"></h1>
<p class="text-black" >We understand that home is where you feel the happiest. If you want to stay living comfortably at home, you can live well, your way with The Care Company (SW) LTD.
<br><br>
Home Instead has been at the forefront of specialised home care for the elderly and supporting those being cared for and their families for many years. Founded on personal experience, these family values remain at the core of everything we do 24 years on.
<br><br>
Our award-winning care at home fits around your life - it’s tailored, it’s flexible and it’s adaptable. Whether you’re looking for help getting dressed and showered, help around the house or companionship, Home Instead’s trained CAREGivers are perfectly matched to you.
<br><br>
We believe age should be celebrated and that everybody should be able to live happily, comfortably and independently at home.
<br><br>
Start your Home Instead journey today.
<br><br><br>
Read More
</div>
</div>
<div class="row">
<div class="column">
<h1 class="text-black">Caring</h1>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”</p>
</div>
<div class="column">
<h1 class="text-black">Trustworthy</h1>
<br>
<p class="text-black">– We deliver a high standard of care, with integrity, through people who are passionate about what they do.
<br><br>
– “We are reliable, safe and diligent"</p>
</div>
<div class="column">
<h1 class="text-black">Positive</h1>
<br>
<p class="text-black">– We endeavour to encourage optimism and positive outcomes because we are enthusiastic about what we do.
<br><br>
– “We are pragmatic, tenacious, willing and conscientious”</p>
</div>
</div>
</div>
</section>
<!-- Looking For Staff Section -->
<section id="wjs" class="wjs-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<p class="text-black" style="font-size: 20px">
“ There is a real feeling of assurance that the person you love and care for is being taken care of in your absence. That’s what Home Instead does. My aunt hates to see her CAREGivers go. There are times she probably would like to see them more than me. ’’
<br><br>
Bon Jove - Clients Family
<br><br>
Read more client testimonials:
<br><br>
Testimonials
</div>
</div>
</div>
</section>
<!-- Why Join Us Section -->
<section id="about" class="about-section text-center">
<div class="container">
<h1 class="text-black mb-4">Services</h1>
<div class="row">
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/rcare.png" width="65%" alt="Respite Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/hcare.png" width="65%" alt="Hourly Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
<div class="column">
<div class="col-lg-8 mx-auto">
<h2 class="text-black"><img class="img-fluid mb-3 mb-lg-0" src="img/words/ccare..png" width="65%" alt="Complex Care"></h2>
<br>
<p class="text-black">– It sounds obvious, but it’s what we do and why we do it.
<br><br>
– “We are compassionate, dedicated, considerate and supportive.”
</div>
</div>
</div>
<h3 class="text-black mb-4">To view all our services please click below:</h3>
All Services<br><br><br><br>
</div>
</section>
<!-- contact us Section -->
<section id="contactUs" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<br><br>
<h2 class="text-black mb-5">Contact Us:</h2>
<p>You can either contact us via the form below or by post to: <br>The Care Company (SW) LTD, Little Spires, Totnes, Devon, TQ9 7QE <br> Tel: 01548 521789</p>
<form class="form-inline d-flex" action="contact_post.php"method="post">
<input type="test" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactFN" placeholder="Enter First Name *">
<input type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactLN" placeholder="Enter Last Name *">
<input style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactCN" placeholder="Enter Subject">
<input type="email" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactE" placeholder="Enter Contact Email Address *">
<input type="number" style="margin-top: 30px !IMPORTANT" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactN" placeholder="Enter Contact Number *">
<textarea style="width: 100% !IMPORTANT; margin-top: 30px !IMPORTANT" type="text" cols="40" rows="5" id="contactM" class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="contactM" placeholder="Let us know how we can help"></textarea>
<br>
<p>By clicking submit I consent to The Care Company (SW) LTD using my data for marketing purposes. I have read and accept the Privacy Policy</p>
<button type="submit" style="margin-top: 20px !IMPORTANT" class="btn btn-primary mx-auto">Submit</button>
</form>
<br>
<br><br>
</div>
</div>
</div>
</section>
<!-- quick page Section -->
<!-- quick page Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="text-black mb-4">Awards & Affiliates</h1>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
</a>
</div>
<br><br>
</div>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<section id="contactUs" class="signup-section">
<footer class="page-footer font-small stylish-color-dark pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Content -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">News & Events</h5>
<div class="container">
<?php
$stmt = $db->query('SELECT postTitle, postSlug FROM blog_posts ORDER BY postID DESC LIMIT 5');
while($row = $stmt->fetch()){
echo '<p>'.$row['postTitle'].'</p>';
}
?>
</div>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Useful Links</h5>
<ul class="list-unstyled">
<li>
Home
</li>
<li>
News & Events
</li>
<li>
Franchise Opportunities
</li>
<li>
About Us
</li>
<li>
Admin Log-in
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Get Started</h5>
<ul class="list-unstyled">
<li>
Home Care Services
</li>
<li>
Book a Consultation
</li>
<li>
Meet the team
</li>
<li>
Jour our team
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>
<ul class="list-unstyled">
<li>
<p>The Care Company (SW) LTD
<br>
Little Spires
<br>
Totnes
<br>
Devon
<br>
TQ9 7QE</p>
</li>
<li>
<p>Tel: 01548 521789</p>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<hr>
<!-- Call to action -->
<ul class="list-unstyled list-inline text-center py-2">
<li class="list-inline-item">
</li>
<li class="list-inline-item">
<a href="#projects" class="btn btn-primary js-scroll-trigger" >Join Our Team</a>
Find Home Care
</li>
<hr style="margin-bottom: -30px !IMPORTANT">
</ul>
<!-- Call to action -->
</footer>
<!-- Footer -->
<footer class="bg-white small text-center text-black-50" style="background-color: #862d60 !IMPORTANT; color: white !IMPORTANT">
<div class="container">
<div class="col-md-12 col-xs-12" style=" margin-bottom: 20px !IMPORTANT">
<center>
Site Map | Privacy & Cookies | Terms & Conditions
</center>
</div>
<div class="social d-flex justify-content-center" style=" margin-bottom: 20px !IMPORTANT">
<a href="#" class="mx-2">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="mx-2">
<i class="fab fa-instagram"></i>
</a>
</div>
Copyright © Your Website 2019
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
</section>
</body>
</html>

Your script for the Carousel is using jQuery, but it's trying to run before jQuery is loaded by the page. In its current state you need to move the Carousel script to AFTER the jQuery loading.
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="grayscale.min.js"></script>
<script>
$('#recipeCarousel').carousel({
interval: 10000
})
$('.carousel .carousel-item').each(function(){
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<minPerSlide;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
Now the jQuery functions correctly and it moving like you desire.
I downloaded the JS and CSS for grayscale and linked to the CDNs of the libraries to confirm this would work for you.

Bootstrap 4: Not being able to vertically -and responsively- center an image

I'm working on an Angular 6 app and at this moment I'm trying to center an image on home screen but no matter which solution I try (from the ones I've found here) it always shows immediately next to top navbar and not vertically centered.
I tried all solutions found in this next post in app.component.html with no luck, always get the more or less the same result as can be seen in the picture:
Vertical Align Center in Bootstrap 4
Please, help me in centering vertically home image (or text or whatever I choose to put) without affecting the rest of pages that use the app.component.html template.
index.html:
<!doctype html>
<html lang="en">
<head>
<title>WFRH</title>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app>Loading...</app>
</body>
</html>
app.component.html:
<app-nav></app-nav>
<div class="jumbotron">
<div class="container d-flex h-100" style="border: 1px solid red">
<div class="row justify-content-center align-self-center text-center">
<div class="col-sm-12">
<!-- <router-outlet></router-outlet> -->
I'm centered...
</div>
</div>
</div>
</div>
<app-footer></app-footer>
home.component.html:
<img src="../../../assets/cirsa_home.png" class="img-fluid" />
nav.component.html:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark pb-0">
<div class="container pb-1">
<!-- Brand -->
<a class="navbar-brand" href="{{xxxApp.xxxWebsiteUrl}}" target="_blank">
<img src="../../../assets/app_logo.png" />
</a>
<!-- Menu Toggler -->
<button style="margin-left: 10px;" class="navbar-toggler order-last order-sm-0" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse order-last order-sm-0" id="collapsibleNavbar" *ngIf="(isLoggedIn | async)">
<ul class="navbar-nav pull-left">
<li class="nav-item text-left hover-inverse">
<a class="nav-link text-light" href="#">
<i class="fa fa-home"></i>
<label [translate]="'wfrh_nav_home' | translate">Inicio</label>
</a>
</li>
<li class="nav-item text-left dropdown hover-inverse">
<a class="nav-link dropdown-toggle text-light" href="#" id="navbardrop" data-toggle="dropdown">
<i class="fa fa-edit"></i>
<label [translate]="'wfrh_nav_requests' | translate">Solicitudes</label>
</a>
<div class="dropdown-menu bg-dark border-0 hover-inverse">
<a [routerLink]="['/vacancy-form']" class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_fillvacancy' | translate">APC Cubrir vacante</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_leave' | translate">APC Excedencia</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_lactation' | translate">APC Lactancia</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_maternity' | translate">APC Maternidad</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_newcreationdailycasinos' | translate">APC Nueva Creación Diarios Casinos</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_newcreation' | translate">APC Nueva Creación</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_substitution' | translate">APC Sustitución IT</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_holidays' | translate">APC Vacaciones</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_changeofconditions' | translate">CDC Cambio Condiciones</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_evaluationsheet' | translate">HEV Hoja Evaluación</label>
</a>
<a class="dropdown-item text-light" href="#">
<label [translate]="'wfrh_nav_balanceandsettlement' | translate">PSF Saldo y Finiquito</label>
</a>
</div>
</li>
<li class="nav-item text-left hover-inverse">
<a [routerLink]="['/login']" class="nav-link text-light">
<i class="fa fa-sign-out"></i>
<label [translate]="'wfrh_nav_logoff' | translate">Cerrar sesión</label>
</a>
</li>
</ul>
</div>
<!-- Email send tester -->
<!-- <button class="btn-primary" (click)="emailMe()">Send Test Email To Me</button> -->
<!-- User menu -->
<!-- <div class="dropdown d-flex flex-grow-1" style="margin-right: 10px;" *ngIf="(isLoggedIn | async)">
<button type="button" class="btn btn-success dropdown-toggle ml-auto" data-toggle="dropdown" id="userDropdown">
{{userName | async}}
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<div class="dropdown-divider"></div>
<a [routerLink]="['/login']" class="dropdown-item">Logout</a>
</div>
</div> -->
<!-- Language Selector -->
<select class="selectpicker ml-auto" data-width="65px" id="langSelect" data-style="btn-primary" #langSelect
(change)="languageChange(langSelect.value)">
<option class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}" style="margin-bottom: 5px; width: 65px;"
*ngFor="let lang of xxxApp.translate.getLangs(); let i = index" [value]="lang" [selected]="lang === xxxApp.translate.currentLang">
<span class="flag-icon flag-icon-squared flag-icon-{{xxxApp.countryInfo[i].ISO3166_2Letter}}"></span>
</option>
</select>
</div>
</nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark pt-0 pb-0">
<div class="container pt-0 pb-1">
<small class="username">
{{userName | async}}
</small>
</div>
</nav>
styles.css:
#import "~bootstrap/dist/css/bootstrap.min.css";
#import "~font-awesome/css/font-awesome.css";
html, body {
height: 100%;
}

You probably missunderstood the solution given in the vertical align post.
To be able to align vertically an item depending on its parent, you have to set the parent's height (that is why you see body height:100% in their example) but if, like in your html, you have many different parents, not only the parent has to have the 100% height prop, but also the children props
CSS Example :
#import "~bootstrap/dist/css/bootstrap.min.css";
#import "~font-awesome/css/font-awesome.css";
html, body, div {
height: 100%;
}
HTML Example :
<body>
<div>
<image>the centered element</image>
</div>
</body>

After researching and doing a lot of trial and error I came up with a solution that works. I hope it is useful for anyone else with this issue.
My app main template consists on an horizontal navbar header => content => horizontal navbar footer and I set a fixed height footer of 40 px so then I use a negative margin of 40px for home image so it is centered respect content div and not the whole screen (I don't like this approach very much -I mean, using negative margins- but it works):
app.component.html (the main structure):
<div class="main">
<div class="row header m-0 p-0">
<div class="col-12 m-0 p-0">
<app-nav></app-nav>
</div>
</div>
<div class="row content m-0 p-0">
<router-outlet></router-outlet>
</div>
<div class="row footer">
<app-footer></app-footer>
</div>
</div>
home.component.html:
<div style="margin-top: -40px !important;" class="pl-5 pr-5">
<img src="../../../assets/img_home.png" class="img-fluid" />
</div>
styles.css:
html, body {
height: 100%;
}
.main {
display: flex;
flex-flow: column;
height: 100%;
}
.main .row.header {
flex: 0 1 auto;
}
.main .row.content {
flex: 1 1 auto;
}
.main .row.footer {
flex: 0 1 auto;
}
And so is how the home screen looks: