7

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.

Improve this question
1
  • <p class="d-none d-sm-block">Hidden only on mobile </p> Commented Sep 18, 2022 at 10:10

4 Answers 4

Reset to default
20

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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>
Improve this answer

1 Comment

Thanks for the answer. Was a little careless mistake when creating the question. Even without the dots it doesn't work.
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.

Improve this answer

1 Comment

Thank you. Great alternative solution for other issues too.
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/

Improve this answer

1 Comment

Khaled, There is no xs in bootstrap 4, its just d-none if you want to take care of extra small view ports.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.