Bootstrap 8 colums in a row on Desktop screens, but just 3 on mobile-CodePudding

I needed to create 8 columns (using Bootstrap 5) in a row for logos and did that like this:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
          <div >
            <div >
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
            </div>
          </div>
          <div >
            <div >
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
              <div >
                <img src="https://via.placeholder.com/500x300" alt=""  />
              </div>
            </div>
          </div>
        </div>

I now need to create a row with 3 columns for each logo for mobile devices. Basically, I guess I need to find a way to remove the second row for small devices. I have no idea how to do this.

CodePudding user response：

You don't have to use two rows and cols. simply try it in one row and can change xs and sm depending on your screen size.

<div >
  <div >
    1
  </div>
  <div >
    2
  </div>
  <div >
    3
  </div>
  <div >
    4
  </div>
  <div >
    5
  </div>
  <div >
    6
  </div>
  <div >
    7
  </div>
  <div >
    8
  </div>
</div>

CodePudding user response：

You can do it using Breakpoints.

Use Justify content for screens that are "medium" or larger and col-sm-4 for "small" screens :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
  <div >Image 1</div>
  <div >Image 2</div>
  <div >Image 3</div>
  <div >Image 4</div>
  <div >Image 5</div>
  <div >Image 6</div>
  <div >Image 7</div>
  <div >Image 8</div>
</div>

CodePudding user response：

change to it will work sm is used for small device like tab and col is for Extra small