BOOTSTRAP AND VISIBILITY

Bootstrap offers you the ability to show or hide content based on both screen size and printing state. The syntax is, as with much of Bootstrap, option-screen.

The two options are either hidden or visible. Both of the options will change the default for all other screen sizes and print. In other words, hidden-sm will make the content hidden for small screens, but visible on all others; visible-sm will make the content visible on small screens, but visible on all others.

One thing to note about visible-printvisible-print, while perfect for a demonstration, as you saw in the video, does have a couple of issues. First, it is deprecated, meaning it will eventually be removed from Boostrap. Second, while it will be visible only when printing, all other content currently being displayed on the page will also be visible. If you want something to be hidden when printing, use hidden-print.

visible summary

Class Extra small Small Medium Large
visible-xs Displayed      
visible-sm   Displayed    
visible-md     Displayed  
visible-lg      Displayed

hidden summary

Class Extra small Small Medium Large
hidden-xs Displayed Displayed Displayed
hidden-sm  Displayed Displayed Displayed
hidden-md  Displayed Displayed Displayed
hidden-lg  Displayed Displayed Displayed
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s