One of the last things you might want to do when working with these responsive design grids inside of Bootstrap is that you may wish to have some particular parts of the layout that are only visible on a desktop, or visible only on a tablet or a phone, or you may want to hide specific elements on one of those devices. Bootstrap includes some nice classes that will allow you to easily do exactly that as well.
This explains exactly how these particular classes work and which specific devices using those classes will produce content that’s either visible or invisible. We’re going to put those to work here in just a moment.
So, what we’d like to do is to set up a row on the web page that we’ve been working on so far, and set it up in a way that you’re going to have some text that’s going to show up only on certain devices. The important part to remember about this is the way that these particular CSS classes work.
First of all, the big thing to remember here is that these are CSS, so they are testing the width of the window of the browser. They aren’t actually testing the device itself, which is something very different that actually comes over as part of the header in the request process for getting web pages. It’s just testing the width of the screen, so it’s calling devices such as phones, tablets, and desktops, but just by making your screen wider or making your screen narrower, you’ll be able to simulate the screen sizes of phones, tablets, and desktops, and they’ll work just fine.
Again, remember that “phone,” “tablet,” and “desktop” actually refer to specific widths of the screen, and those widths are detailed in the chart above. Phones are 767 pixels and below, tablets are 768 pixels to 979 pixels, and desktops are the default, which is anything wider than 979 pixels.