jQuery Bootstrap 3 web browser grid. Must be added in html body after jquery link.

js

/* Visual Bootstrap 3 grid by PixelSPB, v. 1.0b В© 2018, All rights reserved */

jQuery(document).ready(function($) {
	
	var cols = 12; // numCols
	
	$('head').append('<style>.showHideVisualGrid{display:none;}\n.pixelGridShowHide input[type="checkbox"] {margin: 0; width: auto !important; height: auto !important; margin-right: 10px !important;}\n.pixelVisualGrid{top:0; bottom:0; left:0; right:0; z-index:9997; display:none; position:fixed;}\n.pixelVisualGrid.showVisualGrid{display:block;}\n.v100{height: 100vh;}\n.pixelVisualGrid .visualGridContentZone{background:#ffb600;}\n.pixelVisualGrid .colWhiteSpace{background:#ebebeb; opacity:0.3;}\n.pixelVisualGrid .colWhiteSpace.transparentWhiteSpace{background:transparent;}\n.pixelGridColNumHide{display:none;}\n.pixelVisualGrid.grayscale .visualGridContentZone{background:#bfbfbf}\n.showHideVisualGrid{position:fixed;	top:0; right:0; z-index:9998; padding:20px; background:#fff; border-radius: 0 0 0 10px;}\n.pixelGridShow{width:30px; height:30px; position:fixed; z-index:9999; top:0; right:0;}\n.showHideVisualGrid.pixelVisualGridVisible{display:block;}</style>')
	$('body').prepend('<div class="position-fixed pixelVisualGrid"></div>');
	$('body').prepend('<div class="pixelGridShow"></div>');
	$('.pixelVisualGrid').append('<div class="container v100"></div>');
	$('.pixelVisualGrid .container.v100').append('<div class="row txtCenter position-relative v100"></div>');
	$('body').append('<div class="showHideVisualGrid"></div>');
	$('.showHideVisualGrid').append('<div class="pixelGridShowHide"></div>');
	$('.pixelGridShowHide').append('<div><input type="checkbox" id="showPixelGrid"/><label for="showPixelGrid">Grid</label></div>');
	$('.pixelGridShowHide').append('<div><input type="checkbox" id="showPixelGridPaddings"/><label for="showPixelGridPaddings">Padding fill</label></div>');
	$('.pixelGridShowHide').append('<div><input type="checkbox" id="showPixelGridColNum"/><label for="showPixelGridColNum">Column numbers</label></div>');
	$('.pixelGridShowHide').append('<div><input type="checkbox" id="showPixelGridGrayScale"/><label for="showPixelGridGrayScale">Grayscale</label></div>');
	
	for (i = 0; i < cols; i++) {
		currentCol = i+1;
		$('.pixelVisualGrid .container.v100 .row').append('<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 colWhiteSpace transparentWhiteSpace">\n<div class="visualGridContentZone v100">\n<span class="pixelGridColNumHide">'+currentCol+'</span>\n</div>\n</div>');
		//console.log(currentCol);
	}
	
	$('input').on('click', function(){
		clickedCheckboxVisualGrid($(this).attr('id'));
	});
	$('.pixelGridShow').on('mouseover', function(){
		$('.showHideVisualGrid').addClass('pixelVisualGridVisible');
	});
	$('.pixelGridShow').on('click', function(){
		$('.showHideVisualGrid').addClass('pixelVisualGridVisible');
	});
	$('.showHideVisualGrid').on('mouseleave', function(){
		$('.showHideVisualGrid').removeClass('pixelVisualGridVisible');
	});
	function clickedCheckboxVisualGrid(idCheckboxVisualGrid){
		console.log(idCheckboxVisualGrid);
		if (idCheckboxVisualGrid == 'showPixelGrid'){
			if ($('#'+idCheckboxVisualGrid).is(':checked')){
				$('.pixelVisualGrid').addClass('showVisualGrid');
			} else {
				$('.pixelVisualGrid').removeClass('showVisualGrid');
			}
		}

		if (idCheckboxVisualGrid == 'showPixelGridPaddings'){
			if ($('#'+idCheckboxVisualGrid).is(':checked')){
				$('.colWhiteSpace').removeClass('transparentWhiteSpace');
			} else {
				$('.colWhiteSpace').addClass('transparentWhiteSpace');
			}
		}
		
		if (idCheckboxVisualGrid == 'showPixelGridColNum'){
			if ($('#'+idCheckboxVisualGrid).is(':checked')){
				$('.visualGridContentZone span').removeClass('pixelGridColNumHide');
			} else {
				$('.visualGridContentZone span').addClass('pixelGridColNumHide');
			}
		}
		
		if (idCheckboxVisualGrid == 'showPixelGridGrayScale'){
			if ($('#'+idCheckboxVisualGrid).is(':checked')){
				$('.pixelVisualGrid').addClass('grayscale');
			} else {
				$('.pixelVisualGrid').removeClass('grayscale');
			}
		}
	}
});