Avoid Unnecessary Bootstrap Rows and Columns

I often see this kind of code from people using Bootstrap:

<div class="container">
    <div class="row">
        <div class="col">
            <h1>Lorem Ipsum Dolor Sit Amet</h1>
            <p>Lorem ipsum</p>
        </div>
    </div>
</div>

Which can be optimized into this:

<div class="container">
    <h1>Lorem Ipsum Dolor Sit Amet</h1>
    <p>Lorem ipsum</p>
</div>

Because we don’t really need the .row nor the .col.

The purpose of the .row and the .col are simply to place elements into different columns. If there’s just 1 column and if the column spans the entire row, then we don’t really both the row and the column.

Reducing the number of HTML elements would allow the browser to parse the HTML document, reduces the amount of time JavaScript needs to select elements, hence improving performance and better Google Page Speed scores for SEO purposes.