When you insert a new row, Dreamweaver automatically assigns grid classes to control the width of each column at or above the current breakpoint. At narrower widths, the columns fill the row horizontally and are stacked on top of each other. In this video, learn what happens at lower breakpoints and discover a strategy for inserting rows in the most efficient manner.
- [Instructor] We now have a separate Bootstrap container…for the page content.…And to start laying out the content,…we need to insert a row with the appropriate number…of columns.…So make sure that the container is selected in live view.…Then, in the Insert panel with Bootstrap component selected,…the third item down is grid row with column.…Click that, it opens this dialog box.…It asks where we want the row to be.…Do we want it to be before the selected element,…after the selected element, or nested inside?…We want it to be nested inside our container so select that.…
And then you can change the number of columns to add here.…The default is three.…I'm going to stick with three and just click okay.…And that has inserted our row inside the container,…the row is now selected…and you can see these vertical lines, the dotted lines,…they indicate the columns that have been inserted.…And if I select one of those columns…you can see that it's a div…and it has been assigned the class, col-lg-4.…
Now depending on how wide your document window was when you…
- 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 32m 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.