Introduction: Bootstrap is an excellent resource that many web designers use to help reduce the amount of code they must type. It is a collection of useful files, example sites, and images that can help create beautiful and functional sites. Bootstrap is best used as a starting point to be customized and changed.
Step 1 (0:06): Create a root folder in a place that will not change. At this point, nothing needs to be placed in this folder.
Step 2 (0:25): Go to
getbootstrap.com and select Download Bootstrap.
Step 3 (0:37): Double-click the file to unzip it. Then, move the unzipped folder into the root folder created in Step 1.
Step 4 (0:55): Take the css and js subfolders out of the download folder, and place them on the same level in the root folder as the download folder.
Step 5 (1:05): Open Adobe Dreamweaver and create a new blank HTML5 document.
Step 6 (1:29): Go to
Examples. This tutorial will be creating the blog, but any example will do.
Step 7 (1:33): Right click the example, then select View Page Source. Press Command+A to select all of this text, Command+C to copy it, and then go to Dreamweaver and press Command+V to paste the text into the HTML5 document created in Step 5. The code will appear unformatted for now - that will be fixed soon.
Step 8 (2:15): Save the document into your root folder on the same level as the css, js, and download folders.
Step 9 (2:55): Look at the links, and make sure the file paths described in them are clear and accurate. For example, the link for bootstrap.min.css will show up as “../../dist/css/bootstrap.min.css”, when it should be just “css/bootstrap.min.css” in order to better reflect the file structure being used in this tutorial.
Step 10 (3:30): Take the code specific to this blog page by using View Page Source, and place it in a new CSS document in the css subfolder of the root folder.
Step 11 (4:00): Now that the page created in the root folder looks identical or nearly identical to Bootstrap’s template, edit the HTML and CSS to create your own page! This is the most important part of using Bootstrap - otherwise you are just copying somebody else’s code without adding anything unique. a
Advice: Since Bootstrap’s CSS is not well-organized, it may be helpful to highlight the div that is being formatted and use the CSS Styles panel in Adobe Dreamweaver.