Learn how to use the visual tools in Live View to resize, offset, duplicate, and copy Bootstrap columns. Discover that rows are simply horizontal containers, so columns can be stacked vertically inside a row if there isn't sufficient horizontal space. Also, learn how to set different column widths at different breakpoints.
- [Instructor] In this chapter, we'll explore working…with rows and columns to add…and lay out content on a page.…We'll begin by looking at how to resize…and duplicate columns.…This is the page we've been working in…throughout the course.…Eagle-eyed viewers will notice…there's an extra breakpoint here…at 440 pixels in the Visual Media Queries bar.…I added that to resize the text over the image.…It won't be used elsewhere, so don't worry about it,…or if you added a media query in a different place.…
Let's insert a new row after the Hero image.…First, resize the document window…by clicking to the right of 576 pixels…in the Visual Media Queries bar.…Then, select the image,…and press the up arrow on your keyboard…to start moving up the underlying HTML structure.…First, you get the h1 heading,…then the 12 column div, and finally the row.…If you're unsure, you can check in the DOM panel,…there it is, the row, which is the first one…nested inside the Container Fluid div.…
Then, open the Insert panel…and make sure the Bootstrap Components is selected,…
- 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 42m 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.