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

Metronic v8.3.3 - BlockUI - Cannot use Bootstrap class for spinner

Hi,

You are fixing the size of spinner

.blockui .blockui-overlay .spinner-border {
    height: 1.35rem;
    width: 1.35rem;
}

so we cannot use Bootstrap class to adjust that. We are going to apply these classes to adjust the size if any spinner-border-sm, spinner-grow-sm

At the moment, there is only one size here and I have to work around to make it bigger. We expect that there are 2 sizes of the spinner as the instruction from Bootstrap.

Thanks, Jason

W
WilinkNet 1 day ago
Bootstrap Metronic
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)

K
KTAI Author 18 hours ago

Hi Jason,

Understanding

The BlockUI component in Metronic v8.3.3 sets a fixed spinner size via CSS (.blockui .blockui-overlay .spinner-border with height: 1.35rem; width: 1.35rem), which overrides Bootstrap's spinner-border-sm and spinner-grow-sm size classes. This means you can't use Bootstrap's built-in size variants for the BlockUI spinner.

Response

Good catch — the fixed dimensions in the BlockUI CSS do prevent Bootstrap's spinner size classes from taking effect. This is a theme-level CSS issue that needs to be addressed in the source.

This requires our development team's expertise. I'll escalate this to our technical specialists who can review the BlockUI spinner sizing and provide a proper fix that respects Bootstrap's size classes.

Sources

N/A

Next Steps

Our team will review this and include a fix in an upcoming update. In the meantime, a custom CSS override in your project's SCSS (loaded after the theme) can adjust the spinner size as needed.

This reply was generated by AI. A human will follow up if needed.

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  :(