One of the great things about Twitter’s Bootstrap 2 and Bootstrap 3 are the responsive utility classes. It makes hiding / showing content on only specific resolution sizes or devices easy. Other than the grid system, it’s one of the key features utilized in the framework.

What if you wanted to bring that over to your own website without having to use the whole Bootstrap framework?

No worries. Use the following custom classes that I’ve put together! Note that with media queries (which these classes utilize), you’ll lose some browser support with older versions of Internet Explorer…So fix that with Respond.js!

In your stylesheet, add the following:

//medium+ screen sizes
@media (min-width:992px) {
	.desktop-only {
		display:block !important;
	}
}
//small screen sizes
@media (max-width: 991px) {
	.mobile-only {
		display:block !important;
	}
	.desktop-only {
		display:none !important;
	}
}

This gives you two classes — mobile-only and desktop-only.

As the names imply, if you assign something with the “mobile-only” class, then it will only display when the screen size is tiny (991px or below) [smartphones, some tablets], whereas “desktop-only” will show only on sizes 992px or higher.

These values are easily changed and the whole concept can be modified without issue. You could even add an “xl-desktop-only” class. To get you started…

//large resolutions only
@media (min-width: 1200px) {
...
}

Media queries are great for responsive design. Just make sure to not over do it and add way too many breakpoints. You’ll give yourself a headache if you try to account for everything.

Incoming search terms:

• bootstrap hide on mobile
• CSS:HowtoEasilyHideContentOnOnlyMobileorOnlyDesktop|AGeekandHisBlog
• bootstrap hide div on mobile
• css how to determine mobile or desktop