How to design the bootstrap columns dynamically in php ?
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
$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'
)
);
foreach ( $columns as $column ) {
$colSize = $column [ 'size' ];
$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 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
$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'
)
);
foreach ( $columns as $column ) {
$colSize = $column [ 'size' ];
$colContent = $column [ 'content' ];
$colBg = $column [ 'background' ];
echo generateColumn( $colSize , $colContent , $colBg );
}
?>
</div>
</div>
</body>
</html>
|
Output:
design the bootstrap columns dynamically in php
Last Updated :
10 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...