My goal is to create a grid layout similar to the one shown in the image:
https://i.sstatic.net/wJUqa.png
This layout consists of a header followed by content divided into 3 columns. The content is separated by a full-width row with text in the center.
I am wondering about the correct structure in Bootstrap 4 to achieve this layout. I have searched the documentation but could not find any relevant information.
I attempted the following structure:
<div class="container">
<div class="row">
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
</div>
</div>
<div class="bg-dark py-4 my-4">
<div class="container h-100">
<div class="row h-100 align-items-center text-white">
<div class="col-lg-12 text-center">
<p>Middle Text</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
</div>
</div>
...and so on...
I am unsure if it is necessary to open and close a div container for each section of content. Any guidance would be appreciated. Thank you.