Topic: Bootstrap 5
Expected behavior The bootstrap 5 button tag: darkis supposed to work out of the box with a hover effect that swaps the colors around (view here): https://codepen.io/planetoftheweb/pen/wvgxyQe
*Actual behavior*In both the downloaded, latest version: MDB5 3.10.1 and the CLI, the hover effect doesn't work and hover effects need to be coded manually.
*Resources (screenshots, code snippets etc.)*View the button that I created during David's CCS beginners course, where I had to code the hover effect myself: https://high_intel_pc_01-working_button_manually_coded.mdbgo.ioYour thoughts please: shaun@highintelpc.com.au
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: PC
- Browser: Any
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
high_intel_pc_01 free commented 2 years ago
I think adding Ray's boilerplate CDN code to the HTML pages fixes that. I'll keep experimenting with it to see whether both MDB and advanced Bootstrap 5 features work consistently with it.
high_intel_pc_01 free commented 2 years ago
My conclusion is that the default Bootstrap 5 CDN (at: https://getbootstrap.com/docs/5.1/getting-started/introduction/) is different to the stock MDB Bootstrap 5 product. If all versions are added to a page, you get different effects. For example, outline buttons have a different border effect with the Bootstrap 5 CDN from Get Bootstrap included. Whereas, with only the MDB product included, outline buttons (for example, in David's Steak House restaurant landing page example) have more refined borders with the ripple effect already set as default for the btn btn-outline-light classes. Also, with the Get Bootstrap CDN links incuded, the ripple effect needs to be added manually, with the (for example) data-ripple-color="secondary" attribute. So, at least at this stage, I think having to add certain advanced, responsive HTML5 features manually, is a very small price to pay for being able to use the MDB package - especially with the MDB Go CLI features that are available.
Michał Duszak staff commented 2 years ago
Thank you for reaching us. MDB is not meant to exactly reflect all the Bootstrap styles, so some features and appearances will differ.
high_intel_pc_01 free commented 2 years ago
Thanks Michal, Yeah, all in all it's pretty good. There are sometimes problems with the code. For example, in David's "Landing Page" tutorial, in the "Our Promise" section of the webpage, the "text-right" class wouldn't work. My code was just the same as David's but for some reason, the class wouldn't work. I ended up using CSS: .text-align-12 { text-align: right !important; } https://high_intel_pc_01-landing-page-lesson-video-3.mdbgo.io/ Not sure why.
Michał Duszak staff commented 2 years ago
Could you send me a link to this tutorial? I guess it was made for Bootstrap 4, as in Bootstrap 5 the "text-right" has been renamed to "text-end"