What is the correct way to wrap multiple sections in bootstrap container?

user_12032887 0
Viewed 291

For example, I have next structure on my site

<div class="root">
  <section class="first"></section>
  <section class="second"></section>
  <section class="third"></section>
  <section class="fourth"></section>
</div>

And I have to wrap sections from second to fourth in bootstrap container. What is the correct way to do this? Wrap each section in separate container? Or create something like this :

<div class="root">
  <section class="first"></section>
  <div class="container">
    <section class="second"></section>
    <section class="third"></section>
    <section class="fourth"></section>
  </div>
</div>

html
1 Answers

The correct way is to add all sections which you need to wrap as a child element to a <div class="container"> as you have done in the second snippet.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="root">
  <section class="first">Hello, I am outside</section>
  <div class="container">
    <section class="second">I am inside the container</section>
    <section class="third">I am inside the container</section>
    <section class="fourth">I am inside the container</section>
  </div>
</div>

user_141767860
Related