0

Grid sistem doesn`t work on mobile: .col-xs-3 is on full screen, col-xs-3 works like col-xs-12, any ideias?

<div class="container">

      <div class="row">
      
        <div class="col-md-1 col-xs-3">
          <a href="#">
            <img src="/.."  />
          </a>
        </div>
        
        <div class="col-md-1 col-xs-3">
          <a href="#">
            <img src="/.."  />
          </a>
        </div>
        
        <div class="col-md-1 col-xs-3">
          <a href="#">
            <img src="/.."  />
          </a>
        </div>
        ...
        
    </div>
      
</div>
Gigi
  • 375
  • 1
  • 4
  • 12

2 Answers2

2

1) If the bootstrap version your are using is 4, In bootstrap 4 there is no xs breakpoint. Instead the xs breakpoint is the default and for other breakpoints you must use breakpoints. so for example if you want 3 on mobile and 1 on md and above you must say

col-3 col-md-1

2) Please do check that the required meta tags is on the head section of your code i.e.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Behnam Mirzabeygi
  • 396
  • 3
  • 8
0

Are you certain that bootstrap is linked and that you're using chrome on your mobile device?

Steven Kaufman
  • 59
  • 1
  • 5