Mastering Bootstrap 4

Responsive utilities

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 img elements:

    <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"> ...