5

Currently I am creating a bootstrap 4 based site and wanted to optimize this for mobile devices. How can I not display an element for certain screen sizes?

Normally I use ".hidden-sm-down" as documented here: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

I also tried alternatives like: .d-none .d-md-block .d-xl-none or hidden.

<div class="col-lg-4 order-lg-1 .d-none .d-sm-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

Currently it is possible to hide the element with .d-none for all devices but I only want to hide it for xs and sm.

Joël A
  • 196
  • 1
  • 2
  • 13

4 Answers4

17

Currently it is possible to hide the element with .d-none for all devices but I only want to hide it for xs and sm.

This should work for you

<div class="d-none d-md-block">
...
</div>

Bootstrap 4.x display cheat sheet

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Also check my answer on a related question - Hiding elements in responsive layout?

kiranvj
  • 32,342
  • 7
  • 71
  • 76
1

It should be d-none d-md-block. You need to remove . from your class

<div class="col-lg-4 order-lg-1 d-none d-md-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>
Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
  • Thanks for the answer. Was a little careless mistake when creating the question. Even without the dots it doesn't work. – Joël A Jul 15 '19 at 12:14
0

You have to use d-breakpoint-none to hide the élément in xs and sm break points without the dot as follows:

<div class="col-lg-4 order-lg-1 d-sm-none d-md-block" > 
    <div class="card-profile-image"> 
      <a href="#"> 
      <img src="myimage.ong" alt="" class="rounded-circle"> 
      </a> 
   </div> 
</div>

For more details https://getbootstrap.com/docs/4.0/utilities/display/

mth khaled
  • 337
  • 4
  • 13
  • Khaled, There is no `xs` in bootstrap 4, its just `d-none` if you want to take care of extra small view ports. – kiranvj Jul 16 '19 at 05:33
0

You are currently writing your class name in HTML wrongly. d-none and d-sm-block should be written without the "." ie

<div class="col-lg-4 order-lg-1 d-none d-sm-block">
   <div class="card-profile-image">
      <a href="#">
        <img src="myimage.ong" alt="" class="rounded-circle">
      </a>
   </div>
</div>

Alternatively, you can use media queries to select the class you wan to display as none. 

@media screen and (max-width: 768px ) {
.classname {
display: none
}
}

This will hide the class for xs and sm.

Adebimpe Adebowale
  • 36
  • 3