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 navigation. For example, a page may have a navigation bar on large displays and 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 d-none and d-sm-block classes to the img elements:

<div class="container">
    <h1>Our Print Sizes</h1>
    <div class="row">
        <div class="col-sm-3">
            <img src="images/small.jpg" class="img-fluid rounded-circle 
            d-none d-sm-block">
            <h5>Small</h5>
            ...
...