Lemec Cinq
Lemec Cinq

Reputation: 301

bootstrap: col-xs-6 are displayed in width 100% in a mobile view

I am using bootstrap I want to split a row in 2 columns when I display a mobile view I have the code bellow:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
   

    <title>test mobile</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6 col-sm-8 ">col-xs-6 col-sm-8</div>
        <div class="col-xs-6 col-sm-4 ">col-xs-6 col-sm-4</div>
      </div>
      </div>
  </body>
</html>

it display correctly the md view but in mobile view columns take the full line space instead of taking half the width enter image description here

Do you know what happens and how to solve it please?

Upvotes: 2

Views: 1753

Answers (1)

Harsha Limaye
Harsha Limaye

Reputation: 1135

If you are using the latest version of Bootstrap I think they have removed the xs class. Just use col-6 instead of col-xs-6 and you should be fine.

Upvotes: 3

Related Questions