Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Draw the Bootstrap grid as a full page overlay
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment