Bootstrap Containers & Website Layout

HTML-CSS
1

Howdy, folks!

I’m a little confused on how to use Bootstrap’s containers. Am I supposed to nest the entire body of the webpage within a container and then use rows for each section of the webpage? Or do I use individual containers for each section of my webpage?

This one, or…

<body>
  <div class ="container-fluid">
    <nav>Nav bar code</nav>
    <div class="row">
      <div class="col-*-*" > body stuff </div>
      <div class="col-*-*" > body stuff </div>
    </div>
    <div class="row">
      <div class="col-*-*" > more body stuff </div>
      <div class="col-*-*" > more  body stuff </div>
    </div>
 </div>
</body>

Or this one?

<body>
  <div class ="container-fluid">
    <nav>Nav bar code</nav>
  </div>
  <div class ="container-fluid">
    <div class="row">
      <div class="col-*-*" > body stuff </div>
      <div class="col-*-*" > body stuff </div>
    </div>
  </div>
  <div class ="container-fluid">
    <div class="row">
      <div class="col-*-*" > more body stuff  </div>
      <div class="col-*-*" > more  body stuff </div>
    </div>
  </div>
</body>
1 Like
2

The top one.

You usually need only one class with container or container-fluid for an entire app. All other elements should be nested under it.

1 Like
3

OMG I’ve had the same question for so long and couldn’t find the answer anywhere. Thank you :slight_smile: