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.
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.
