Learn how the advantage of using a row to group elements as a logical unit becomes apparent when applying styles.
- [Narrator] If you take a literal approach…to Bootstrap rows, the feature section…should really be three separate rows,…because the columns for this heading…and for this image of Tunnel View are always too wide…for any other content to be alongside them.…However, using a row for these vertically stacked columns…makes it easy to style them as a single unit.…They've already been centered by using the…justify-content-center Flex utility class.…So let's quickly add a few more styles.…
So I'm going to switch to the CSS Designer,…and I know I'm going to need some extra space,…but before doing that, I'm going to drag the…Assets panel out, so that I can see it.…And the reason I'm doing that…is because in the images folder…is this file, colors.png, that's got some swatches…of the colors I'm going to use,…and if necessary you can resize this pane at the top.…So I can now collapse those columns,…and in the CSS Designer in the Sources pane,…make sure that the stylesheet…for custom styles, yosemite.css, is selected.…
Then in the @Media pane, we need to select Global…
- 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
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 32m Beginner
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.