Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

Booststrap two images depending on screen size

Hi, If I have an image that goes across the whole screen, like here:  diabetic-meals.net/responsive/index.html

And if it had text on the image, I would want it to be the same image for large and medium screens, but when it got to cell-phone size, I'd like to put a different image there. How do I go about that? Thanks, I can't seem to google search this with the right question.
0
mel200
Asked:
mel200
1 Solution
 
Terry WoodsIT GuruCommented:
Without Bootstrap, you would put two images in the page with different classes, then use a media query to set style "display: none;" or "display: block;" ("display: auto;" might work better than block?) so that only one of them displays at once.

Using Bootstrap 3,  I think you can just apply style "display: none;" and class "visible-xs" to the image for phones, and class "hidden-xs" for the image for everything else. Docs for this: http://getbootstrap.com/css/#responsive-utilities
0
 
mel200Author Commented:
That's what I was looking for, thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now