ort,
you can use the <code class="highlighter-rouge">.overlay</code> class to create the cover,
and wrap the <code class="highlighter-rouge">.overlay-body</code> container which contains the contents
in the cover.</p>

<p>Letâ€™s see the below example.</p>

<!-- markdownlint-disable -->

<div class="example">
  
<!-- Create a trigger to activate the overlay -->
<button class="btn btn-primary" data-toggle-for="overlay">Click me to activate the overlay</button>
<!-- The cover on the document viewport -->