To Print or Not to Print URLs in the Twitter Bootstrap Framework

by Jonathan Jacobsen Tuesday, October 11, 2016 11:32 AM

Andornot uses the Twitter Bootstrap framework for almost all our web application development these days. This framework saves considerable development time, with so much pre-built, and allows a single site to adapt to the viewing device, meaning a search engine such as the Andornot Discovery Interface, works just as well on a tablet or phone as in a desktop browser.

One of the "features" of this framework is the display of URLs in print views. By default, the print stylesheet appends the URL of a hyperlink to the hyperlink text in print view. For example, a link to the Andornot website with the text “Learn more about Andornot” would appear in a printout as

Learn more about Andornot.

This is a very helpful automatic feature, as without it, you’d have a print view without the URLs needed to get to the sites mentioned. It's great when the URLs are short, but when they are long, such as a pre-created search for a set of results, or anything with lots of parameters in it, they tend to make for a print view cluttered with not very useful HTML.

For example, a link whose text is “View information about Fish and Fisheries” might have a URL such as

This is too long a URL for anyone to retype, so it’s not useful to have in the print view. It just makes the plain text hard to read.

(As an aside, see our recent blog post about URL shortening for tips on using short URLs in blog posts, Tweets, Facebook posts, etc.).

A very simple adjustment you can make to Bootstrap is to add this bit of CSS to your stylesheet, overriding the Bootstrap default:

@media print {

  a[href]:after {

    content: none;



This will suppress the display of URLs after links in all cases. You might want to be more sophisticated and only suppress them for certain types of links, ones you know will be long, while leaving the behaviour as-is for shorter ones. Easily done by adding a class to certain links and adjusting the above style addition to reflect that class.

Contact Andornot for assistance with this and any similar web development tweaks.

blog comments powered by Disqus

Month List