Centered body with max width in bootstrap 4 - html

I would my Bootstrap 4 webpage to have max width of 960px, including the top navbar. I have tried to enclose everything within the body with a div with max-width set. However, then this "body div" is left aligned. I would like the "body div" to be in the middle with whitespace around when the view port width is larger than 960px.
How would this be best achieved?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Max body width</title>
</head>
<body>
<div id= "body-div">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<button class="btn btn-primary" onclick = "toggle();">Toggle max-width</button>
<script type="text/javascript">
function toggle(){
var div = $('#body-div');
if(div.css('max-width') !== "960px"){
div.css('max-width', '960px');
}
else{
div.css('max-width', '');
}
}
</script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p><p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
</div>
</div>
</body>
</html>
https://jsbin.com/towapid/1/edit?output


To center align a div like that, all you need to do is add a margin:auto; to the #body-div. The margin is calculated based on the width of the div.
So in your css, you just need to add this:
#body-div{
margin:auto;
}


Here's a way to do it in Bootstrap 4:
Note: this solution doesn't use your body-div or any other hacks because there's no need for any hacks. This can all be done with native Bootstrap classes alone.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row no-gutters">
<div class="col col-lg-10 offset-lg-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p>
<p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
Here's an alternative version (you might like this better):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col mx-5">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p>
<p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Related

Remove vertical scrollbar by auto adjusting height to viewport

I have a page in Bootstrap 4. When I added the footer a vertical scrollbar is coming. I don't want the vertical scrollbar. I want the whole page including the footer to adjust within the viewport height. How can I achieve this. Here is the jsfiddle.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="my-1 mx-2 close">X</span>
<span class="navbar-toggler-icon">☰</span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu 1
</li>
<li class="nav-item">
Menu 2
</li>
<li class="nav-item">
Menu 3
</li>
<li class="nav-item admin">
Menu 4
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet orci quis erat imperdiet condimentum vel eu sapien. Morbi convallis sapien et molestie finibus. Fusce eleifend vitae orci eget porta. Etiam malesuada facilisis iaculis. Ut tempus, sem quis tincidunt condimentum, risus ligula vestibulum mi, sit amet imperdiet mauris ex id augue. Sed sed dictum velit. Etiam varius elit et odio vulputate, sit amet interdum tellus sagittis. Morbi vulputate leo a dolor consequat tempor. Nam sed auctor nisi. In luctus eleifend laoreet. Morbi id nisl non ex fringilla tincidunt. Suspendisse eget venenatis tortor.
Proin eu consectetur magna. Aliquam erat volutpat. Aenean vehicula imperdiet aliquam. Nam a sem vel est tristique laoreet. Aenean nisl dolor, tempor in iaculis ac, efficitur at lorem. Proin scelerisque ipsum ut sapien luctus, id viverra tellus ornare. Cras lorem tortor, ultricies hendrerit vulputate quis, tincidunt in ipsum. Nam nec dolor dolor. Donec quis felis laoreet, feugiat purus et, imperdiet tortor. Cras non pulvinar leo, nec lobortis mi. Phasellus pellentesque placerat auctor. Suspendisse a urna vel ipsum faucibus hendrerit eget sit amet leo. Etiam consequat ex eget pulvinar pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquam, tellus nec consequat faucibus, dui felis condimentum nulla, quis elementum massa turpis et felis.
</div>
<div class="footer">
Ⓒ 2021 All rights reserved T
</div>
</body>
</html>

I gave the height in percentage and was able to solve the problem.
.container-fluid{
height: 93%;
}
.footer{
height: 7%;
}

How to get div height of his parent while using d-flex in Bootstrap

The problem is that I want the navigation menu to be 100% height of bordered div and I don't really know where is the issue.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class=" mt-5 border rounded h-100">
<div class="d-flex flex-column navbar-dark bg-dark rounded-start float-start h-100">
<div class=" flex-column px-2" style="">
<ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0 flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
<div class=" d-flex flex-column content p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus a sem hendrerit lobortis. Vestibulum vel nulla non velit rhoncus eleifend. Suspendisse molestie nec nisl cursus fringilla. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Can you please check the below code? Hope it will work for you. You have to remove height(h-100) from navbar-dark and please give d-flex to the parent element.
Please refer to this link: https://jsfiddle.net/yudizsolutions/1j87zkqb/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="d-flex mt-5 border rounded h-100">
<div class="d-flex flex-column navbar-dark bg-dark rounded-start float-start">
<div class=" flex-column px-2" style="">
<ul class="navbar-nav justify-content-center me-auto mb-2 mb-lg-0 flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
<div class=" d-flex flex-column content p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus a sem hendrerit lobortis. Vestibulum vel nulla non velit rhoncus eleifend. Suspendisse molestie nec nisl cursus fringilla. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur
non nunc in tellus vehicula volutpat molestie malesuada ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare. Morbi aliquet turpis sit amet pulvinar bibendum. Curabitur non nunc in tellus vehicula volutpat molestie malesuada
ante. In lobortis quam sed maximus scelerisque. Duis imperdiet mollis ornare.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Bootstrap 4 Navbar keep item from collapsing and center

I am practice making a mobile website with ReactJS and Bootstrap 4 and need to create a Navbar as below.
Normal
Normal Menu:
Collapse
Collapse Menu:
So far I was able to figure out how to exclude items from the collapse menu by putting them in another div in the NavBar outside the collapse one, but the output still did not match my desire look. Also, when the NavBar in collapse mode expand, it push my content below it down, which is not what I need. I have a logo above the NavBar so I cannot use fixed-top. Here is what I have so far:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo">
<nav class="navbar navbar-dark navbar-expand-lg navbar-template">
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-flex flex-row order-2 order-lg-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
<li class="nav-item ml-auto"><img class="nav-link px-2" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></li>
</ul>
</div>
</nav>
<div class="container"></div>
Is there anyway to achieve the NavBar that I need? More specifically, exclude some item from the collapse menu, change some item position when the NavBar turn into collapse, and stop it from pushing the content below down?

So you need to play with media query a little to hide some element and show other.
1st thing I made is to igve your main logo is own container to fix
it on the top.
2nd was to take the collopase button out from the div you added.
3rd I added to 2 div after main menu to show elements when screen
under 992px.
4th I added My name to your main menu to and play again with display
to show it.
You will obviously need to change all class to className to make it work correctly.
Hope it is coming quite close to the question
.container-logo{
width:100%;
display:flex;
justify-content: center;
}
#navbarNavDropdown{
position: absolute;
top: 116px;
}
ul.navbar-nav{
padding: 0 15px;
}
#media (min-width: 992px){
#navbarNavDropdown{
position: relative;
top: 0;
}
ul.navbar-nav{
padding: 0;
}
.d-lg-list-item {
display: list-item!important;
}
}
.logo-main{
width:100px;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-logo">
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark list-unstyled">
<li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
<li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
<div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
<!--<div class="flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row list-unstyled">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
</ul>
</div> -->
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lacus vel justo porta ornare cursus finibus ligula. Quisque et neque cursus, finibus dui non, aliquam ex. Donec tincidunt interdum augue a scelerisque. Suspendisse congue semper odio. Vivamus in felis at lorem consectetur cursus. Fusce accumsan dignissim turpis, in ornare quam dictum ut. Aenean vel pretium risus. Ut ut tempus erat. Quisque eros risus, bibendum ac erat quis, semper hendrerit libero.
Aliquam et placerat augue. Ut sed ex arcu. Duis dapibus faucibus est posuere imperdiet. Sed et faucibus purus. Donec ex ex, facilisis id velit quis, congue eleifend nunc. Etiam sed leo orci. In molestie pharetra lacus, maximus dictum nunc iaculis nec. Aenean nisi ipsum, finibus nec ligula id, ultricies luctus orci. Quisque quis metus non nulla tincidunt tempor fringilla ac elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed facilisis, ligula id faucibus lacinia, metus tellus sagittis turpis, eget aliquet elit felis non risus. Nunc lacus dui, posuere non nisl a, eleifend facilisis ipsum. Fusce in leo nibh. Duis condimentum blandit lobortis. Fusce maximus risus eget urna sodales luctus.
Etiam rhoncus ornare dui, vel vehicula leo pellentesque sed. Curabitur in odio enim. Curabitur ut ullamcorper mi. Suspendisse condimentum sapien quis tortor auctor elementum. Donec ac euismod neque. Nunc eget sapien a purus viverra tincidunt. Mauris rhoncus arcu ut diam maximus malesuada. Mauris scelerisque mattis lectus sed venenatis. Ut viverra diam in eros lacinia, sit amet blandit nisl tempus. Aliquam condimentum magna et massa fringilla, nec facilisis odio fringilla. Etiam ultrices, mauris ut elementum sodales, sem justo ultricies orci, vitae fringilla dui magna ut sapien. Phasellus posuere lacus nec leo ornare rutrum.
Suspendisse neque lectus, fringilla quis dui in, feugiat scelerisque turpis. Aliquam porta turpis nulla, sit amet volutpat ex suscipit ac. Sed nec neque vel nibh porttitor laoreet. Quisque convallis dolor sem, non fermentum justo tincidunt sit amet. Aliquam vitae est elit. Cras eros felis, dignissim eget suscipit vel, facilisis et lorem. Morbi vitae tempus lorem. Aenean et ullamcorper orci. Nullam in finibus urna. Sed interdum vel libero at mattis. Nulla suscipit, massa in pharetra dapibus, massa metus mattis dui, quis efficitur quam est vitae arcu. Sed congue tristique suscipit. Praesent eget nibh volutpat, laoreet mi a, facilisis dui. Donec quis tellus et magna accumsan bibendum. Integer ullamcorper nibh non elit malesuada varius. Proin id laoreet mi.
Proin pharetra nibh non metus aliquam, tempus elementum felis ultricies. Mauris et enim nibh. Donec sit amet mi eu purus ultricies aliquam eget nec nibh. Cras velit nunc, viverra ut iaculis sit amet, molestie sed turpis. Etiam posuere quis enim ac ultrices. Quisque justo mi, vestibulum at enim at, suscipit pretium arcu. Aliquam vulputate ipsum mattis gravida laoreet. Nullam nulla ante, egestas viverra ligula nec, molestie luctus lorem. Phasellus convallis nulla et dignissim cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum condimentum nunc, ut maximus lectus blandit et. Curabitur elementum tellus risus, non semper odio hendrerit id. Mauris faucibus luctus suscipit. Nullam sed ultrices enim. Aenean facilisis risus id arcu consequat, a fringilla sapien elementum.
</div>
</body>

Why is my button not jumping to its intended section in Bootstrap 4?

I have a question regarding using scrollspy, adding a button inside the navbar, and having that button jump to its intended target section. I added a tag to be more semantic, and used a with the class of form-inline to put it next to the navbar links. The nav links work fine, but the button doesn't.
I was trying different ways to add the href to the button tag, or to substitute the tag with an tag and removing the tag, but nothing works. I was trying to find a scrollspy that used the tag, but no luck. Here's my code:
<body data-spy="scroll" data-target="#navbar">
<nav class="navbar fixed-top navbar-expand-md navbar-dark" id="navbar">
<a class="navbar-brand" href="index.html" id="navbarBrand">Unexpected Friends</a>
<!--navbar toggler is the hamburger icon that appears when in smaller screens-->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<!--ml-auto moves the links to the right-->
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<form class="form-inline" id="button">
<button type="button" class="btn btn-outline-light" role="button" id="waysToHelp" href="#waysToHelp">Ways to Help</button>
</form>
</ul>
</div><!--navbarNav-->
</nav>
<section id="waysToHelp">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="img/uf_10.jpg" class="img-fluid float-right ml-4">
<h1 class="text-center">Ways To Help</h1>
<p>Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Lacinia quis vel eros donec ac. Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Faucibus turpis in eu mi bibendum. Massa ultricies mi quis hendrerit. Bibendum ut tristique et egestas quis. Nisi vitae suscipit tellus mauris a. Lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Pellentesque elit ullamcorper dignissim cras. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Tellus id interdum velit laoreet id donec ultrices tincidunt. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Adipiscing diam donec adipiscing tristique risus. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Dictum sit amet justo donec enim diam. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Ultricies tristique nulla aliquet enim.<br><br>
Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Risus in hendrerit gravida rutrum quisque. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Ipsum consequat nisl vel pretium lectus quam id. Ut sem viverra aliquet eget sit amet. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Semper quis lectus nulla at volutpat diam ut. Risus at ultrices mi tempus. Eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Sit amet mauris commodo quis imperdiet massa. Urna porttitor rhoncus dolor purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit.</p>
</div><!--column-->
</div><!--row-->
</div><!--container-->
</section>
</body>

Kindly read the documentation properly :
The data-spy attribute will be on the div outside the the nav with a data-target to indicate the selected nav
It has to be a tag because of href. It converts hash url,which is also accessible when entered in the url directly. That is the fundamentals of how it works.
You can do it like -
<button type="button" class="btn btn-outline-light" role="button"
id="waysToHelp">ways to help</button>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#waysToHelp">ways to help</a>
</li>
<form class="form-inline" id="button">
<button type="button" class="btn btn-outline-light" role="button" id="waysToHelp">ways to help</button>
</form>
</ul>
Example - https://jsfiddle.net/cvwrfau0/

Sticky header & footer not that sticky

I have a basic bootstrap 4, flex page which its navigation and footer should be sticky but its not and I cant figure out why:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
I was on the impression that .sticky-top class would sort out the situation for the top menu but cant figure out exactly what is causing this issue. How can I make sure that in below simple page both top menu bar and footer are sticky?

For the sticky header, you add the class to header instead of nav as below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top ">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
There is no sticky-bottom class but there are some tutorials to set a sticky footer, like this

Another option can be just add position: sticky; bottom: 0 to <footer> tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
#sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>