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 (1)
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.
