Our current navigation bar is great – it's functional, but not responsive. Luckily for us, Bootstrap has a navbar
component that implements responsiveness and adaptiveness for us. We just have to wrap our navigation elements with some Bootstrap classes and then sit back and check our beautiful navigation bar that collapses on mobile devices and expands on desktop devices. Check Bootstrap's documentation regarding the navb
ar
component: https://v4-alpha.getbootstrap.com/components/navbar/.
Note
Keep in mind that this URL is for the alpha version. The next stable version 4 will be available on the official website.
These are the classes we are going to use to transform our simple navigation bar into a Bootstrap-managed responsive navigation bar:
navbar
: This wraps the whole navigation bar elementnavbar-toggleable-*
: This should also wrap the whole navigation bar element and will tell it when to toggle between expanded/collapsed state (for example,...