Bootstrap 4 makes it easy to change the color scheme of a navbar with predefined classes or a single inline style. Explore what the classes do and the limitations of this approach.
- [Instructor] Bootstrap 4 makes it easy…to change the color scheme of the navbar…with a couple of classes or a single inline style.…First thing to do is to make sure…that you've got the whole of the navbar selected.…I've managed to do that,…you can always check it in the DOM panel.…It's the nav element that you need to select.…No real surprise there and in the element display,…you can see that the last two classes are,….navbar-light and the .bg-light.…
The first one .navbar-light controls the color of the text…and at first this seems counter intuitive…because we've got dark text here but the light means…that it's intended to work with light background colors.…This other class .bg-light controls the background color.…Remove that by hovering over it…and clicking the little x icon…and then click the plus button to apply another class.…All of the background color classes begin with .bg-…and we've got code hints there…which show us all the various options available.…
If we try .bg-dark we get that.…Let's just get rid of that, try again .bg-…
- 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.