Bootstrap 4 offers a range of different navigation menus. Explore each one and then learn how to insert and begin editing a navigation bar that will always remain at the top of the page.
- [Instructor] In this chapter, we'll insert…and edit a navigation bar in our Bootstrap page.…Dreamweaver CC makes inserting a Bootstrap Navbar…a breeze with just a couple of clicks.…So let's get to work.…Make sure you've got the focus in live view by clicking…anywhere inside live view.…And that brings up this blue outline with body.…You need to be able to see that blue outline…to ensure that that Navbar is inserted…in the correct place.…Next go to the Insert panel and from the menu at the top,…make sure that Bootstrap Components is selected.…
And then we need to scroll down a little bit to find it.…And here we've got Navbar…and immediately below that is Navigation.…So, what's the difference?…Well, let's start by expanding Navigation.…Just click that little down arrow there.…That opens the sub menu.…We've got Nav Tabs, Nav Tabs with Dropdown,…Nav Pills, and Nav Pills with Dropdown.…Nav Tabs creates a Navigation menu that's…styled like a series of tabs.…And Nav Pills is a menu styled as a series of buttons.…
And with Dropdown, means they include…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 32m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- 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.