Twitter Bootstrap Question posted in

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search