<html>
<head>
<title>Pagina magazin online</title>
</head>
<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">
<style>
.row > div {
border: 1px solid black;
width:5px;
}
img {
width:250px;
height:250px;
}
div button{
margin-top:10px;
}
</style>
<body>
<div class="container">
<h1>Nume categorie</h1>
<h2>Nume subcategorie</h2>
<div class="row mx-auto text-center">
<div class="col-6 col-md-4">
<div class="col align-self-center">
<img class="img-thumbnail" src="img1.jpg"/>
</div>
<h3>Produs 1</h3>
<p>DESCRIEREA</p>
<span>100 lei</span>
<div class="col align-self-center">
<button type="button" class="btn btn-warning">BUY</button>
</div>
</div>
<div class="col-6 col-md-4">
<div class="col align-self-center">
<img class="img-thumbnail" src="img1.jpg"/>
</div>
<h3>Produs 2</h3>
<p>DESCRIEREA</p>
<span>100 lei</span>
<div class="col align-self-center">
<button type="button" class="btn btn-warning">BUY</button>
</div>
</div>
<div class="col-6 col-md-4">
<div class="col align-self-center">
<img class="img-thumbnail" src="img1.jpg"/>
</div>
<h3>Produs 2</h3>
<p>DESCRIEREA</p>
<span>100 lei</span>
<div class="col align-self-center">
<button type="button" class="btn btn-warning">BUY</button>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------
P.s. Descarca imaginea de mai jos pentru a vedea efectul codului.
