In this video, discover that a Bootstrap row should be regarded as a container for other elements that you want to treat as a logical unit rather than as a single line across the page. Then learn how to build the skeleton layout for a feature section in which the columns are stacked vertically at all breakpoints and centered using a flex utility class.
- [Narrator] Earlier in this chapter,…I showed how easy it is to distribute columns equally…by applying a flex utility class to a row.…Centering content is just as simple,…using a different flex utility class.…As well as showing you how to do that,…I want to discuss what a bootstrap row really is.…This highlight section consists of six bootstrap columns…in a single row.…But if you look at it,…well really I've got two rows of three.…And if I resize, I've now got three rows of two.…
And on an extra small device,…each column fills the full row,…and the columns are all stacked vertically…on top of each other.…So rather than thinking literally about a row…as a single line across the page,…it's a container for other elements…that you want to treat as a common group,…and maybe style as a single entity.…I want to create a new feature section…below these highlights with all its contents centered…at most break points.…So I'm going to resize the document window…by clicking the visual media queries bar,…just to the right of 768 pixels.…
- 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 46m 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.