Columns must be immediate children of rows?

Question

Columns must be immediate children of rows or I can have other divs inside a row without being a column? I'm working with drupal and it produces a lot of divs inside a container or row I've created.

For example I'm restricted to follow this structure always:

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Or I can do something like this:

<div class="container">
  <div class="row">
    <div class="something">
      Something
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="something__else">
      Something else
    </div>
  </div>
</div>

Answer 1

Something that helps me often is to define a border on the elements. So I can easily test if my Css works the way I want. Like Akber said, row and col are classes so you can use them when you want. But check out this link : Bootstrap grid documentation , this way you use the framework as it should. Good luck!

Answer 2

The reason we follow the framework is to write code that is clearly readable by colleagues, and by yourself when you inevitably come back to the code in 6 months. Writing code with inconsistent classes and structures will work, but it will be unreadable by others.

tl;dr - yes it's fine, but you shouldn't do it.

Answer 3

From the Bootstrap docs...

"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side... In a grid layout, content must be placed within columns and only columns may be immediate children of rows."

Therefore, the columns have padding that is specifically designed to work inside the row. If you use other than col, the content will not be aligned correctly on the left (and right) side as you can see with this example using borders...

https://www.codeply.com/go/hDcyKs2cWy