- Tabs are a great way to organize…certain types of content in a very concise base.…They're pretty easy to do with Bootstrap,…so let's take a look at what you would need…to change this series of different categories…into tabs.…So, first, there's going to be two pieces…that we have to make.…The first one is the actual tabs.…To do that, we're going to need a list…so that can be a UL with a class of "nav," like this.…And then inside, we're going to need list items…and in addition to the class of "nav,"…we're going to specify the navtype here,…so you can say either "nav-tabs"…or "nav-pills"…depending on the design that you want.…
Let's go ahead and go with tabs first.…We'll also need to add a role,…this is for screen readers,…of "tablist."…So this just identifies this as something…that will be a tablist.…The screen readers will know what to do…with this type of element if we give it a role.…So, each one of the list items will also need a role,…and in this case the role will be "presentation."…And then we just add the label that we want in here.…
- Understanding containers
- Using the 12-column grid to create a responsive webpage layout
- Creating rows and columns
- Styling content with Bootstrap CSS classes
- Adding CSS styles
- Creating and styling forms
- Creating dropdown menus and buttons
- Adding images and video
Skill Level Beginner
Bootstrap 3: Advanced Web Developmentwith Ray Villalobos3h 28m Intermediate
1. Getting Started
2. Working with the Bootstrap Grid
3. Exploring Basic Bootstrap CSS Classes
4. Adding Other CSS Styles
5. Styling Forms
6. Navigation Components
7. Media Components
8. Content Containers
Next steps1m 43s
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.