Start learning with our library of video tutorials taught by experts. Get started

Up and Running with Bootstrap 2
Illustration by

Tabbing within the same page


From:

Up and Running with Bootstrap 2

with Jen Kramer

Video: Tabbing within the same page

On occasion, you may wish to tab between blocks of content within the same web page, usually through a tab like interface where you can click on various tabs within the page, see different kinds of information without the page having to reload or make another call to the server to switch between pages. Bootstrap has a great interface for making this kind of effect. So our starting web page looks like this right now. I have a bulleted list at the top with some names, and underneath I have some text, it's just marked up with h3 for a title and a paragraph of text that appears underneath. And we can see that here inside of Dreamweaver.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Up and Running with Bootstrap 2
2h 38m Beginner Oct 12, 2012

Viewers: in countries Watching now:

Bootstrap is a free web development tool from Twitter that, with a little bit of CSS and JavaScript experience, makes building websites quick, intuitive, and fun. Author Jen Kramer explores its 12-column grid layout; typography and icon libraries; fully functional components like nav bars, buttons, and tabs; and much more. This course also shows how to add JavaScript extras like dropdown menus, modal windows, and photo carousels.

Topics include:
  • Understanding the difference between default and fluid grids
  • Nesting with fluid grids
  • Creating a thumbnail gallery
  • Adding block quotes and lists of text
  • Incorporating images and icons
  • Adding breadcrumb navigation and pagination
  • Using tabs and pills navigation
  • Making the nav bar responsive with JavaScript
  • Adding dropdown menus to the nav bar, tabs, and pill
Subjects:
Web Responsive Design Web Design Web Development
Software:
Bootstrap
Author:
Jen Kramer

Tabbing within the same page

On occasion, you may wish to tab between blocks of content within the same web page, usually through a tab like interface where you can click on various tabs within the page, see different kinds of information without the page having to reload or make another call to the server to switch between pages. Bootstrap has a great interface for making this kind of effect. So our starting web page looks like this right now. I have a bulleted list at the top with some names, and underneath I have some text, it's just marked up with h3 for a title and a paragraph of text that appears underneath. And we can see that here inside of Dreamweaver.

So there's my bulleted list, and then underneath here's just a bunch of h3s and paragraphs. And what I'd like to do is turn this into a bunch of tabs that I can click on and see each of these artists' bios displayed individually rather than altogether on a page like a laundry list. So to make that happen, there's a couple of things that we need to do. First of all, we are going to need to do some markup here on the tabs. So we are going to start by taking this ul, and we are going to add a class of nav and nav-tabs.

Then I need to indicate which one of these tabs is going to start off being the active one. So I guess I might make the first the active one, so I'll go ahead and give that a class of active. Obviously, I could have started with any of the other tabs as the active one, if I wished. Then I am going to add a data-toggle to the a href tag for all of these, and the data-toggle as we know is what's going to help pull in the JavaScript to make this page more interactive, data-toggle="tab".

And we need to apply that to all three of these links, so I am just going to highlight that, Ctrl+C or Command+C to copy, Ctrl+V or Command+V to paste, so that it now appears in all three of these links. And finally, what I need to do is connect the specific link for Constance Smith, for example, with the chunk of text that's going to be below. The links that I have up there right now are just sort of dummy links. They don't actually go anywhere. So somehow I need to differentiate between these. So I'm going to give these names, so right here with the first one I am going to call this rewington, leave the Pound sign there in the front, the second one I'll call #smith, and the third one I'd call #ta.

This is exactly what we would do if we were using anchors further down on the page with links on the top. The links the way these were coded would skip on down to a link say, a name ta, for example. It would jump on down the page wherever that happened to be placed. We are going to do something similar here, although JavaScript driven. All right! So that's the markup that we need for the list at the top. Then underneath we're going to need to add some markup here as well. First of all, I'm going to add a section to go around all of this with a class of tab-content.

That section class is important because it's defining that this is the actual content for the web page here, and that's why I am using the section tag. So I'm going to go down and close that at the bottom. Then after the section tag, I'm going to add an article tag here, article with a class of tab-pane. So this article tag is going to get wrapped around what effectively is an article, the h3, and the paragraph.

So I am going to go ahead and end that article down here, and I can indent this h3 and the p because now they are inside of the article tag. So what I did is just highlighted all those lines and just hit the Tab key. So I am going to go ahead and add the same article class of tab pane to the top of each one of these little mini articles, and always of course, make sure you close your tags, and I will Tab over the content here to show that it's inside of the article.

One more time, paste again the article class of tab-pane", and we'll put in our /article down here in the bottom, and we'll tab over this chunk of code. Okay. So we have three articles with a class of tab-pane. We also need to add to the same article tag a couple of other pieces of information, one is an id. The ID in this particular case for this first one will be Rewington. Those of you who think about IDs in terms of CSS almost exclusively, if you're a front-end developer who just works with HTML and CSS, IDs are also used in JavaScript.

And so what we're doing here is we are connecting the link at the top with #rewington to an ID down here underneath, the ID of rewington. We're connecting these two together. So whatever you called your links up here on the top, you're going to need to take that and identify them as IDs beneath inside of these articles. So I'll go ahead and add an ID of smith and further down an ID of ta.

And one final thing that we're going to need to do, since Riley Rewington is the tab that I want to have come up by default when the page loads, I have already specified that up here on line 18 as having an li with a class of active. I'm also going to need to identify which piece of content is going to come up by default underneath, and that of course is the article here about Riley Rewington. So I'm going to indicate that that should come up when the page loads by adding a class of active to this article.

So we have tab-pane and active here for the article class, while the other article classes are just tab-pane. All right! Now that we've got all this markup in place, go ahead and save your page, Ctrl+S or Command+S to save, and Refresh the page in Firefox, and you'll see that we have tabs now going across the top of the page. When I click on Constance Smith, you can see that her information loads here inside of the tab. The little dotted box I have up there because I have selected it at the moment. If I click away from that tab, that box goes away, and here's Xhou Ta, and you'll see that the bio for him is listed here as well. So we can click around in these tabs.

Notice that the URL for the page never changes. We are just displaying different sections of the page here inside of these tabs. So this is a really handy effect. I see it in use on a number of websites these days. It's a little bit more interesting than those long laundry lists or skipping things down the page we used to do back about 10 years ago. This is a lot more fun, a lot more interactive, and certainly more attractive. Some of you might be wondering about Search Engine Optimization now that I've separated these out between the tabs, and the answer to that is Search Engine Optimization should not be impacted at all. Why is that? Well, if you take a look at the raw HTML for this web page, the raw HTML is all spelled out right there in the web page.

So Google would be able to see that when it comes to visit your website. It can read all of the content there. It won't see the JavaScript, it won't see the JavaScript effects, it will see the links at the top of the page, they will see that those link down to further into the page where the IDs are, but the page is very readable to Search Engines, and all of the tabs can be indexed very easily by Search Engine Spiders.

Find answers to the most frequently asked questions about Up and Running with Bootstrap 2.


Expand all | Collapse all
please wait ...
Q: I am trying to create the image carousels shown in this course, and they are not functioning properly. The custom.css file seems to be missing from the exercise files and I think this is the reason. Can you provide it?
A: custom.css isn't created until the carousel indicators are added. However, these styles have to do with the way the indicators look, and nothinghas to do with the way the carousel functions.
 
Are you sure you're working with Bootstrap 2.x? You download that from here: 
http://getbootstrap.com/2.3.2/. The carousel changed radically between Bootstrap 2.x and Bootstrap 3, and this course might not work with version 3.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with Bootstrap 2.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.