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> ... </div> <div class="col-sm-3"> <img src="images/medium.jpg" class="img-fluid rounded d- none d-sm-block"> ...