how to reverse Bootstrap Collapse items?

Question

I need To reverse Bootstrap Collapse Items I started a rtl project with Bootstrap . and for sure the nav menu items will be reversed cause it will start from right to left . How can I reverse It .

anyone can help ?

Answer 1

You could try reversing the order with CSS. So taking from this answer and wrapping it in a media query so it only applies on the mobile size:

@media (max-width: 767px) {
    ul.navbar-nav {
        transform: rotate(180deg);
    }
    ul.navbar-nav > li {
        transform: rotate(-180deg);
    }
}

Here's a demo of it in action: http://www.bootply.com/xcbdwWMzkL#

Answer 2

There is a cool theme called "bootstrap-rtl" that allows you to use bootstrap normally while it takes care of all "rtl" issues. I started using it for all my rtl (arabic) websites it helps a lot and it's so easy to use. you have just to include it's css file after including bootstrap and that's it. you can download it from the link below.

bootstrap-rtl