In Bootstrap 4, is it best practice to always use rows?

Question

So I have a disagreement with another developer and I'm turning to the internet.

In Bootstrap 4, is it best practice to always wrap content in a container within a row and column even if the row would contain 1 column?

Which is of these examples is the better practice?

1. with the row and column

<div class="container">
    <-- other rows -->

    <div class="row">
        <div class="col">
            <div><!-- content --></div>
        </div>
    </div>

    <-- other rows -->
</div>

<div class="container">
    <-- other rows -->

    <div><!-- content --></div>

    <-- other rows -->
</div>

Answer 1

Basically this has been answered before: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?

Short answer: The container can be used to directly contain content and/or the grid system of rows and cols. The row is only use to contain columns. Therefore, if you don't need a multi-column layout, there's really no reason to use the grid.

Of course the question is subjective, but I would lean toward #2 being the better practice because it achieves the same result with less markup.

Answer 2

If you don't want to add rows after or inside container, it's okay; then, you shouldn't add col too, because each column has 15px padding and this padding is then counteracted on the rows with negative -15px margins.

According to bootstrap

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.

Finally, If your design based on the bootstrap grid, you should follow 1. row and column markup, and if your plan is elaborate and not follow bootstrap grid you can follow 2. Markup.

Remember, you can use both markups in the same project. There are no cons!

Answer 3

As a practice i use 1 (with row and col-*) and i also don't remember seeing something like 2 in bootstrap doc as well. I would go with 1 but that's more of a choice than best practice to me.