[MUSIC] In the previous lesson I referred to the nav class that is used in Bootstrap for creating navigation structures. We explored the navbar nav already in the previous module. In this lecture, we're going to explore nav tabs and nav pills in a bit more detail. And the exercise that follows this, we'll look at how we make use of this to create a navigation structure for our web page. Tabs and pills provide a interesting navigation structure for our web page. They will allow you to enclose content inside your web page that the user can navigate among the content without reloading the web page to a different web page. So if you have a certain amount of content to be presented in your web page, but want to show only part of the content on your web page, but still provide user with an ability to navigate to other parts of the content, then tabs and pills can be very useful for this purpose. What's better than to just go and take a look at the use of tabs and pills in navigation? Taking a look at an example of the use of tabs in navigation, you'll see that in this particular case, you have the Corporate Leadership information in our aboutus.html page, enclosed inside tabs with the tab navigation built on top. So you can see that you have the four different corporate leaders represented in their own tab here. And the content currently revealed on the web page is only the details about the first corporate leader. So if you want to switch to others, then you simply click on the corresponding tab, and then reveal that content in your web page. So notice that we are not navigating to a different web page, but we are simply revealing the content using this tab navigation here. Instead, in some cases you may find a pill-based navigation more useful for your purpose. So a pill-based navigation works like this. So you still have the same navigation structure on top here, but the currently displayed information will be highlighted as a pill here. So if you switch to another part of your navigation, notice how that particular item is being highlighted in the web page, and the corresponding information being displayed in the tab content down below. So this is a pill-based navigation. So this uses nav pills instead of nav tabs for the class being applied to the nav class there. Now that you have seen an example of the use of tabbed and pull navigation in a web page, I'm sure you're curious to know how it is actually constructed. That is what we're going to explore in the exercise next. So we will use tabbed navigation and then use tab content and tab panes to organize the actual content that will be displayed in our web page. [MUSIC]