top of page
Forest Background

Blog Post

Using Chrome to Write Faster Bootstrap Styles

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:


Screenshot of the bookmark in action

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

Launching a New Site?
Want Instant Access to Our Free Website Launch Checklist? Click the button below!
Wix Website Launch Checklist
Need More Traffic?
Struggling to Drive Traffic to Your Website? Get Access to Our Free Traffic Planner Guide!
Border7 Traffic Planner Guide
bottom of page