CODEWITHSUNDEEP
htmlcssbootstrap-5
lukas23
lukas23

Reputation: 123

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

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 class="row gy-3 px-5 pt-4">
          <div class="col-md-6 col-12">
            <div class="row gy-3">
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
            </div>
          </div>
          <div class="col-md-6 col-12">
            <div class="row gy-3">
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </div>
              <div class="col-md-3 col-4">
                <img src="https://via.placeholder.com/500x300" alt="" class="w-100" />
              </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.

Upvotes: 1

Views: 605

Answers (3)

coder_000_
coder_000_

Reputation: 99

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 class="row gy-3">
  <div class="col col-xs-4">
    1
  </div>
  <div class="col col-xs-4">
    2
  </div>
  <div class="col  col-xs-4">
    3
  </div>
  <div class="col  col-xs-4">
    4
  </div>
  <div class="col  col-xs-4">
    5
  </div>
  <div class="col  col-xs-4">
    6
  </div>
  <div class="col col-xs-4">
    7
  </div>
  <div class="col col-xs-4">
    8
  </div>
</div>

Upvotes: 3

Arun S Kurup
Arun S Kurup

Reputation: 1

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

Upvotes: 0

Tom
Tom

Reputation: 5667

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 class="row justify-content-md-between">
  <div class="col-md-auto col-sm-4">Image 1</div>
  <div class="col-md-auto col-sm-4">Image 2</div>
  <div class="col-md-auto col-sm-4">Image 3</div>
  <div class="col-md-auto col-sm-4">Image 4</div>
  <div class="col-md-auto col-sm-4">Image 5</div>
  <div class="col-md-auto col-sm-4">Image 6</div>
  <div class="col-md-auto col-sm-4">Image 7</div>
  <div class="col-md-auto col-sm-4">Image 8</div>
</div>

Upvotes: 1

Related Questions