Join David Powers for an in-depth discussion in this video Duplicating columns with placeholder text, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- We've nested a row inside a column…and the new row has just one column…that spans only half the row on small devices.…I'm going to populate this column…with placeholder content…and then duplicate it five times…to create six highlight articles at the top of the page.…So make sure that the column…in the nested row is still selected…and then in the Text Selector,…at the bottom of the document window,…right click and select Quick Tag Editor…and let's change this from a Div to an Article.…
Again, this will make it a lot easier to identify…in the Done Panel.…So press Enter or Return twice to confirm the change.…With that column still selected,…go to the Insert Menu…and select Image.…We want to nest our new image inside that column,…inside the Article element,…and then we need to make sure…that we go to the Site Route…and then to the Images Folder…and inside the Images Folder to SVG…and select Mountains_Icon.…
And because it's an SVG,…it fills the entire column.…So let's create a style rule to deal with that.…Open the CSS Designer Panel…
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Intermediate
1. Getting Started
2. Creating the Site Navigation
3. Adding a Hero Image
Inserting the hero image6m 37s
4. Working with Columns
5. Using Device Preview
What next?2m 5s
- 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.