How to Enable Bootstrap 3 Hover Dropdowns

I love Bootstrap, but I’m not really a fan of the navigation it creates. It works really well when you’re prototyping, but if you’re doing a high-level design project, you’re better off going custom. Bootstap’s default navigation doesn’t have out-of-the-box hover dropdowns, and the mobile menu is arguably pretty boring. If you do use it though, there are some tricks to help you tweak it without going completely custom.
Some clients, sites, or apps will require you to have hover dropdowns on desktop. As you can see below, this doesn’t come out-of-the-box with Bootstrap 3.

Defining Proper Media Queries

Bootstrap has clearly defined breakpoints for different kinds of devices, specified by using CSS media queries. The following are the breakpoint categories used for the different types of devices:

1. Extra Small Devices (e.g. cell phones) are the default, creating the “mobile first” concept in Bootstrap. This covers devices smaller than 768px wide.
2. “Small Devices” (e.g. tablets) are targeted with @media (min-width: 768px) and (max-width: 991px) { ... }.
3. Medium Sized Devices (e.g. Desktops) have a screen size smaller than 1200px and greater than 991px, using @media (min-width: 992px) and (max-width: 1199px) { ... }.
4. Larger Devices (e.g. wide-screen monitors) are greater than 1200px, targeted using @media (min-width: 1200px) { ... }.