PHP show images in grid form using bootstrap 5

To display images in a grid using Bootstrap 5, you can use the grid system which includes predefined classes for easy layout options. Here’s an example of how you can display images in a grid with different numbers of images per row based on the screen size:

<?php
$dir_path = 'path/to/your/images/';
$files = glob($dir_path.'*.{jpg,jpeg,png}', GLOB_BRACE);
?>

<div class="container">
    <div class="row">
        <?php foreach ($files as $file): ?>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="<?php echo $file ?>" class="img-fluid">
            </div>
        <?php endforeach; ?>
    </div>
</div>

In this code:

• col-12 makes the image take the full width of the screen on extra small devices (less than 576px).
• col-sm-6 makes the image take half the width of the screen on small devices (greater than 576px).
• col-md-4 makes the image take one-third of the width of the screen on medium devices (greater than 768px).
• col-lg-3 makes the image take one-fourth of the width of the screen on large devices (greater than 992px).

This will create a responsive image grid that adjusts the number of images per row based on the screen size.

This content was generated by Microsoft Bing. (source)