Sahil shaikh
Sahil shaikh

Reputation: 69

How to keep the grid with 3 columns per row in mobile - Bootstrap 4

I want to break row in 3 columns in mobile, desktop, etc. but currently, in mobile, it only shows 1 column per row.

                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            demotext1
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            demotext1
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                            demotext1
                        </div>
                    </div>
             </div>

Upvotes: 0

Views: 1720

Answers (1)

krishna
krishna

Reputation: 1029

<div class="container">
   <div class="row">
       <div class="col-lg-4 col-md-4 col-sm-4 col-4">
             demotext1
       </div>
       <div class="col-lg-4 col-md-4 col-sm-4 col-4">
             demotext1
       </div>
       <div class="col-lg-4 col-md-4 col-sm-4 col-4">
             demotext1
       </div>
   </div>
</div>

In bootstraph 4 col-xs-4 is replaced with col-4

Upvotes: 3

Related Questions