Doubt about the use of "Row" and "col" classes in Bootstrap

Asked

Viewed 628 times

0

I’m using Bootstrap 4 for my frontend and I was wondering if I should always put all my HTML content inside a div with class col that in turn should come within a div with class row.

For example, it should always be like this:

<div class="container">
    <div class="row">
        <div class="col">
            <h1>Todo meu conteúdo deve ficar aqui?</h1>
        </div>
    </div>
</div>

Or so is acceptable:

<div class="container">
    <h1>Conteúdo fora da div com classe "col"</h1>
    <div class="row">
        <div class="col">
            Mais conteúdo...
        </div>
    </div>
</div>
twitter-bootstrap bootstrap-4

  • row refers to the line and col the column, it is advised to use the content within the cols in this way that you posted, not all content of course, but of what you want to be displayed in that column.

1 answer

3


To documentation restricts content within .row, but not within .container:

In a grid layout, content must be placed Within Columns and only Columns may be immediate Children of Rows.

Translating:

In a grid layout, content should be placed inside columns and only columns can be immediate children of rows.

In another item explains that each column has padding to create a "go" (Gutter in English) between columns, and this "gap" is compensated with negative margins in .row.

That said, the restrictions seem to apply only to .row and .col, the .container will only be the element that limits the size of your screen.

If you see the code that creates the rules for the container will see:

@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

None of the CSS rules would disturb you from using one <h1> out of .rows, but the advisable is you use and test on different screen sizes to ensure the proper functioning.

Browser other questions tagged twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.