Can you help me create a minimal layout using Bootstrap 4-5 with a header, footer, LeftMenu, Content, and RightMenu?
The combined width of LeftMenu, Content, and RightMenu should be similar to the main block on the current site (htmlforum.io). This means not occupying the entire width of the browser, but being centered instead. Are there any best practices for achieving this kind of layout?
LeftMenu should be aligned with the left edge of the container.
RightMenu should be aligned with the right edge of the container.
For example...
An illustration is provided in the image below:
https://i.sstatic.net/rZPOt.png
I've tried implementing it myself, but everything seems misaligned...
Here's the code:
<!doctype html>
<html lang="ru">
<head>
<!-- Webpage encoding -->
<meta charset="utf-8">
<!-- Viewport settings -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap CSS (jsDelivr CDN) -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7c8d7ca">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap Bundle JS (jsDelivr CDN) -->
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c7768776a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<!-- Page content -->
<div class="container sm ">
<header class="s-topbar ps-fixed t0 l0 js-top-bar bg-primary text-white">
<div class="container-fluid p-3">
HEADER
</div>
</header>
<section class="position-relative">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xl-4 a1 bg-danger text-white w-3 ">A1</div>
<div class="col-md-6 col-xl-4 a2 bg-warning text-dark">A2</div>
<div class="col-md-6 col-xl-4 a3 bg-success text-white">A3</div>
</div>
</div>
</section>
<footer class="fixed-bottom">
<div class="container-fluid p-3 mb-2 bg-dark text-white" >
FOOTER
</div>
</footer>
</div>
</body>
</html>