0

I have the following bootsrap grid on my site. It works well for large and medium screen sizes but on a mobile/smaller screen I'm only seeing 1 item - basically all the columns are stacked on smaller screens. It's like the browser is not respecting the "col-xs-6" class in the column.

Any ideas of how I can troubleshoot this? I've tried to look at inspector but I'm pretty lost.

I'm using a Bootswatch v5.1.1 template called Darkly if that makes any difference.

 <div class="container-fluid">
  <h1>new and trending</h1>
  <div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
    <div class="col-xs-6 col-md-4 col-lg-2">column</div>
  </div>
</div>
bazmattaz
  • 123
  • 2
  • 9

1 Answers1

-1

According to bootstrap documentation. XS means Extra Small Devices. For testing xs grid you have to test with device width 576px or less than(<576px). And finally you have to write just col not col-xs. Change your code

change your code to-

<div class="container-fluid">
  <h1>new and trending</h1>
  <div class="row">
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
    <div class="col-6 col-md-4 col-lg-2">column</div>
  </div>
</div>

You can visit Bootstrap Documentation

Siam Ahnaf
  • 402
  • 4
  • 14
  • thanks for your reply. The answer was that col-xs is not supported in Bootstrap 4/5 so thats why it wasnt working – bazmattaz Sep 17 '21 at 19:01
  • Thanks you very much. If it is helpful for you, Please accept my answer to spread everyone. And Please vote me. – Siam Ahnaf Sep 18 '21 at 17:46