Topic: Stepper displaying title underneath

wuohyeah priority asked 1 month ago

Expected behavior

Due to my form consisting of 8 steps, current layout of stepper is too long for me. How can I set stepper text displayed underneath the number like the attached image?

enter image description here

Actual behavior

enter image description here

Resources (screenshots, code snippets etc.)

enter image description here

Bartosz Cylwik staff answered 1 month ago

We do not have an option that would change the position of those elements. You can try to edit the css yourself and see whether that works.

For example:

  • Try changing the flex-direction to column for the stepper-head element
  • 0 !important to the margin-right property of the stepper-head-icon element

The only problematic things here are the :after and :before elements (lines). You would have to play around with their styling.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No