Inconsistencies in the functionality of the "hidden" class in Bootstrap 4

I seem to be having trouble using the "hidden" class to conceal content at a specific size. It seems to work on some elements, but not others.

Here is how I am using it: 

    <div class="hidden-sm">something to hide in small viewports </div>

It works when I apply it to the brand logo in the navigation, but for the navbar, certain images, and other elements, it doesn't seem to have any effect...

When I use the following code, it does work (however, it hides the content permanently)

<div hidden> something to hide in small viewports </div>

On the other hand, this code below doesn't seem to work at all

<div hidden-sm> something to hide in small viewports </div>

Could someone provide me with a bit more clarity on the usage of this? The Bootstrap documentation doesn't offer much detail.

Moreover, as you can probably tell, I'm not very proficient with CSS or JavaScript, so I would prefer to just import Bootstrap from the CDN without having to create my own CSS files (if possible).

csshtmlbootstrap-4

Answer №1

When working with HTML, you will come across various attributes such as class, alt, src, and more.

In the first example, the class attribute is being used with a bootstrap class assigned to it, which explains why it functions correctly.

The second instance showcases the use of the hidden attribute in HTML, demonstrating its functionality.

Unfortunately, the third snippet is unsuccessful because 'hidden-sm' is not a recognized attribute. To achieve the desired effect, you should consider using...

<div class="hidden-sm"> something to hide in small viewports </div>

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

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

The jQuery focus event appears to be malfunctioning

I am attempting to utilize the jQuery focus event to handle the following situation: There are three search criteria options: Post code, city, radius. The user can only select one option, indicated by a radio button. The requirement is that when a user c ...

jqueryhtml

What methods can I use to prevent the `<style>` tags from being trapped in my CSS selectors?

As I work on styling existing documents with CSS, I find myself using a variety of adjacent sibling selectors (such as item1 + item2) to add spacing between elements. However, some of the documents contain <style> tags at different points in the page ...

javascripthtmlcsscss-selectors

Adjust the content of a table cell using jQuery

<td>09 Mars 2020</td> Using the string above, I have created a div. Here are the Jquery variables I am working with: date1 = 09 Mars 2020 date2 = 18 Mars 2020 My goal is to combine the content from another date with the existing date to ach ...

javascriptjqueryhtml

Preventing Canvas Image Disappearance with JavaScript's onload Event

My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following th ...

javascripthtmlcsscanvas

CSS sidebars are failing to display on the website

Working on a supposedly simple template turned out to be more challenging than expected. The template lacked sidebars, so I attempted to add them myself. However, my test text isn't displaying as intended. Could someone please help me identify the mi ...

htmlcss

Bootstrap dropdown seems to be having a stubborn streak and refusing to cooperate

I'm having trouble getting this code from the bootstrap website to work properly. The dropdown menu doesn't seem to be functioning correctly and I've tried various solutions without success. Here's the snippet of code: <head> &l ...

htmlbootstrap-4

Identifying 404 image status in AngularJS triggering by a button press

One question I have is about a button directive that I am working with: <button-data></button-data> The template for the button data directive looks like this: <div class="buttonDiv"> <a ng-show="!isSomthing" class="{{className}}" ...

htmlangularjs

Include the circle.css file in the Angular 4 project by loading it in the head section of the

I am currently working with Angular 4 and would like to incorporate the circle.css styles from cssscript. After downloading the file from the provided link, I placed the circle.css within my something component file. However, when attempting to use &l ...

htmlcssangular

Custom plugin shortcode HTML appearing within WordPress Edit Page interface

After developing my first WordPress plugin, I encountered a slight issue. Upon activating the plugin, the edit page screen became distorted. Attached is a screenshot for reference. https://i.sstatic.net/wB5aj.png Upon further inspection, it seems that th ...

phphtmlwordpressshortcode

Here is a step-by-step guide on creating a navigation bar with a Login and Sign Up button using Bootstrap 4

I am in the process of creating a navigation bar in bootstrap 4, which includes Login and Sign Up buttons. To get a clear idea of what I'm aiming for, please refer to the images below: https://i.sstatic.net/ibZKa.png https://i.sstatic.net/OUWsX.png ...

htmlcssnavigationbootstrap-4

Do we need to duplicate structured data when listing nested objects, or is it better to avoid doing so?

We are currently focused on implementing JSON structured data for a one-page website that contains extensive information about a local business, including address, pricing, reviews, and services. The JSON snippet provided below represents the structured da ...

htmljsonschemagoogle-rich-snippetsstructured-data

The JavaScript file failed to load

My HTML code is having trouble loading all the files. The Javascript files UserController.js and RepoController.js are not being loaded, which means they are not displayed in the developer tools source tab. When I press F5 in the network tab, the files are ...

javascripthtmlangularjsangular1.6

When using @font-face, Chrome supports it while IE and Firefox do not

I am finding this quite perplexing. I am currently using font-squirrel to download a web kit in order to display a custom font. You can access the font through this link: If you visit the homepage now: The main text in the center reads "Custom Built Webs ...

htmlcssfont-face

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

Converting HTML table data into a JavaScript array

On my website, I have an HTML table that displays images in a carousel with their respective positions. The table utilizes the jQuery .sortable() function to allow users to rearrange the images by dragging and dropping. When an image is moved to the top of ...

javascriptphpjqueryhtmljquery-post

Any tips on how to effectively integrate dynamic theming in CSS?

I am currently developing a theming feature for my web application, allowing users to select a theme that will dynamically change the color of various elements. Here is an example of the theme selector: <div id="theme-selector"> <div id="theme- ...

javascriptcssarraysthemes

Adding a vertical menu in PHP is a great way to enhance the

<ul id="verticalmenu"> <li><a href="http://www.yourlink.com/">Home</a></li> <li><a href="http://www.yourlink.com/">Vertical Menu</a></li> <li><a href="http://www.yourlink.com/">Dro ...

phphtmlcssmenu

Is it possible to incorporate multiple IDs into the changeImage function for a radio

I've encountered an issue with my function that changes images based on radio button selections. It works fine for one image slider, but now I want to make it available for a second slider. The problem is that when I use the radio buttons for the seco ...

javascriptjqueryhtmlradio-button

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...

google-chromesafariwebkitcss

Do not incorporate a div in the overlay

I have an image inside a container. When hovering over the image/container, overlay information is displayed (which is currently working correctly). The overlay should cover the entire container (the grey part) where the image is located. The product-tit ...

htmlcss