-7

I am building a static e-commerce website using bootstrap. I want 2 product in a row while it opens in the phone and 4 product in a row while open in desktop or i-pad. 

<div class="container">

 <div class="row product">
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="image">
            <a href="products.php?q=10020" target="_blank"><img id="10030" src="#"></a>
        </div>
    </div>
 </div>

There is more than 1 row on this page. please help me to solve this.

Udit Agrawal
  • 39
  • 5
  • 8
    Read the [Bootstrap docs](https://getbootstrap.com/docs/4.0/layout/overview/) for how to use the `col` classes. – yaakov Feb 15 '18 at 14:15
  • This is exactly what the Boostrap grid system was built for: https://v4-alpha.getbootstrap.com/layout/grid/ – Rory McCrossan Feb 15 '18 at 14:16
  • Read the use of `-lg- `, `-md-`, `-sm-` etc and hopefully you can find your answer. There is also a demo in W3school see it. – Wahid Masud Feb 15 '18 at 14:21
  • I know this is a bootstrap grid system. But I can use 4 col-sm-6 under a single row. – Udit Agrawal Feb 15 '18 at 14:29
  • Yes, use `col-sm-6 col-md-3`. It's fine to have [more than 12 column units in a row](https://stackoverflow.com/questions/26679160/bootstrap-3-more-than-12-columns-in-a-row). – Carol Skelly Feb 15 '18 at 14:41

1 Answers1

0

the issue that you are having is because of your bootstrap grid.

I made an example below. Pay attention to: class="col-xs-6 col-md-3"

Here are the docs. https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3" style="background-color:green;">1</div>
<div class="col-xs-6 col-md-3" style="background-color:blue;">2</div>
<div class="col-xs-6 col-md-3" style="background-color:red;">3</div>
<div class="col-xs-6 col-md-3" style="background-color:yellow;">4</div>
</div>
</div>

</body>
</html>
hhh_
  • 310
  • 2
  • 5
  • 17