Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

d-sm-none not working in ul #39986

Closed
3 tasks done
Maryamdeveloper opened this issue May 15, 2024 · 2 comments
Closed
3 tasks done

d-sm-none not working in ul #39986

Maryamdeveloper opened this issue May 15, 2024 · 2 comments
Labels
awaiting-reply

Comments

@Maryamdeveloper
Copy link

Maryamdeveloper commented May 15, 2024 •
edited by julien-deramond

Note: edited by maintainer for using backticks for the HTML code

Prerequisites

Describe the issue

d-sm-none not working inside the ul or even if it is put on the ul itself I have tried it in an empty HTML still no changes
image

Reduced test cases

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- 1st try -->
    <ul class="d-md-block d-sm-none">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <!-- 2nd -->
    <ul>
      <li class="d-md-block d-sm-none">Item 4</li>
    </ul>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
      integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

What operating system(s) are you seeing the problem on?

Windows, Android, iOS

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

5.3.0
@Maryamdeveloper Maryamdeveloper changed the title d-sm-none not working in ull d-sm-none not working in ul May 15, 2024
@julien-deramond
Copy link
Member

julien-deramond commented May 15, 2024 •
edited

Hello @Maryamdeveloper
Tried quickly your code in a CodePen (https://codepen.io/julien-deramond/pen/jOoPQQB), it seems to work as expected

  • Before 576px, nothing is set, so the list is displayed
  • Between 576px and 768px, .d-sm-none (so display: none) is applied, so the list is not displayed
  • After 768px, .d-sm-block (so display: block) is applied, so the list is displayed

@Maryamdeveloper
Copy link
Author

Thank you, @julien-deramond. You are right; I missed that detail and didn't notice it initially.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting-reply
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@julien-deramond @Maryamdeveloper