4 columns in desktop, 3 in s-laptop, 2 in tablet and 1 in mobile using bootstrap-CodePudding

I wrote an HTML code with bootstrap. I want 4 columns in a row in desktop view, 3 columns in tablet view and 2 columns in tablet, 1 in mobile. I read other stack overflow questions but I did not get the answer/they did not have any description.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> پویان افتخاری - بوت استرپ</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
</head>

<body>
  <div >
    <div >box 1</div>
    <div >box 2</div>
    <div >box 3</div>
    <div >box 4</div>
  </div>
  <div >
    <div >box 5</div>
    <div >box 6</div>
    <div >box 7</div>
    <div >box 8</div>
  </div>
  <div >
    <div >box 9</div>
    <div >box 10</div>
    <div >box 11</div>
    <div >box 12</div>
  </div>
  <div >
    <div >box 13</div>
    <div >box 14</div>
    <div >box 15</div>
    <div >box 16</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

</html>

CodePudding user response：

The idea is that by default you have 12 columns. Now usually all you need as you said it, 1, 2, 3 or 4 columns for each row. So it all divides well.

The classes col-something-number are predefined to be 16.66% or 50% of the width, depending on the screen width and the number. So <div > means:

12/3 = 4 in a row when screen is xl
12/4 = 3 in a row when screen is lg
12/6 = 2 in a row when screen is md
12/12= 1 in a row when screen is sm

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />


<div >
  <div >
    <div >box 1</div>
    <div >box 2</div>
    <div >box 3</div>
    <div >box 4</div>

  </div>
</div>