A page with a side menu. The basics is that it is on the side. When a small device sees the page the sidebar is collapsed and a collapse icon apears.
<div class="d-lg-none bg-primary text-xs-right">
<div class="container">
<a href="#side-menu" data-toggle="collapse" class="btn btn-default bg-primary text-white">
<i class="fa fa-life-ring"></i>
Show menu
</a>
</div>
</div>
<div class="container py-3">
<div class="navbar-expand-lg">
<div class="row ">
<div class="col-lg-3 col-12 bg-info text-white collapse navbar-collapse py-1" id="side-menu">
<div>
<h3>
Sidemenu
</h3>
<p>
Here you can add a side menu, Or just add some info for the user. It is shown on large screens
and hidden on small.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis eligendi et fugiat
harum ipsa odit quis quod repellendus rerum, sequi similique suscipit, voluptate? A accusamus
aperiam autem dicta hic.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolorem minus nesciunt, non
perspiciatis repudiandae sapiente! Dolores enim possimus voluptas! Ad fugit itaque, iure officia
quibusdam repudiandae ut voluptatibus voluptatum!
</p>
</div>
</div>
<div class="col-lg-9 col-12 py-1">
<h3>
Content
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus facere illum ipsam minima nobis
numquam. Architecto atque cupiditate dolorem ea nesciunt, praesentium qui, rem repellat repudiandae,
sapiente tempora totam voluptatem!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur consequatur corporis
cumque delectus dignissimos doloribus, ducimus et eum facilis illo iste minima nostrum obcaecati
odit praesentium recusandae vero voluptas.
</p>
</div>
</div>
</div>
</div>