When converting an existing application to use Bootstrap 4, I spent a fair amount of time trying to figure out restore right-align to menu items, so I thought I would share what I found.
Basically, it is as simple as adding the new Bootstrap class "ml-auto" to the first menu item that you wish to be right-aligned; if there are additional menu items added after that one, they too will be right-aligned, but do not need to have the class added.
I am using a SiteMap to build my menu, so I have added my own attributes to the SiteMap (see image) to configure this and other characteristics, e.g. icons. The Menu itself is added as a Partial View, and the partial contains the logic to add the custom configurations in the BindTo method (see image).
Additionally, I am using the responsive panel to toggle the menu to vertical below a breakpoint, so in my panel implementation I check the window width to remove or add the "ml-auto" class to control the display, i.e. remove the right alignment during vertical orientation and restore it when horizontal (see image)
Hope this helps someone...
1 Answer, 1 is accepted
Hi Russell,
Thank you for your input. I believe that your findings will be useful for other developers too.
Happy New Year!
Regards,
Veselin Tsvetanov
Progress Telerik