Draw the Bootstrap grid as a full page overlay

draw-bootstrap-grid.js

var grid = 12
var cols = document.createDocumentFragment()

var col = document.createElement('div')
col.style.cssText =  `height: ${document.documentElement.scrollHeight}px; width: calc(100% / ${grid}); background-color: rgba(240, 128, 128, 0.3);`
var innerCol = document.createElement('div')
innerCol.style.cssText =  `height: ${document.documentElement.scrollHeight}px; width: calc(100% - 30px); margin: auto 15px; background-color: rgba(244, 0, 0, 0.1); position: relative;`
col.appendChild(innerCol)

for (var i, i = 1; i <= grid; i++) {
  var el = col.cloneNode(true)
  el.querySelector('div').innerHTML = `<div style="display: flex;justify-content: center;">${i}</div>`
  cols.appendChild(el)
}

var overlay = document.createElement('div')
overlay.style.cssText =  `height: ${document.documentElement.scrollHeight}px; width: 100%; position: fixed; top: 0; left: 0; z-index: 9999; opacity: 0.5;`

var container = document.createElement('div')
container.className = 'container'
var row = document.createElement('div')
row.className = 'row'

row.appendChild(cols)
container.appendChild(row)
overlay.appendChild(container)

document.body.appendChild(overlay)