The brand in a Bootstrap navbar identifies the site and acts as a link back to the home page. To give the brand more visual appeal, learn how to add an SVG icon as a background image and move it into position so that it's not obscured by the text.
- [Instructor] The nav bar could do with…some visual interest around the brand,…that's this text here, Yosemite.…It not only identifies the site,…it's also a link back to the home page.…So click the text to select it,…and the element display confirms we've selected…the link with the class nav bar brand,…so we can now style it.…So open the CSS designer panel,…and I'm just going to collapse these panels down here,…then in the sources pane, make sure…that Yosemite.css is selected,…in the @media pane, we haven't created…any media queries yet, but if you have,…make sure the global is selected,…because you want to apply this to all sizes,…and then in the selectors pane,…click the plus button to add a selector.…
Because we've got nav bar brand selected,…Dreamweaver makes a suggestion,…it's far too specific, so press the up arrow once,…that makes it less specific, it's just nav bar brand,…that's exactly what we want.…Press enter or return to confirm that.…Then in the properties pane, if show set is selected,…deselect that and then click the fourth icon…
- 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.