CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Jack
Jack

Reputation: 15

Bootstrap 5 columns per row on desktop, 3 on table, 2 on mobile?

I am trying to make bootstrap 5 columns per row on desktop, 3 on table, 2 on mobile?

Here is my current code, not having any luck:

<div class="row row-cols-5">
    <div class="col col-xs-6">
        R1
    </div>
    <div class="col col-xs-6">
        R2
    </div>
    <div class="col col-xs-6">
        R3
    </div>
    <div class="col col-xs-6">
        R4
    </div>
    <div class="col col-xs-6">
        R5
    </div>
</div>

How do I do this properly? Thanks!

Upvotes: 0

Views: 1294

Answers (2)

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

I think you can do like this.

<div class="row row-cols-lg-5">
    <div class="col-md-4 col-sm-6 col-6">
        1
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        2
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        3
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        4
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        5
    </div>
</div>

For more about bootstrap grid, please see bootstrap grid.

Upvotes: 0

tony
tony

Reputation: 614

<div class="row row-cols-lg-5">
    <div class="col-md-4 col-sm-6 col-6">
        1
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        2
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        3
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        4
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        5
    </div>
</div>

Upvotes: 3

Related Questions