How to hide elements in responsive layout?

Posted by Prem Tiwari | Updated on

Are you searching for how to hide elements in responsive layout? In this example, we have shared hide elements in small and mobile devices.

New visible classes added to Bootstrap

  • Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs)
  • Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)
  • Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md)
  • Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Apart from this, you can also write the custom CSS classes to apply for particular device using Media query. Below is example for the same:


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers