How to design the bootstrap columns dynamically in PHP?

Last Updated : 22 Jul, 2024

In this article, we demonstrate creating dynamic Bootstrap columns using PHP, enabling responsive layouts. You’ll learn to use PHP loops and conditions to adjust column sizes based on content and screen size, ensuring flexible, adaptive web designs.

We will store the data for each of the bootstrap columns in a PHP array and then loop over the array to generate all the columns dynamically.

Example 1: Below is a basic example to show how to dynamically generate bootstrap columns in PHP.

PHP

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Columns Example</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <h5>Dynamically Generated Bootstrap Columns</h5>
        </div>
        <div class="row">
            <?php
                // Generate some sample data for the columns
                $columns = array(
                    array(
                        'size' => 6,
                        'content' => 'Column 1'
                    ),
                    array(
                        'size' => 6,
                        'content' => 'Column 2'
                    ),
                    array(
                        'size' => 4,
                        'content' => 'Column 3'
                    ),
                    array(
                        'size' => 8,
                        'content' => 'Column 4'
                    )
                );

                // Iterate over the columns and generate the HTML
                foreach ($columns as $column) {
                    // Get the size of the column (e.g. "6")
                    $colSize = $column['size'];
                    // Get the content of the column
                    $colContent = $column['content']; 
                ?>
                <div class="col-<?php echo $colSize; ?> 
                    bg-primary p-5 border border-5 border-light">
                    <?php echo $colContent; ?>
                </div>
            <?php } ?>
        </div>
    </div>
</body>
</html>

Output:

design the bootstrap columns dynamically in php

Example 2: In this example, we created a separate function that takes the size, content, and background color of the columns as the parameter and generates the HTML for the column.

PHP

<?php

    // Function to generate HTML for a Bootstrap column
    function generateColumn($size, $content, $bg)
    {
        $html = '<div class="col-' . $size . 
        ' bg-' . $bg  . ' p-3 border border-5">';
        $html .= $content;
        $html .= '</div>';
        return $html;
    }
?>
<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap Columns Example</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet"  href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="my-4">
            <h1 class="text-success">GeeksforGeeks</h1>
            <h5>Dynamically Generated Bootstrap Columns</h5>
        </div>

        <div class="row">
            <?php
            // Generate some sample data for the columns
            $columns = array(
                array(
                    'size' => 6,
                    'content' => 'Column 1',
                    'background' => 'primary'
                ),
                array(
                    'size' => 6,
                    'content' => 'Column 2',
                    'background' => 'warning'
                ),
                array(
                    'size' => 4,
                    'content' => 'Column 3',
                    'background' => 'info'
                ),
                array(
                    'size' => 8,
                    'content' => 'Column 4',
                    'background' => 'success'
                )
            );

            // Iterate over the columns and generate the HTML
            foreach ($columns as $column) {
                // Get the size of the column (e.g. "6")
                $colSize = $column['size']; 
                // Get the content of the column
                $colContent = $column['content']; 
                // Get the background of the column
                $colBg = $column['background']; 
                echo generateColumn($colSize, $colContent, $colBg);
            }
            ?>
        </div>
    </div>
</body>
</html>