Skip to content
Related Articles
Open in App
Not now

Related Articles

How to design the bootstrap columns dynamically in php ?

Improve Article
Save Article
  • Last Updated : 10 Jan, 2023
Improve Article
Save Article

Bootstrap is a CSS framework to rapidly develop web applications without writing an element’s entire CSS and JavaScript. Developers can use the prebuilt grid layout, components, etc. in their projects. 

In this article, we will see how to design the bootstrap columns in PHP dynamically.

Approach: 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=
</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

 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=
</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>

Output:

 design the bootstrap columns dynamically in php

 design the bootstrap columns dynamically in php


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!