Border7 Studios
- Jul 20, 2016
- 2 min read

Using Chrome to Write Faster Bootstrap Styles

Did you know that Google Chrome bookmarks aren’t just for storing links? They can actually do a whole lot more by running JavaScript. We’ve already used this technique to write our previous ‘hack’ to help us develop, which you can find here: Debugging Responsive Using Ghost CSS. This works by using the Chrome “javascript:” trigger, (same as how the Ghost CSS worked), which causes Chrome to run a JavaScript snippet on the current page instead of redirecting to a different page. We love this tip of using chrome to write faster Bootstrap CSS, and wanted share it!

What it does:

How to get it:

To get this trigger, simply add a bookmark in Chrome, title it: “CSS Breakpoints” and then paste the following into the URL section (be sure to delete the link that is in there).

javascript: (function() { document.body.innerHTML += “<style>.breakpoints,.breakpoints:before {position: fixed;cursor: pointer;z-index: 9999;top: 0;left: 0;color: #fff;font-weight: 700;background: #000;font-size: 16px;padding: 5px 15px;}.breakpoints {color: transparent;display: none;}@media(max-width:767px) {.breakpoints.bm-visible-xs {display: block !important;}.breakpoints.bm-visible-xs:before {content: ‘col-xs | (max-width:767px)’;}.breakpoints.bm-visible-sm,.breakpoints.bm-visible-md,.breakpoints.bm-visible-lg {display: none;}}@media(max-width: 991px) and (min-width:768px) {.breakpoints.bm-visible-sm {display: block !important;}.breakpoints.bm-visible-sm:before {content: ‘col-sm | (max-width: 991px) and (min-width: 768)’;}.breakpoints.bm-visible-xs,.breakpoints.bm-visible-md,.breakpoints.bm-visible-lg {display: none;}}@media(max-width: 1199px) and (min-width:992px) {.breakpoints.bm-visible-md {display: block !important;}.breakpoints.bm-visible-md:before {content: ‘col-md | (max-width: 1199px) and (min-width: 992px)’;}.breakpoints.bm-visible-xs,.breakpoints.bm-visible-sm,.breakpoints.bm-visible-lg {display: none;}}@media(min-width:1200px) {.breakpoints.bm-visible-lg {display: block !important;}.breakpoints.bm-visible-lg:before {content: ‘col-lg | (min-width:1200px)’;}.breakpoints.bm-visible-xs,.breakpoints.bm-visible-sm,.breakpoints.bm-visible-md {display: none;}}</style><span class=’breakpoints bm-visible-lg’ onclick=’copyToClipboard(this)’>@media(min-width:1200px){ }</span><span class=’breakpoints bm-visible-md’ onclick=’copyToClipboard(this)’>@media(max-width: 1199px) and (min-width:992px){ }</span><span class=’breakpoints bm-visible-sm’ onclick=’copyToClipboard(this)’>@media(max-width: 991px) and (min-width:768px){ }</span><span class=’breakpoints bm-visible-xs’ onclick=’copyToClipboard(this)’>@media(max-width:767px){ }</span>”; })(); javascript: (window.copyToClipboard = function(element) { var $temp = $(“<input>”);$(“body”).append($temp);$temp.val($(element).text()).select();document.execCommand(“copy”);$temp.remove(); })();

How to use it:

Now that you’ve got that chunk of code pasted in there, you now have your new CSS Breakpoints tool ready. Click on the bookmark on any website you want, and voilà!

Need more Bootstrap tips, or want some help with a project? Send us a message, or give us a call today. We’d love to hear from you!

#developertips #fasterbootstrapstyleswithChrome #javascriptchrometrigger