O'Reilly logo

Mastering Bootstrap 4 by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required