Dynamic Bootstrap Grid Layout Generator – json2bootgrid

json2bootgrid is a dependency-free Bootstrap plugin that dynamically generates a Bootstrap grid layout from JSON or JavaScript objects.

How to use it:

1. Include the necessary Bootstrap’s stylesheet on the page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Create a placeholder element for the grid layout.

<div id="app"></div>

3. Include the json2bootgrid.js at the bottom of the webpage.

<script src="./src/json2bootgrid.js"></script>

4. Create rows and specify the number of columns & background color for each row as follows:

let a = {
    rows: [
      {
        columns: [
          {
            text: 'col 1',
            width: 6,
            color: 'green'
          },
          {
            text: 'col 2',
            width: 6,
            color: 'yellow'
          }
        ]
      },
      {
        columns: [
          {
            text: 'col 1',
            width: 3,
            color: 'green'
          },
          {
            text: 'col 2',
            width: 9,
            color: 'yellow'
          }
        ]
      },
      {
        columns: [
          {
            text: 'col 1',
            width: 4,
            color: 'green'
          },
          {
            text: 'col 2',
            width: 8,
            color: 'yellow'
          }
        ]
      }
    ]
}

5. Generate a grid layout on the page. Done.

document.getElementById('app').innerHTML = json2bootgrid(a);