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

【CSS】Basic Method to Hide Elements｜Using .d-none

This guide explains how to use display: none; in CSS to easily hide specific HTML elements. It allows you to hide elements without removing 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 (just copy this code and it works in 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 Applications and Use

display: none; is the most basic way to hide elements from the user's screen. It is commonly used in dynamic UI since it can be easily toggled with JavaScript or CSS.

However, even though the element is hidden, it still exists in the HTML, so it’s important to be cautious regarding SEO and accessibility, as screen readers or other assistive technologies may detect the content.

In frameworks like Bootstrap, the .d-none class is standardized, and responsive visibility toggling is also possible with classes like .d-md-none.

🎯 Additional Explanation on Hiding Techniques

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

However, when using this method, the element is considered "non-existent," which means hidden form elements won’t receive focus and won’t affect layout.

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

If you want to hide elements only on mobile, use media queries like @media (max-width: 768px) { .d-none-mobile { display: none; } }. This allows you to hide elements flexibly based on screen size or other conditions.

Copied!

Related Templates