You can use Bootstrap 4 which is the current version of CSS framework but not an only option. Without BS you will have terrible CSS code that might make your browser load slowly. It is just a contribution of CSS to browser and one of the factor why browsers load slowly (like 5%) Hence BS could be better alternative. This will actually help you build more responsive web page.
The image and its description is within a card which is a bootstrap utility.
Note: The cards are displayed vertically on small screens (less than 576px). Hence if you run this snippet you might get this stacked. For better resolution and its output please run it in your browser. Also, please increase the height of the card by applying required CSS selector and height to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-columns">
<div class="card bg-default">
<div class="card-body text-center">
<img src="https://stackoverflow.com/questions/59801729/file:///C:/azizaymen/images-B/hp.jpg">
<br>
<p>HP</p>
</div>
</div>
<div class="card bg-default">
<div class="card-body text-center">
<img src="file:///C:/azizaymen/images-B/asus.jpg">
<br>
<p>ASUS</p>
</div>
</div>
<div class="card bg-default">
<div class="card-body text-center">
<img src="file:///C:/azizaymen/images-B/apple.jpg">
<br>
<p>HP</p>
</div>
</div>
<div class="card bg-default">
<div class="card-body text-center">
<img src="file:///C:/azizaymen/images-B/o5.jpg">
<br>
<p>lenovo</p>
</div>
</div>
<div class="card bg-default">
<div class="card-body text-center">
<img src="https://stackoverflow.com/questions/59801729/file:///C:/azizaymen/images-B/hp.jpg">
<br>
<p>Dell</p>
</div>
</div>
<div class="card bg-default">
<div class="card-body text-center">
<img src="file:///C:/azizaymen/images-B/huawei.jpg">
<br>
<p>huawei</p>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.
3
solved how to order a HTML page by