I am currently working with bootstrap and I am trying to divide a row into 2 columns when viewed on a mobile device. Below is the code snippet I have:
<!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>
Although the code displays correctly in medium view, it does not work as expected in mobile view. The columns take up the full line space instead of dividing the width evenly.
If you have any insights on what might be causing this issue and how to resolve it, please let me know. Thank you!