Join David Powers for an in-depth discussion in this video Adding a container for the page content, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- Now that we've styled the Bootstrap navbar,…in this chapter, we'll start adding the page content,…beginning with a hero image and the page's main heading.…The content of a Bootstrap page needs to be in a container,…so let's first look at what Bootstrap containers consist of.…There are two types of Bootstrap container.…An ordinary container lays out the page…at three fixed widths for small, medium, and large devices,…whereas a fluid container spans the entire width…of the viewport with a default horizontal padding…of 15 pixels on each side.…
With a fixed width container, by default, Bootstrap resizes…the layout automatically on extra small devices,…but uses fixed widths of 750,…970, and 1170 pixels…on larger devices.…With the custom layout grid that we created in chapter one,…the fixed widths would be 632,…938, and 1170 pixels.…But I think the main purpose of a responsive design…is to adjust automatically to the available screen width,…so we'll use a fluid container.…
So, let's get back to Dreamweaver.…It's important to realize that Dreamweaver adds…
- 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.