Join David Powers for an in-depth discussion in this video Adding the page footer, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- I've added content to the other…two columns in the article section,…and because I'd resized the document window…before adding the nested rows and columns,…Dreamweaver has automatically applied this class…to each of the columns, col-sm-4.…That means that they'll span four…of the layout grid columns on small devices,…but not only that, they'll also span four layout…grid columns on medium and large devices,…because Bootstrap grid classes…apply to higher levels unless overridden.…
So if we expand this to see…what it looks like on a medium device,…we can click just to the right of 960 px,…in the visual media queries bar,…that shows us the layout on a medium device,…and it's still in three columns,…even though we've only got this single class, col-sm-4.…We don't need to add col-md-4,…because col-sm-4 will look after it.…And if we double-click in the gray area,…so that the document window fills the full width,…we're still laid out using three columns…even though we've got only this one class.…
The only difference here is that this row…
- 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.