Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

eric1972 pro asked 7 years ago


Hi I tried 4.4.1 with bootstrap 4 beta, only hidden-md-down work correct, I made a simple page for this issue, please check  http://bobo2010.ddns.net/eric/admin/main_nav.php I added hidden-sm-down class to every nav-link to hide word when in small device, there are no problem with previous version 4.4.0 alpha 6, any idea?

Magdalena Obalska free answered 7 years ago


Yes, you can just include mentioned files.

eric1972 pro answered 7 years ago


thank you for help, I'll do hidden-* classes by my self, now I got another question, I have mdb pro version, and now I have to publish project to my customer's server, I can include mdb.min.css/mdb.min.js right?  no need to encrypt these files? or something else? thank you and forgive my poor English.  

Sebastian C pro answered 7 years ago


The hidden-* classes have been removed from bootstrap v4-beta and has been replaced by d-none classes.

* Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
* Dropped the bulk of .hidden-* utilities for new display utilities.
  For example, instead of .hidden-sm-up, use .d-sm-none.

To replace hidden-md-down, you would instead use both classes d-none and d-md-flex  (or block, inline, etc)
This should hide everything above size xs then display everything above size md

 

See display utilities:
https://getbootstrap.com/docs/4.0/utilities/display/

See migration notes:
https://getbootstrap.com/docs/4.0/migration/

 


Magdalena Obalska free answered 7 years ago


Hi, as I understand, your aim is to hide nav-links on small devices? If yes, read the documentation: https://mdbootstrap.com/layout/bootstrap-navigation/ and https://mdbootstrap.com/javascript/sidenav/, pick your example and use the right code, that's all you need, without any additional classes. If your problem is associated only with .hidden-*-down, read the documentation: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/ and try, for example, use this class with simple paragraph text to see that it works well.  

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags