Responsive utilities are a group of media query-based classes that control when an element should be hidden or shown depending on the viewport. One popular use case for this is controlling display specific navigations. For example, a page may have a navigation bar on large displays and have a hidden navigation on small displays which is only displayed when a user chooses to open the navigation.
Let's look at a quick example with our Print Size page. Add the
hidden-xs-down class to the
<div class="container"> <h1>Our Print Sizes</h1> <div class="row"> <div class="col-xs-6 col-sm-3 push-sm-3"> <img src="images/small.jpg" class="img-fluid img-circle hidden-xs-down"> ...
Get Mastering Bootstrap 4 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.