I want my Bootstrap 4 webpage to have a maximum width of 960px, including the top navbar. I tried enclosing everything within a body div with a set max-width, but it ended up being left-aligned. How can I center the body div with whitespace around it when the viewport width is larger than 960px?
What is the best way to achieve this?
<!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>