What is the best way to conceal an element on a mobile device using Bootstrap 4?

As I work on developing a website based on bootstrap 4, my focus is on optimizing it for mobile devices. In order to achieve this, I am looking for ways to hide certain elements on specific screen sizes. Can anyone guide me on how to achieve this?

I have previously relied on the ".hidden-sm-down" class which is explained in detail here:

Despite that, I have also experimented with other alternatives such as .d-none, .d-md-block, .d-xl-none or simply using "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>

While I can successfully hide the element using .d-none across all devices, my goal is to specifically target xs and sm screens for hiding the element.

htmlcssresponsive-designbootstrap-4

Answer №1

At this moment, you have the ability to conceal the element using .d-none for all devices, but my intention is to specifically hide it for xs and sm screens.

This solution should cater to your requirements:

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

For reference, here is a 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            |

Feel free to also explore my response to a similar query - Hiding elements in responsive layout?

Answer №2

The correct format is d-none d-md-block. You should omit the use of . in defining 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>

Answer №3

You may want to make a quick correction in your HTML code when writing your class name. Instead of including the "." before d-none and d-sm-block, they should be written without it.

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

Alternatively, you can utilize media queries to target specific classes for display:none.

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

By implementing this approach, you can effectively hide the specified class on smaller devices (xs and sm).

Answer №4

If you want to hide the element on extra small and small breakpoints without using a dot, you need to use d-breakpoint-none like this:

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

For more information, check out https://getbootstrap.com/docs/4.0/utilities/display/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Turning a string retrieved from the element's data attribute into a JSON format

I am running into an issue with the code snippet below. It seems that $.parseJSON() is having trouble with single and double quotes. I'm stuck on finding a solution to this problem. Any help would be greatly appreciated! <div data-x='{"a":"1" ...

javascriptjqueryhtmljson

Dynamic resizing of DIVS occurs when the address bar is hidden on Mobile Chrome

As I work on designing a website, I have utilized sections with the same class and set their height to 100vh. Everything appears to be functioning correctly when viewed on a browser, however, issues arise when accessing the site on phones. Whenever I scro ...

javascriptjqueryhtmlcss

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

javascriptcssdjango-templatescarousel

The navigation bar menu fails to collapse when the menu icon is clicked

There are two issues with my bootstrap implementation that I am facing: After clicking on the hamburger icon in the mobile view to open the menu, it does not close when clicked again. It remains open at all times. When hovering over the menu links un ...

angularbootstrap-4

"Discrepancy in column display across various resolutions in Bootstrap 5.3 causing issues

My goal is to have 4 divs that change in width at different resolutions, but for some reason it's not working. I am looking for: When the resolution is ≥992px, the divs should be in the same line (3 columns) When the resolution is ≥768px, the di ...

htmlcssbootstrap-5bootstrap-grid

Mirror Image Iframes

Currently, I have been tasked with constructing a side-by-side "frame" using HTML. The idea is that when the content in the iframe on the left is selected, it will appear in the iframe next to it on the same page. Here's some additional context: The ...

javascripthtmlcss

Conceal default video player controls in Google Chrome

I have a dilemma with hiding the default play button in the center of my video. Even though I have a custom play button, the native play button is still showing underneath it on tablets and mobile devices. Unfortunately, I am unable to access the CSS for i ...

htmlcssgoogle-chromehtml5-video

Personalize the style of ordered lists

Greetings! I am attempting to customize the style of an ordered list like the one shown in the image on another website. https://i.sstatic.net/BQok4.png However, instead of the circle used in that picture, I want to use a different CSS Image like the one ...

csshtml-lists

Manipulate the child elements within a list by altering their IDs with jQuery

I'm currently using jQuery to dynamically add options to a select tag from a dictionary. I now need to set the title attribute of each option based on the keys in the dictionary. Can anyone suggest a solution for this? JQuery function addOptions(){ ...

javascripthtmljquery

Arranging Bootstrap inputs horizontally with lengthy labels

When placing two input fields in a row, such as a drop down menu, with labels of varying lengths, the alignment of the inputs can become skewed. This issue persists even when attempting to add breaks in the code due to unpredictable wrapping behavior at di ...

htmlcsstwitter-bootstrapbootstrap-4alignment

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

javascripthtmlcssajax

I am currently encountering a problem in my attempts to retrieve data from mongodb

I'm having trouble retrieving some data from my database, and I'm not sure why it's not displaying correctly. Any help or feedback would be greatly appreciated! // Below is the code for my router: router.get('/add', (req, re ...

htmlnode.jsmongodbejs

What is the best way to position an image in the center over a video using HTML and CSS?

I am currently developing a website with a background video and I want to overlay a company logo on top of it while keeping it centered. My coding language of choice for this project is using HTML and CSS. Here's the HTML code snippet I have for this ...

htmlcss

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

htmlcsstext-decorations

Troubleshooting problems with the CSS code for a progress bar in Gmail

I recently came across a unique progress bar design on Gmail and wanted to implement something similar. I found some code snippets on this webpage: . However, I encountered an issue where the progress bar was only displaying in Internet Explorer but not in ...

javascripthtmlcss

Struggling with creating a fluid/elastic/liquid layout in HTML. Can someone please assist me with this

I've been attempting to incorporate a fluid layout on my friend's website, but unfortunately, it doesn't seem to be functioning properly. The page is quite simple, with just a slider on it. Could you please take a look at it and let me know ...

htmlcss

Tips for securing my div in place when interacting with an expanding panel

I am attempting to create a visualization similar to this: https://i.sstatic.net/Wxdqr.png Instead of using the built-in card and card-column classes in Bootstrap, I noticed that when I expand a panel, all my <div>s start moving around haphazardly: ...

cssangulartwitter-bootstrap

Creating a product in Prestashop via code does not successfully upload the product image

Working with the code snippet below in a module to create a product and assign an uploaded image to it. Everything runs smoothly on localhost, however, I encountered a problem when moving the module to the server. The product is successfully created on the ...

phphtmlprestashop-1.6

Is it possible for me to designate variables as an array element?

<!doctype html> <html lang="en"> <head> <title>Favorite Foods</title> <meta charset="utf-8"> <script> var foodItem0 = prompt("Enter your favorite food"); var foodItem1 = prompt("Enter your second f ...

javascripthtmlarrays

Attempting to shift an element without relying on the use of position:relative

I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...

htmlcss