How to show cards with responsive design using bootstrap 5-CodePudding

Trying to show cards with responsive for mobile, desktop, iPad. I want to show

For mobile one column.

For iPad two column.

For desktop four column.

But below the code is working only for mobile and desktop, Not working for iPad. In my iPad 4 column is showing .But I want to show in my iPad 2 column. So, How to write CSS for iPad? If anyone knows please help to find the solution.

CSS:

<div class="col-md-12"> 
<div class="row grid">

<div class="col-lg-3 col-md-4"> Card 1 </div>
<div class="col-lg-3 col-md-4"> Card 2 </div>
<div class="col-lg-3 col-md-4"> Card 3 </div>
<div class="col-lg-3 col-md-4"> Card 4 </div>
<div class="col-lg-3 col-md-4"> Card 5 </div>
<div class="col-lg-3 col-md-4"> Card 6 </div>
<div class="col-lg-3 col-md-4"> Card 7 </div>
<div class="col-lg-3 col-md-4"> Card 8 </div>
<div class="col-lg-3 col-md-4"> Card 9 </div>
<div class="col-lg-3 col-md-4"> Card 10 </div>
<div class="col-lg-3 col-md-4"> Card 11 </div>
<div class="col-lg-3 col-md-4"> Card 12 </div>
<div class="col-lg-3 col-md-4"> Card 13 </div>
<div class="col-lg-3 col-md-4"> Card 14 </div>
 
</div> 
</div>

CodePudding user response：

Boostrap's documentation has examples of this.

Since bootstrap uses a 12 column grid system, use the following:

col-lg-3 - for four columns, 12 / 4 == 3
col-md-6 - for two columns, 12 / 2 == 6
col-xs-12 - for one column, 12 / 12 == 1

See the grid-options section of the docs for details on what screen sizes lg, md, xs, and more cover

div {
  border: 1px dashed lightblue;
}

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

<div class="col-md-12">
  <div class="row grid">
    <div class="col-xs-12 col-md-6 col-lg-3">Card 1</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 2</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 3</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 4</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 5</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 6</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 7</div>
    <div class="col-xs-12 col-md-6 col-lg-3">Card 8</div>
  </div>
</div>