0

I have made an array of 30+ footballplayers, and was planning on printing them all to columns with a for-each loop, into a single row within a container with bootstrap grid.

FOR NOW I have just manually typed out a placeholder (the one with Steven Gerrard below) for testing and just copy/pasting them to see how the grid behaves with multiple columns, I will be using a foreach loop with object literals to fill the row's inner HTML later.

The thing is I am very new to bootstrap grids, and typing out all the sizes(see below) is the only way I was able to make it behave like I wanted it to.

Since I am a beginner I dont wanna waste any time on bad habits, so I was just wondering if typing out all the sizes like this is usually the way to go? It feels excessive, but also practical, so I just wanna check with u guys. Thanks.

Below is the relevant portion of my code.

<div class="container text-center">
   <div class="row">

      <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3" id="border">
         <h5>Steven Gerrard</h5>
         <p>England</p>
         <p>Liverpool</p>
         <img src="/images/player1.png">
      </div>

   <div>
<div>
nostrad0muz
  • 33
  • 5

1 Answers1

0

Pretty much, yes. However, in this case, there's no need to add the col-sm-12 as it is redundant due to the col-12. Bootstrap will copy over whatever col size you use from a smaller breakpoint to larger breakpoints unless you explictly tell it not to.

So for example if you want full width for all breakpoints except XL, you would just need to do:

col-12 col-xl-3

The docs has a bunch of tricks you can use for different use cases, I recommend browsing through it.

Ralph
  • 337
  • 4
  • 13