Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Why are the two images within the <div> with hidden-sm-down still visible on my laptop when I resize the page? I need them to be hidden on small devices for a different menu layout.

<div class="row">                 
    <div class="col-md-7 left">
        <ul class="row">
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down wave">
        <img src="img/ondina.png" />
    </div>
    <div class="col-md-3 right">
        <ul class="row">
            <li class="col-md-6">
                <a href="">Text</a>
            </li>
            <li  class="col-md-6">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down right-border">
        <img src="img/menu-right.png"  />
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

It's important to note that in Bootstrap 4 and above, the class hidden-sm-down is no longer used. Instead, use d-none for hiding elements and d-sm-none for specific breakpoints (refer to this explanation).

The display utility classes have been revamped in BS4. Follow this new format:

.d-{breakpoint}-{value}

For further details, visit: https://getbootstrap.com/docs/4.0/utilities/display/

Answer №2

Jaqen recommended using hidden-sm if you are working with Bootrstrap 3.

To hide the image on small screens, remember to include hidden-xs.

Check out this JsFiddle for a demo: DEMO

Answer №3

You mentioned that you are using Bootstrap 3

Instead of using hidden-sm-down, which is for Bootstrap 4, consider using hidden-sm

Additionally:

You also noted:

You wanted to hide two images on small devices to display a different menu.

Using hidden-sm will hide the element on screens like iPad. For hiding on extra small screens (phones < 768px), add hidden-xs.

Refer to the Bootstrap sizes table here

Answer №4

If you're using Bootstrap 4, here's how you can take advantage of its features:

Hidden specifically on small screens

<div class="d-none d-lg-block">This content will not show on screens smaller than lg size</div>

Visible only on small screens

<div class="d-none d-sm-block d-md-none">This content will be visible exclusively on small screens</div>

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

What is the best way to split an array into smaller chunks?

My JavaScript program fetches this array via ajax every second, but the response time for each request is around 3 to 4 seconds. To address this delay, I attempted to split the array into chunks, however, encountered difficulties in completing the task: { ...

javascriptphphtmlajax

Steps for Customizing the Font Style of a Certain List Item Tag <li>

I'm struggling to find the right CSS selector to specifically change the font of just one list item. Here's the current structure: <ul id="menu-applemain class="x-nav> <li>One</li> <li>Two</li> <li>Three</l ...

csshtml-lists

Displaying inline causes the block elements to be removed from the

After two months of learning HTML and CSS, I still feel like a beginner. I'm attempting to create a header navigation bar, but whenever I apply the display: inline property, everything vanishes. I know this issue is probably basic, but any advice woul ...

htmlcss

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

javascripthtmlelectron

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

htmlcssimagehover

Ways to showcase database content in ejs or html by utilizing Node.js, MongoDB, and Mongoose

I have successfully set up a Nodejs/Mongo/Mongoose database that can fetch and display data onto a page. However, I am encountering difficulty in displaying the fetched items in HTML, specifically in a table format. Below is the code for creating entries ...

htmlnode.jsmongodbmongooseejs

What is the best way to dynamically load content with AJAX that includes a script?

Currently, I am in the process of developing a website where I am utilizing jquery/ajax to dynamically load content onto the homepage. The test site can be found at [. While the home and about me pages load perfectly, I am encountering an issue with the pr ...

javascriptphphtmlajax

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. https://i.sstatic.net/aAtn6.png After attem ...

javascriptcssreactjsmaterial-ui

Finding your current location and address using HTML5 geolocation

My web application utilizes HTML5 geolocation to obtain latitude and longitude coordinates. I am looking for a way to convert these coordinates into actual addresses whenever possible. Once that is done, I need to save the address information into a MySQ ...

phpmysqlhtmlgeolocation

The data-ls attribute is currently not permitted on the svg element. Is there a way to fix this issue?

Upon running my site through the w3cvalidator tool, I encountered the following errors: "Attribute data-ls not allowed on svg element at this point" and "End tag svg did not match the name of the current open element (use)". Below is a snippet of the cod ...

htmlsvgw3cw3c-validationsvg-animate

Unable to retrieve static files

I'm trying to incorporate the Jquery-ui datetime picker into my express js application, but I encountered a 404 error. <p>Date: <input type="text" id="datepick"></p> <link rel="stylesheet" type="text/css" href="stylesheets/jquery ...

jqueryhtmlnode.jsexpressstatic-files

The majority of the sliding banner is crafted using 90% HTML and CSS3, with just a touch

I devised a clever script to smoothly slide an image back and forth across the screen using CSS3. Unfortunately, I encountered a problem with CSS animations - they do not support changing the background-image directly. Attempting to overcome this limitatio ...

javascripthtmlanimationcss

Ensure that the div elements fully occupy the remaining space within the box

I'm looking to bring this idea to life: https://i.sstatic.net/SWytj.png Most of my work is complete, but I need the boxes to fill up all available space in the row. This is the HTML code I've used with Bootstrap. How can I achieve this? < ...

htmlcssbootstrap-5

Tips for arranging elements in a customized manner using Bootstrap

Is it possible to reorder columns between desktop and mobile in Bootstrap 5 like the example shown in this image? https://i.sstatic.net/I74PF.jpg I have explored using the order classes and experimented with position: absolute, but I haven't been ab ...

csstwitter-bootstrapbootstrap-5

Migrating WordPress Gutenberg to a Separate React Component: Troubleshooting Missing CSS Styles

I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing R ...

cssnode.jsreactjswordpresswordpress-gutenberg

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

htmlcssscroll

Incrementing the image name by 1 each time a new image is added to the directory

Currently honing my PHP skills and in the learning process. Developed a simple script that enables users to upload images to a directory on the server. I aim to append a number at the end of each image name to prevent duplication. Here is my attempt at i ...

phphtmlimageupload

Tips for handling Ajax urlencode in PHP

I'm facing an issue with a problem and need some assistance to resolve it. Currently, I am attempting to utilize Ajax urlencode in PHP, but the POST content is not being displayed by PHP as expected when HTML is sent directly to PHP. The following c ...

javascriptphphtmlajaxurlencode

Creating responsive images using Bootstrap CSS framework

I have been focusing on optimizing the banner below the navigation menu on this website. My goal is to make it responsive so that the player in the banner remains visible even when scaling down to iPhone size portrait. You can find the code for this secti ...

htmlcsstwitter-bootstrapresponsive

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

javascriptjqueryhtml