In this video, Ray Villalobos works through the group of components called navs. Navs are similar but not exactly like navigation; they help you build tabs and pills, two types of simple nav components available in Bootstrap.
- [Instructor] There's a group of components called Navs.…Now this component had a lot of changes…in this new version of Bootstrap…due to the implementation of Flexbox,…and thankfully became a lot simpler to use.…Now to create Navs,…you can use either the unordered lists…or use Navs and regular Divs…using unordered lists.…It's a little more difficult,…it requires a bit more code.…What you do is you create the nav class inside the UL,…if you're not using unordered lists,…you can just create that class inside a nav tag.…
And then inside, you add nav-items…for each of the items.…The difference is…when you are using these without ULs,…you put the nav item in the link.…When you are using ULs,…you put the nav item in the list item.…And then inside the link,…which would be the anchor tag,…you use the class of nav-link…for either one of these options.…Inside the nav links you have a couple of options…to display the links differently…depending on the type of styles that you're using.…
You can use the active class…if you want the item to show up as active,…
- Creating a basic template
- Reviewing basic styles and typography
- Using colors with Bootstrap
- Working with classes that help you deal with images
- Working with grid containers
- Offsetting columns
- Using list groups to style lists, buttons, and links
- Using breadcrumbs
- Reviewing layout components
- Using form styles
- Working with interactive components
Skill Level Beginner
Responsive CSS with Sass and Compasswith Ray Villalobos3h 22m Intermediate
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
1. Getting Started
2. Using Basic Styles
3. Mastering Layout with Bootstrap
4. Using Navs and Navbar Components
5. Basic Style Elements
6. Layout Components
7. Using Form Styles
8. Working with Interactive Components
- 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.