In bootstrap should I use grid system with row and col for all content within container-CodePudding

I have been using bootstrap 5 and and typically use row and col classes for all the content

e.g

<main >
  <div >
      <div >
          <h4>
              Years / 1962
          </h4>
      </div>
  </div>
  <div >
      <div >
          <h5 id="counter">
          </h5>
      </div>
  </div>
  <div >
      <div >
          <select id="media_players_list" style="display: inline" >
          </select>
      </div>
      <div >
          <span>
              <button onclick="play()" >
                  Play
              </button>
              <button onclick="pause()" >
                  Pause
              </button>
              <button onclick="stop()" >
                  Stop
              </button>
              <button onclick="seek()" >
                  Seek
              </button>
              <button onclick="seek()" >
                  Open Playlist
              </button>
          </span>
      </div>
  </div>
</div>

But realized sometimes not using row and col, generally when there would be only a single element for a row

e.g

<main >
    <div >
        <div >
            <h5 >
                SongKontrol
            </h5>
            <p >
                Use the <i>Browse</i> menu to find and play your music
            </p>
        </div>
    </div>
    <div >
        Within <a href="/preferences.start" >Preferences</a> please configure the <i>MinimServer ContentDir</i> to enable editing your metadata from SongKontrol using SongKong
    </div>
</main>

Of course both are valid html but to match Bootstrap guidelines (to ensure works nicely) is the second case wrong, should I be using row and col here as well, or is it fine?

CodePudding user response：

There is no right or wrong in this as long as the bottom code snippet conforms with the style guidelines of the rest of the project.

In general, bootstrap is a tool that is supposed to make your life easier. The only thing row and col do is create a wrapper of the flexbox model, so you have to write less CSS.

Here is one thing to consider though:

Not using row and col, every time you want to create a flex layout, means that whenever you try to make general layout changes to your whole project it can cause issues.

Let's say you change your bootstrap breakpoints in your theme, your rows and col will adapt just fine, but any other layout will have to be touched separately.

Since I assume all the elements in your latter example are 100% width this won't be an issue for you.

What would I do?

Not that it really matters what I would do, but I would just use rows/cols every time it is viable, I just like consistency in my code.