CODEWITHSUNDEEP
twitter-bootstrap-3responsive-design
Volatil3
Volatil3

Reputation: 14998

How to Hide/Show DIVs in Twitter Bootstrap for responsive site

I am first time working on responsive site in Bootstrap and I am not able to decode classes like hidden-sm or visible-md etc.

Does hidden-sm mean to hide that particular DIV?

Upvotes: 1

Views: 391

Answers (2)

Tyson Graham
Tyson Graham

Reputation: 227

The answer to your question is yes. If the div is added to the .hidden-sm class it will hide that particular div in a screen size of 768px.

If an element is of the class .visible-* it means it's visible for that screen size or above.

Example:

.visible-xs shows only in screen sizes <768px

.visible-sm shows only in screen sizes < 992px

.visible-md shows only in screen sizes < 1200px

.visible-lg shows in screen sizes 1200px and above

On the flip side you can accomplish the same with .hidden class with the other sizes.

If an element is of the class .hidden-* it should be hidden for that specific screen size range

Example:

.hidden-xs hides the element in screen sizes of <768px

.hidden-sm hides the element in screen sizes of 768px

.hidden-md hides the element in screen sizes of 992px

.hidden-lg hides the element in screen sizes of 1200px

Upvotes: 3

niyasc
niyasc

Reputation: 4490

hidden-xx means that make particular section hidden in a screen size of xx

You may find more information here in bootstrap documentation http://getbootstrap.com/css/#responsive-utilities-classes

Upvotes: 1

Related Questions