Bootstrap: Responsively Scale Image

StackOverflow https://stackoverflow.com/questions/21930690

  •  14-10-2022
  •  | 
  •  

Question

What I want to do is specify certain image sizes for certain screen sizes. Are there bootstrap classes that only become active at certain screen sizes? This would be optimal. This way I could do something like <img class = "only-active-on-mobile" src="myimage.jpg"> right?

My code thus far is:

   <div class="media">
      <a class="pull-left" href="#">
        <img class="media-object img-rounded" style="" src="<%= image_path('MY_IMG_THAT_NEEDS_RESIZING.jpg') %>">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        <!-- Nested media object -->
        <div class="media">
          ...
        </div>
      </div>
Was it helpful?

Solution

Bootstrap offers a set of "utility" classes for this exact purpose, .visible- and .hidden-.

To hide/show content based on device width you add the following:

xs for Extra small devices (Phones <768px)

sm for Small devices (Tablets ≥ 768px)

md for Medium devices (Desktops ≥992px)

lg for Large devices (Desktops ≥1200px)

All of this can be found in the docs

In your case add the class .visible-xs for the mobile image and .hidden-xs for the replacement one.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top