Business Catalyst and Bootstrap

[KenTPT]

Hi all,

I am updating one of my BC sites to use Bootstrap as a test, as I feel responsive features are important for site visitors and Bootstrap stops me having to reinvent the wheel on every site. All is well except when trying to get the V2 menus with dropdowns to work with Bootstrap (cannot change the class for dropdown <ul> list items into a Bootstrap friendly class). Has anyone managed to get this working, or have a work around as it is the only thing stopping me from rolling out Bootstrap on all of my customers sites.

P.S. any knowledge gained will of course be shared on this thread.

Regards

Ken

[Simon Darby - NZ]

Hi Ken

Check this out: http://joe-watkins.io/articles/build-a-twitter-bootstrap-dropdown-menu-with-business-catalysts-dynam...

Cheers

Simon

[DmediaSolutions]

Hi Ken,

Did you find out a way to add dropdown with bootstrap template in business catalyst? Please reply. Thank you.

[Liam Dilley]

Read the post from Simon.

[DmediaSolutions]

Thanks Liam for response. But the link is not working

[Simon Darby - NZ]

Try this: Business Catalyst Tutorial - Twitter's Bootstrap Dropdown Menu Items - YouTube

[DmediaSolutions]

Thank you Simon. It worked.

[Tony_YW_Lam]

Hi DmediaSolution, i follow the tutorial but it all mess up. when add the BC tag (menu v2), the menu show vertical and all child il shows up? could you please advice? 

[dautm73766513]

You can use liquid to render your menu the way you wan with all the classes you want

{module_menu render="collection" menuId="1558121" template="" collection="menu1"}

{% if menu1.items %}

    {% for i in menu1.items %}

        {% if i.items %}

        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="{{i.url}}">{{i.label}} <i class="fa fa-angle-right hidden-sm hidden-md" aria-hidden="true"></i></a>

            {% else %}

            <li><a href="{{i.url}}">{{i.label}}</a>

        {% endif %}

        {% if i.items %}

            <ul class="dropdown-menu" role="menu">

                <li class="mobile-link"><a href="{{i.url}}">All {{i.label}}</a>

                </li>

                {% for j in i.items %}

                <li><a href="{{j.url}}">{{j.label}}</a>

                </li>

                {% endfor %}

            </ul>

    {% endif %}

        </li>

    {% endfor %}

{% endif %}

this is ready for bootstrap