The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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.


G
Guest 2 years ago
Metronic Bootstrap 5 HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

 
Deleted comment
user
Sean Author 2 years ago

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:

shown below sm only

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation