CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
DilJay
DilJay

Reputation: 11

Bootstrap columns in Mobile view

I want 3 columns in mobile view add one and two rows fullwidth in ipad view. I think there are some changes in bootstrap new version. but it's not clear to me. Can anyone explain ? Here is my code

<html lang='en'>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
 rel="stylesheet" integrity="sha384- 
 giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 </head>

 <body>

 <div class="container-fluid">

 <div class="row">
    <div class="col-xs-2 col-md-2 bg-danger"> one </div>
    <div class="col-xs-2 col-md-8 bg-warning"> two </div>
    <div class="col-md-2 bg-danger"> three </div>
 </div>

</div>



  <script src="https://cdn.jsdelivr.net/npm/[email protected] 
  beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384- 
  ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
  </script>

 </body>
 </html>

Upvotes: 0

Views: 80

Answers (1)

David Liang
David Liang

Reputation: 21546

I think you're still using syntax from Bootstrap 3. col-xs-* has gone long time ago:

xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).

https://getbootstrap.com/docs/4.5/migration/#grid-system

Back to your problem. Just change col-xs-* to just col-* would fix it.

Upvotes: 1

Related Questions