Join David Powers for an in-depth discussion in this video Defining the Bootstrap layout grid, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- We've set up the Dreamweaver workspace…and created a site for our Bootstrap page.…The first step is to define the Bootstrap layout grid.…So we need to go to the File menu and select New.…Then under New Document,…the Document Type should be HTML,…and we need to select Bootstrap as the framework,…and make sure that Create new is selected…for Bootstrap CSS.…We don't want to include a pre-built layout.…That's just got some examples of Bootstrap components…inside a page.…
We're going to build completely from scratch,…so deselect that checkbox under Design.…And then we're going to change the default settings…for the Bootstrap layout grid,…so open Customize.…By default, Bootstrap has a 12 column layout grid.…That's fine.…The Gutter or the space between each column…is 30 pixels.…That's also fine but I think that 768 pixels…for the first breakpoint is far too big.…I'm going to change that to 650 pixels.…
And then for the Medium breakpoint,…I'm going to change that to 960 pixels,…and then just click Create.…And Dreamweaver churns away,…
- 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.