<head>
<meta charset="UTF-8">
<title>Bootstrap Components</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="my-5 border-0">
<div class="row">
<div class="col-12 col-md-4">
<a href="#">
<img src="http://via.placeholder.com/400x250" class="img-fluid" alt="placeholder">
</a>
</div>
<div class="col-12 col-md-8 d-flex flex-column justify-content-center">
<a href="#"><h4>Product name – <span class="text-primary">99<sup>,99</sup>€ </span></h4></a>
<p class="text-muted small">Category : Miscellaneous, Location : Paris, Posted on : 07/02/2018 13:37</p>
<p class="short-desc text-justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aut, blanditiis. Amet architecto
autem beatae cupiditate dignissimos, distinctio dolor dolorum eius enim facilis illum inventore
labore laudantium modi natus necessitatibus odio perferendis placeat quis sit tempora velit
vero.
<span class="text-muted">[...]</span>
</p>
<div class="seller">
<a href="#" class="d-inline d-flex flex-row align-items-center">
<img src="http://via.placeholder.com/30" class="img-fluid rounded-circle">
<p class="m-0 p-0 ml-2">Jane Doe <span class="text-muted small">- 4.8/5 (364 votes)</span>
</p>
</a>
</div>
</div>
</div>
</div>
<div class="my-5 border-0">
<div class="row">
<div class="col-12 col-md-4">
<a href="#">
<img src="http://via.placeholder.com/400x250" class="img-fluid" alt="placeholder">
</a>
</div>
<div class="col-12 col-md-8 d-flex flex-column justify-content-center">
<a href="#"><h4>Product name – <span class="text-primary">99<sup>,99</sup>€ </span></h4></a>
<p class="text-muted small">Category : Miscellaneous, Location : Paris, Posted on : 07/02/2018 13:37</p>
<p class="short-desc text-justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aut, blanditiis. Amet architecto
autem beatae cupiditate dignissimos, distinctio dolor dolorum eius enim facilis illum inventore
labore laudantium modi natus necessitatibus odio perferendis placeat quis sit tempora velit
vero.
<span class="text-muted">[...]</span>
</p>
<div class="seller">
<a href="#" class="d-inline d-flex flex-row align-items-center">
<img src="http://via.placeholder.com/30" class="img-fluid rounded-circle">
<p class="m-0 p-0 ml-2">Jane Doe <span class="text-muted small">- 4.8/5 (364 votes)</span>
</p>
</a>
</div>
</div>
</div>
</div>
<div class="my-5 border-0">
<div class="row">
<div class="col-12 col-md-4">
<a href="#">
<img src="http://via.placeholder.com/400x250" class="img-fluid" alt="placeholder">
</a>
</div>
<div class="col-12 col-md-8 d-flex flex-column justify-content-center">
<a href="#"><h4>Product name – <span class="text-primary">99<sup>,99</sup>€ </span></h4></a>
<p class="text-muted small">Category : Miscellaneous, Location : Paris, Posted on : 07/02/2018 13:37</p>
<p class="short-desc text-justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aut, blanditiis. Amet architecto
autem beatae cupiditate dignissimos, distinctio dolor dolorum eius enim facilis illum inventore
labore laudantium modi natus necessitatibus odio perferendis placeat quis sit tempora velit
vero.
<span class="text-muted">[...]</span>
</p>
<div class="seller">
<a href="#" class="d-inline d-flex flex-row align-items-center">
<img src="http://via.placeholder.com/30" class="img-fluid rounded-circle">
<p class="m-0 p-0 ml-2">Jane Doe <span class="text-muted small">- 4.8/5 (364 votes)</span>
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.