Join Ray Villalobos for an in-depth discussion in this video Using multiple Bootstrap grids, part of Bootstrap Layouts: Responsive Single-Page Design.
- Our light is looking pretty good,…but we're limiting ourselves…to a single break point in our grid.…Let me show you what I mean.…If we scroll down over here to the services section,…you'll notice that we have a very nice…three column layout, and if we make…that smaller, you'll see that we still have…the three column layout until we reach…about that point, and then we have…a single column layout.…What's doing that is right here…in this article class.…So we're asking the browser to add a small size,…make sure that each one of these article elements…is taking up four out of the 12 spots in the grid.…
So it's creating this three column layout.…Now at this particular size,…I think it would be nicer to just have…a two column layout.…I think that when you make this…a lot bigger, I think the three column…layout works a little bit better.…But at this size, I think a different layout…would be better.…We can take care of something else as well…that's kind of bothering me.…If we scroll this up into the our mission section,…
Author
Released
2/5/2015- 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
Duration
Views
Related Courses
-
Bootstrap 3: Advanced Web Development
with Ray Villalobos3h 28m Intermediate -
Learning Sublime Text 2
with Kevin Yank1h 40m Beginner
-
Introduction
-
Welcome1m
-
What you should know1m 6s
-
Exercise files58s
-
-
1. Understanding Bootstrap Layouts
-
What we'll build3m 19s
-
Using rows and columns7m 26s
-
Finishing our simple layout6m 18s
-
Building a footer layout5m 23s
-
Adding a basic carousel7m 54s
-
-
2. Customizing Bootstrap Styles
-
Overcoming injection issues4m 25s
-
Styling single-page designs9m 42s
-
Tackling a multilevel layout6m 21s
-
Fixing our footer5m 18s
-
3. Adding Interactivity
-
Smoothing our page scroll2m 36s
-
Randomizing our carousels9m 40s
-
Conclusion
-
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.
CancelTake 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.
Share this video
Embed this video
Video: Using multiple Bootstrap grids