My Bootstrap 4 responsive column layout not working

Question

So I made a very simple responsive website layout using Bootstrap 4 so according to the code the no of columns should become 4 when it enters tablet mode ie when the viewport is

Answer 1

Unlike Bootstrap 3, Bootstrap 4 has a bit different grid system. Here sm starts to act since <768px. and the xs breakpoint now is just col. Here, rewritten a bit.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
  </div>
</div>

Answer 2

I hope I understand what you are asking. This should prevent the elements from going to fullscreen before the viewport gets even smaller

<div class="row">
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
</div>

just a reminder for breakpoints, the size(sm/lg) specifies the size of the page that the rule applies to. The rule starts with the smallest size and applies to its size and sizes bigger than it that do not have a rule. The default column size is 12, so that does not need to be specified.

Answer 3

You are using col-lg-2 col-md-3 col-sm-12 classes if you want same view to mobile devices too just use col, like col-3. if you want full width for smallest devices use col-xs-12 it is not important, default is col-xs-12 you can change it col-xs-6 something like that.

Answer 4

Try this, it may solve your problem:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-3" style="background-color:red;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:green;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:pink;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:yellow;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:white;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:orange;">
             col
        </div>
    </div>
</div>

This code will keep only 4 col in the tablet mood and phone mode, but if you want to keep 4 col in pc views too then just remove the col-lg-2 from each class