1

Yesterday I was doing a review of our HTML structures and found out we have containers used as row child's like this

<section class="row graySeccion">
  <div class="container py-5 graySeccion">
    <div class="row mb-5">
      <div class="col py-2 text-center">
        <h1>WELCOME TO STEAM SCHOOLS</h1>
      </div>
    </div>

But looking at the oficial documentation I can see this note.

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

How wrong is it that we have this row->container->row, and what things we could be breaking?
Should we start refactoring our HTML structures?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Camilo Casadiego
  • 907
  • 3
  • 9
  • 33
  • 1
    If it looks the way you want to, you don't need to do anything. Bootstrap's rows and columns have (at least historically) used negative margin tricks, which could look wonky if nested incorrectly. – AKX Feb 04 '21 at 13:40

1 Answers1

1

Yes, Ideally you should follow a proper grid layout structure.

row class contains following property:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Due to this property of row horizontal scrollbar occurs on the page for some resolutions. To avoid this we need to follow the official documentation of bootstrap (container->row->col).

Yudiz Solutions
  • 4,216
  • 2
  • 7
  • 21
  • 1
    exactly what I said to the front end team, but so far the general opinion is similar to @AKX comment, so I want to be sure there's actually something broken before trying to fix it, although I have requested them to follow the proper structure from now on – Camilo Casadiego Feb 11 '21 at 13:28