I'm utilizing bootstrap4 to construct a simple layout, and here's what I have so far...
.container-fluid {
background: grey;
}
.container {
background:wheat;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="container p-5">
<div class="row">
<div class="col-md-12 pb-5">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 pb-5">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
<div class="col-md-6 pb-5">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</div>
</div>
</div>I've opted for the container-fluid to ensure the background spans the full width, while nesting container inside for a maximum content width.
Is this approach correct? Any suggestions for achieving this layout more effectively?