🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[CSS] Basics of Hiding Elements｜How to Use .d-none

This guide introduces how to use display: none; in CSS to easily hide specific HTML elements. It allows you to hide elements without deleting them from the HTML structure.

🔹 Partial Code

<div class="d-none">
  This element will be hidden.
</div>

<style>
.d-none {
  display: none;
}
</style>

💻 Fully Working Code (Can Be Run as Standalone HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hide Example</title>
  <style>
    .d-none {
      display: none;
    }
  </style>
</head>
<body>
  <div class="d-none">
    This element will be hidden.
  </div>
</body>
</html>

🧩 Practical Use and Applications

display: none; is the most basic method to hide elements from the user’s screen. It’s commonly used in dynamic UIs as it's easy to toggle with JavaScript or CSS.

However, even when hidden, the element still exists in the HTML. Therefore, from an SEO and accessibility perspective, it’s important to be cautious. Screen readers or assistive technologies might still detect the content.

In frameworks like Bootstrap, the class .d-none is standardized, and responsive toggling is also available using classes like .d-md-none.

🎯 Additional Notes on Hiding Techniques

Using display: none; allows you to visually hide elements without removing them from the HTML structure. This is useful for toggle displays based on user actions or conditions in JavaScript.

However, with this method, the element is considered as "non-existent", which means form inputs or focusable items won’t receive focus, and they don’t affect layout.

In contrast, visibility: hidden; hides the element but keeps the space reserved. Use display: none; when you want to completely hide the element, and visibility: hidden; when you want to preserve layout but hide the content.

If you only want to hide elements on mobile displays, use media queries like @media (max-width: 768px) { .d-none-mobile { display: none; } }. This allows for flexible hiding of elements depending on the screen size and conditions.

Copied!

Related Templates