7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Tabs

Welcome back, in this lesson I'll show you how to use the tab control. Now the tab control has two components. First is, the tabs, the nav tabs, which contain links to the various sections. And then you have the actual tab content, or the tab panes which contain the content that will be switched. So let's start with the first component. I'm gonna an UL with a class of nav and nav-tabs. And inside, I'm gonna put like three list items. Each one containing an anchor tag. Now, each anchor tag, must have the following properties. A data toggle, which equals tab, this will it to act like a tab. And then the href, will link to the various ids that we'll set for individual tab panes. For text, let's just say section number. And for actually the href. Let's do section number as well. So now we have this. Three list items. Each one containing a link. Going to section 1, 2, 3. Having data-toggle set to tab, and the text to Section 1, 2, 3. Okay. Let's save and refresh. Great. So, we have the tabs. Now, usually the first tab is the active one. So, you can set the class, of active to the first list item. And this is what happens, next, it's time for the tab content. So, i'm gonna create a div with a class of tab content, and inside i'm gonna have three divs, with a class of tab pane, so times three. And actually each one will have the id of section-1,2,3 and each one will contain some content. So let's do a paragraph, which will contain like this is, section number content. Okay? And also I'm gonna add the class of active to the first tab-pane. And let's see. Refresh. Section one content, section two, and section three. You can add a fade effect, to each tab, by adding a class of fade, to the tab pane. So fade, and then fade. And on the first one, you gotta put in, because it's the first, tab. So now, you have a nice fade in effect. Now if instead of tabs, you would like to use pills, all we have to do is say, instead of this say nav pills. Refresh. And now you have a different looking control. If you wanna stack these vertically. You can ease the class of nav-stacked. And this also works for tabs. But of course if you're using the stacked method. It will only make sense to use pills instead, since they look different. If you want to make these tabs in equal size, you would add the class of nav justified. Right, and they will change their size to be equal. Depending on the parent element of course. Now on screen width's smaller than 768 pixels these nav links are stacked. So if we resize this. Yeah, they are now stacked, but a lot of desktops they look like this. So, that's how you can use tabs and pills in bootstrap. Now, the first component you see in a page is the nav bar, and this framework has some pretty interesting options for it, more about that in the next lesson.

Back to the top