CODEWITHSUNDEEP
htmltwitter-bootstrap
Henry
Henry

Reputation: 5313

HTML (bootstrap) container and rows

I just want to be sure about some basic HTML structuring.

Most HTML page body layouts start with a <div class="container"> which of course contains all the HTML in with boostrap v4 it contains rows and columns.

All nice and easy there.

My question is, am I "correct" or not to place columns and rows within separate containers?

This is what I mean:

<body>

<div class="container">
 <div class="row">
  <div class="col-md-12">
    Some Content
  </div>
 </div>
</div>

<div class="container">
 <div class="row">
  <div class="col-md-12">
    Some Content
  </div>
 </div>
</div>

<div class="container">
 <div class="row">
  <div class="col-md-12">
    Some Content
  </div>
 </div>
</div>

</div><!-- end body -->

I think the answer to my question is that "it is ok" because for example what happens if you want a full-page width div container then you'd use a separate container for those elements.

I just want to be sure, thanks!

Upvotes: 0

Views: 99

Answers (1)

krishna_tandon
krishna_tandon

Reputation: 393

As per your example, if the content has to be inside the container, then using multiple containers is redundant. Use a single container and then separate the rows.

This approach also depends heavily on the design.

Full page width div, YES, the separate container is correct.

Note : For full width

Use container-fluid for full width, and remove the padding as well. container-fluid class has padding-left : 15px and padding-right: 15px.

You can remove it to cover the div end to end. You can use pl-0 and pr-0, classes provided by bootstrap to set padding-left and padding-right to 0, respectively.

Upvotes: 1

Related Questions