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.
<!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">CodrGeek</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>
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
// 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">CodrGeek</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>