Join David Powers for an in-depth discussion in this video Inserting the hero image, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- We now have a separate Bootstrap container…for the page content.…Let's start by adding the hero image.…Everything inside the container needs to be nested…inside a row, so make sure that the container…is still selected in live view.…And in the Insert panel on the Bootstrap component,…the third item down is Grid Row with column.…So if you select that, we get this dialogue box.…It asks where you want to insert the row.…It needs to go inside the container,…so we need to select Nest.…
And then it asks how many columns to add.…The default is three; I'm going to change that to one,…and then click OK.…And it looks that all that has happened…is that that little element display has changed…from container to div row.…That's because it's been nested inside,…and Dreamweaver has automatically selected it.…And if we click inside that row,…the element display changes…to div col-md-12.…So in other words, we've got that div, which is a column,…that spans the full width of a medium-sized device,…selected inside that.…
Now normally, I would recommend using…
- 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.