Join David Powers for an in-depth discussion in this video Resizing columns, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- In this chapter, we'll add the main contents…of this page using a combination…of Bootstrap rows and columns.…Dreamweaver CC makes it easy to resize columns…to achieve the desired layout.…Make sure that the Document window is…at least 1200 pixels wide.…I can see from the Status Bar…at the bottom right of the Document window…that my window size is greater than 1200 pixels,…so that's fine.…We need to select the row…that contains this image of the lake.…So in the DOM panel, select the div…with the id lake.…
This ensures that Dreamweaver will insert…the next element in the correct place.…So in the Insert panel, from Bootstrap Components,…select Grid Row with column.…We need to indicate where to insert it.…It needs to go after the currently selected element.…So click that and the number of columns to add will be one.…That inserts the new row and Dreamweaver leaves it selected.…I think one of the problems of working with Bootstrap is…that everything is a div and this could make it difficult…to identify elements in the DOM 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.