Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Twitter's Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

While in the process of developing our own Responsive Twitter Bootstrap Skin for DotNetNuke 7, we had to jump over a couple of hurdles. First we had to figure out how to implement a dropdown on hover menu. Secondly, we had to overcome the Bootstrap issue where once you are on a child page, you cannot navigate back to the parent page in the menu. Bootstrap is against both of these features, however we feel as though these features provide a user friendly interface, especially while using a tablet or smartphone. With that said, we wrote this article to save you the headache to incorporate these two features in your Responsive Twitter Bootstrap Skin for DotNetNuke 7.

The real beauty was that I realized, I had included both the data-toggle="dropdown" and the data-hover="dropdown". You must only use the data-hover="dropdown" to fix both issues! The correct code is below:

Now you will have dropdown on hover menu items AND will be able to navigate to the parent page from the child page.