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.
You have not modified the Bootstrap breakpoints values in your
// Grid containers
// Define the maximum width of `.container` for different screen sizes.
<div class="d-none d-sm-block">shown below sm only</div>