CODEWITHSUNDEEP
twitter-bootstrapbootstrap-5
Paul Taylor
Paul Taylor

Reputation: 13150

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

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

e.g

<main class="container-fluid">
  <div class="row g-0">
      <div class="col mx-2">
          <h4>
              Years / 1962
          </h4>
      </div>
  </div>
  <div class="row g-0">
      <div class="col mx-2">
          <h5 id="counter">
          </h5>
      </div>
  </div>
  <div class="row g-0">
      <div class="col-4 m-2">
          <select id="media_players_list" style="display: inline" class="form-select mx-1 my-2">
          </select>
      </div>
      <div class="col m-2">
          <span>
              <button onclick="play()" class="btn btn-outline-primary mx-1 my-2">
                  Play
              </button>
              <button onclick="pause()" class="btn btn-outline-secondary mx-1 my-2">
                  Pause
              </button>
              <button onclick="stop()" class="btn btn-outline-secondary mx-1 my-2">
                  Stop
              </button>
              <button onclick="seek()" class="btn btn-outline-secondary mx-1 my-2">
                  Seek
              </button>
              <button onclick="seek()" class="btn btn-outline-secondary mx-1 my-2">
                  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 class="container-fluid">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">
                SongKontrol
            </h5>
            <p class="card-text">
                Use the <i>Browse</i> menu to find and play your music
            </p>
        </div>
    </div>
    <div class="alert alert-warning">
        Within <a href="/preferences.start" class="h6">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?

Upvotes: 0

Views: 473

Answers (1)

niklasbec
niklasbec

Reputation: 1044

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.

Upvotes: 1

Related Questions