Join Ray Villalobos for an in-depth discussion in this video Finishing our simple layout, part of Bootstrap Layouts: Responsive Single-Page Design.
- In the previous vide we started to layout…the components of our page,…and we've done a pretty good job…with this Services section.…Now I want to take some of the things that I did in Services…and see how they would apply to other sections…like Our Staff as well as Testimonials…and finally our bottom footer.…So let's go ahead and get started.…Let's go ahead and leave this in Our Staff.…We'll switch back over to our code.…What I've done so far is to create a container…that wraps everything inside this page class,…and then for each one of the elements…that I want to place in a grid,…I created a div class row outside all of those elements,…so here's the articles in this case.…
Then I created a class that specifies…how the grid is gonna affect each of these elements.…So in the case of this article right here,…which is talking about Exotic Pets,…I wanted to take four out of the 12 positions in the grid,…so I specified col-sm-4.…That means at the smaller breakpoint,…go ahead and take up four units out of the 12 units,…
- 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
Bootstrap 3: Advanced Web Developmentwith Ray Villalobos3h 28m Intermediate
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?
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.