Open In App

How to design the bootstrap columns dynamically in php ?

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 10 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads