Dynamic Bootstrap Grid Layout Generator – json2bootgrid

Category: Javascript , Layout | January 29, 2020
Author: 99xt-incubator
Views Total: 253 views
Official Page: Go to website
Last Update: January 29, 2020
License: MIT

Preview:

Dynamic Bootstrap Grid Layout Generator – json2bootgrid

Description:

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);

You Might Be Interested In:


Leave a Reply