Using the Dreamweaver Bootstrap Starter Templates (new in Dreamweaver CC 2015)

Choose File>New>Starter Templates>Bootstrap Templates and then choose from the list of 6 Bootstrap Templates

• Bootstrap - Agency
• Bootstrap - eCommerce
• Bootstrap - Portfolio
• Bootstrap - Product
• Bootstrap - Real Estate
• Bootstrap - Resume.

With the HTML document open in Dreamweaver:

• the DOM panel provides an outline of the structure of the document - you can click the various icons for the tags to open and collapse the children of the tag
• in Live View, the Visual Media Queries consists of three bars as horizontal rows, each representing a category of media query. The "Toggle Visual Media Queries bar" icon appears (in CC2017 and 2018) at the left of the screen in Live View. It is the three bar icon indicated by the top arrow in the screenshot below.. If it is not showing, select the icon indicated by the bottom arrow to customize the toolbar so that the Toggle Visual Media Queries bar shows.

  

  •  Green: Media queries with max-width conditions
  •  Blue : Media queries with both min-width and max-width conditions
  •  Purple : Media queries with min-width conditions
  The breakpoint values are indicated on the bars - min-width at the left and max-width at the right of the bar.

To view your page in a specific size, click the corresponding media query bar.

• Start with the purple bar - in the Bootstrap-Agency layout, the "About Us" has three columns across, the Testimonials section has two across, and the Services section has three across
• Clicking on either of the blue bars - About Us and Testimonials go to one across, whereas Services goes to two across
• Clicking on the green bar - the result seems similar to the blue bar

If you attempt to drag one of the endpoints of a bar, you will get a message that says that bootstrap.css is read-only -- by clicking a button, you can make it editable but the usual better practice is to leave the bootstrap.css file the same and make any changes through the use of a separate external CSS file which would be referenced after the reference to the bootstrap file and hence would override any different specification in the bootstrap.css file. This makes the changes more noticeable and makes it much easier to maintain these changes if the version of Bootstrap is changed.

The breakpoints (min-width and max-width) in media queries can be edited visually by dragging the handles in the Visual Media Query to the required size. However, when you are using a DW Bootstrap Starter Template, unless you have made the bootstrap.css file editable (which is not recommended as discussed previously) you will get a message saying "Cannot update media queries. The media queries you are trying to edit are in read-only files". If you right click on the media query bar and choose Go to Code, one can go to the relevant media queries.

Above taken from https://helpx.adobe.com/dreamweaver/using/visual-media-queries.html

Revised: November 15, 2017