I'm struggling to create 16 squares on my website using Bootstrap, but it's not working as expected. I tried using "col-xs-3" for the width, but it's not setting correctly. Can someone please assist?
PS (I know I could customize the width in CSS, but ideally, I shouldn't have to)
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="resources/css/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="resources/css/style.css">
<title>Match Game</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="gameInstructions col-sm-12 col-md-3">
<h1>Match Game</h1>
<h2>Rules</h2>
<p>Click on a card to reveal the number on the other side. Click on a second card to try and find a match to the first. If you succeed, the pair will be removed from play. If not, try again!</p>
<h2>How To Win</h2>
<p>You win when all pairs have been found.</p>
</div>
<div id="game"class="col-sm-12 col-md-9">
<div class="row">
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="./resources/js/match-game.js"></script>
<script type="text/javascript" src="./resources/js/tests.js"></script>
</body>
</html>
/*"Work Sans" Font*/
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: local('Work Sans'), local('WorkSans-Regular'), url(https://fonts.gstatic.com/s/worksans/v5/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
...
The desired outcome should be 16 squares each with 25% width and a height of 12.5rem.