Go to File > New and choose the Bootstrap tab. Select "Create new" and uncheck "Include a pre-built layout". Click Create.
 |
The "Bootstrap" option in the New Document window. |
When the Save Style Sheet File dialog opens, navigate to the stop-drop-roll folder and save the file as "custom.css".
 |
The Save Style Sheet File dialog should open after you click "Create". If it doesn't, keep going. I will show you how to create a custom.css file using the CSS Designer panel in the next steps. |
The Bootstrap layout will open in a new document window. Right away, go to File > Save As, saving the HTML file as index.html in your stop-drop-roll folder.
Source Code
Using the Related Files toolbar, select Source Code and switch to Code View.
 |
The Related files toolbar allows you to toggle between all the files linked to your html document. |
So far, this is just an empty HTML file, but it is linking to several CSS and JS files.
If you've saved your index.html file inside your stop-drop-roll folder, you'll notice a ../ before the links to the css and js folders, indicating that they are located one folder level up from the index.html file. Dreamweaver always saves these files at the top level of the local site folder.
 |
Dreamweaver created CSS and JS folders along with the new Bootstrap layout. |
Bootstrap.css
Use the Related Files toolbar to toggle to the bootstrap.css file. This is your Bootstrap framework. Take a look, but don't edit or modify any of the styles that you see here. When you need to modify the design, you'll use your custom.css file.
Custom.css
Use the Related Files toolbar to toggle to the custom.css file. If you're lucky, you'll see an empty CSS file. This file should have been created via the File > New dialog. If you're not lucky, you'll see an error warning you that the custom.css file is not on the local disk.
 |
This is the warning you may receive when the custom.css file is not on the local disk |
Not to worry! Toggle back to the Source Code in the Related Files toolbar. Go to Window > CSS Designer to open the CSS Designer panel, then drag the panel so it docks behind the Files panel (as you drag the panel, you'll see a blue outline when the panels are ready to dock). Click the + sign next to "Sources". Choose "Create a New CSS File".
Type "custom.css" into the File/URL field and choose "Add as Link". Click OK.
Choose File > Save All. Your Bootstrap framework is installed!
