Join Ray Villalobos for an in-depth discussion in this video Modifying Bootstrap Navigation Styles, part of Bootstrap Layouts: Responsive Single-Page Design.
- Just changing our font is starting to make this site…look a lot different than the default Bootstrap look.…The next most obvious thing that we could change…is the header navigation.…And I have to warn you…that overriding the Bootstrap navigation styles…isn't particularly simple.…The reason for that is,…if you look at the HTML that we used…to build this navigation,…you'll notice that it has a bunch of different classes.…You can see them all right here as I'm selecting them.…So the problem is that,…even for just this navigation tag right here,…you have the navbar as well as navbar-default,…as well as navbar-fixed-top classes.…
And each one of those can have…different margins and paddings,…which are difficult to target…when we want to override them.…So a lot of we're sort of trying to figure out…where a margin is coming from,…and we have to dig through these different classes.…So if we go back into the layout ...…What I usually do is right-click…on an element that I'm targeting,…and then choose Inspect Element.…I'm using Google Chrome here.…
- Analyzing your markup
- Creating simple column layouts
- Creating basic navigation and a simple carousel
- Modifying Bootstrap styles
- Working with branding and toggle styles
- Adding interactivity
Skill Level Beginner
1. Understanding Bootstrap Layouts
2. Customizing Bootstrap Styles
3. Adding Interactivity
Next steps2m 50s
- 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.