Editing bootstrap CSS to hide an image

Question

I've got an image that is displayed when viewing the website on a computer; however, I want it to be hidden when the site is viewed on a mobile device. I've just used the 'display: none;' CSS but for some reason it's not working.

HTML:

<div class="col-sm-7 col-sm-offset-1">
      <img src="./images/testing.jpg" alt="">
</div>

CSS:

.col-sm-7 {
    display:none;
}

Thank you.

Duplicate: http://stackoverflow.com/questions/16922518/hide-div-on-mobile-devices-using-css — Timothy Kanski, Apr 20 '16 at 22:17
`.col-sm-7` is a class you probably don't want to use to hide stuff. — Drew Kennedy, Apr 20 '16 at 22:17

score 1 · Accepted Answer · answered Apr 20 '16 at 22:21

1

Just add the class hidden-xs and/or hidden-sm.

See the docs for more info

answered Apr 20 '16 at 22:21

jeffjenx

17,041
6
57
99

score 1 · Answer 2 · answered Apr 20 '16 at 22:24

1

Try using Bootstrap Responsive Utilities

.hidden-xs

<div class="col-sm-7 col-sm-offset-1 hidden-xs">
  <img src="./images/testing.jpg" alt="">
</div>

answered Apr 20 '16 at 22:24

amflare

4,020
3
25
44

Editing bootstrap CSS to hide an image

2 Answers2