Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Boostrap 5 Display property - Problem


Hello,

I'm having a problem with Bootstrap 5 regarding the use of utility classes for display control. My goal is to hide a specific element on screens of size "xs" and display it from screens of size "sm" and larger.

To achieve this, I've applied the .d-none and .d-sm-block classes to my element. When I use the .d-none class alone, the element is correctly hidden on all screens, as expected. However, when I combine this class with .d-sm-block, the element is not displayed on "sm" and larger screens, contrary to what I expected.

I've checked that Bootstrap 5 is correctly integrated into my project, and I've made sure that no other style or class conflicts with the Bootstrap classes I'm using. Despite this, I can't get the desired display behavior.

Has anyone encountered this problem before, or could you offer me some advice on how to solve it?

Thank you in advance for your help.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


It looks like you're on the right track, but the issue might be due to the way Bootstrap 5 handles responsive display utilities. Instead of using .d-none with .d-sm-block, try using .d-sm-none and .d-none d-sm-block together to explicitly control the visibility. Your updated code should look like this:

html
Copy
Edit
<div class="d-none d-sm-block">This element is hidden on xs but visible on sm and larger screens.</div>
This ensures that the element is initially hidden (d-none) and then becomes visible from the sm breakpoint onwards (d-sm-block). If the issue persists, double-check for conflicting styles in your custom CSS or other applied Bootstrap classes. Let me know if you need further clarification!

mietangebote



Hi,

You have not modified the Bootstrap breakpoints values in your src/sass/components/_variables.scss ?


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
) !default;


May I know what is your Metronic version?

We have checked it and it works as expected:


<div class="d-none d-sm-block">shown below sm only</div>


We have checked this in the latest Metronic v8.2.0 and below versions as well.

If you need any further help please provide us your version and code.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(