2

I've been trying a lot of things but couldn't find the solution to my problem.

I want to align 3 different parts in a certain way for all kind of screens but col-sm and col-xs from bootstrap are not working.

I've tried this :

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            a           
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
            b
        </div>
        <div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
            c
        </div>
    </div>
</div>

But it only displays on the same line for large and medium screens, not on small screens.

The only way I've found to make it work was to write col instead of col-sm-4 but if I do so, I can't manipulate the grid exactly as I would like

Reminder
  • 21
  • 1
  • there is no `col-xs`, you should start with the small view as `col-` then only include the class when columns change. So, `col-lg-4 col-md-4 col-sm-6 col-xs-6` should be `col-md-4 col-6`. You dont have to define every breakpoint if there is no change – zgood Jan 11 '22 at 20:16

1 Answers1

4

To solve the problem when the width is less than 576px, you should apply the col-4 style.

enter image description here

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            a           
        </div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-6 col-xl-6">
            b
        </div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">
            c
        </div>
    </div>
</div>
Sercan
  • 4,739
  • 3
  • 17
  • 36
  • there is no `col-xs`, the OP want those as the less than 576px, so it should be `col-4`, `col-6`, then last column is `col-2` – zgood Jan 11 '22 at 20:18
  • @zgood I noticed. I didn't specify this detail as I was only focusing on the problem. – Sercan Jan 11 '22 at 20:19
  • Thanks, it's working quite well ! Do you know why we have to add this and why col-sm is not working as expected ? – Reminder Jan 11 '22 at 20:21
  • I understand, I just thought it was worth a mention as it does relate to the problem - he was using the wrong `col` class – zgood Jan 11 '22 at 20:21
  • @Reminder If you examine the table, the col-sm style is valid when the screen width is between 576px and 720px. – Sercan Jan 11 '22 at 20:22
  • @Sercan Oh ok, so I had obviously to refer to "Extra small" screen for my problem and col-xs doesn't exist anymore, that's why it was not working. Thanks a lot ! – Reminder Jan 11 '22 at 20:25