Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

A button with the class btn-white is transparent


The btn-white class doesn't actually apply a white background a button. When added to a container with a background color, it behaves as transparent. I would expect a white button to have a white backgound.

https://preview.keenthemes.com/html/metronic/docs/base/buttons


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


btn-white was never (or at least not in v4 or v5) part of Bootstrap, so I had always assumed you guys added it to extend the button options. It used to work in Metronic though AFAIK as when I upgraded all my white buttons went transparent.



Hi,

Sorry for the inconvenience. Yes, it used to work before v8.1.6 as a custom button class but in the recent update v8.1.7, we removed it.

Regards.



I'm a little concerned that you would just remove something that is a breaking change, and it's not mentioned in the release notes either. I'm curious what the reason for removing it is? I now have to go and add a load of classes to all the white buttons to achieve the same effect which is going to take time and effort. Has anything else been removed recently I might not have noticed yet? I'm very concerned about upgrading in future as I feel I have to do full regression testing even for a minor point release.



Hi,

Sure, we will highlight such changes with more details in the changelog right away. It seems we missed this. Appreciate your suggestion on this.

No other breaking changes. Only the white related utility classes. In the recent update we integrated Bootstrap 5.3.0 alpha update which came with a built-in dark mode support and we had to remove btn-white and bg-white classes that would conflict with the new dark. Instead of this class, we recommend using bg-body which works well for dark and light modes.

In your code, you can use the global find and replace tool to globally update the btn-white class to bg-body class.

We also suggest you not update your production with each Metronic update since we use lots of 3rd party plugins and they may introduce their own breaking updates. However, we deeply test each release and each update is stable. So the updates should be taken seriously and fully tested in the development environment before pushing to production.

Regards.



Hi,

Thank you for the heads up. After releasing the Bootstrap 5.3.0 alpha update the btn-white class was depreciated. We will remove it from the docs in the next update. Instead, you can use the bg-body class which works well for light and dark demos.

If you need any further clarifications please do let us know.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(