CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgridcol
Reminder
Reminder

Reputation: 21

Bootstrap-framework - col-sm - grid for small screens doesn't work

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

Upvotes: 2

Views: 1306

Answers (1)

Sercan
Sercan

Reputation: 5081

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>

Upvotes: 4

Related Questions