csshtmltwitter-bootstrap-4-beta

Display/hide div depending on device width


Is it possible to hide a div with (or without) Bootstrap 4 if the screen width is over/under a specific value? Does it need javascript for that? More specifically, I'm looking for hiding a specific text (that I find useless on a mobile screen). I tried classes like "hidden-sm-up" but I couldn't make it work. Sorry if it's a basic question...


Solution

  • media queries in CSS are what you are looking for.

    .mydiv{display:block; /*default behavior*/}
    @media only screen and (max-width: 400px) { 
    .mydiv{display:none; /*hide div on all screens with 700 and lower width*/}
     }
    

    (try dragging the divider between js and outpuut block) https://jsfiddle.net/qaabhmou/

    more you can find here: https://www.w3schools.com/css/css3_mediaqueries.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp