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

Questions

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

July 11, 2022

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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
</head>

<body>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">box 1</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 2</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 3</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">box 5</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 6</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 7</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 8</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">box 9</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 10</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 11</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 12</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">box 13</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 14</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 15</div>
    <div class="col-md-3 col-sm-6 col-xs-12">box 16</div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

</html>

>Solution :

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 class="col-xl-3 col-lg-4 col-md-6 col-sm-12"> 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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />


<div class="container">
  <div class="row">
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 1</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 2</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 3</div>
    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">box 4</div>

  </div>
</div>