# StepWiser

Bootstrap Resumé: the first step

Bootstrap is a framework for web pages created by Twitter employees. It uses a grid system, dividing each page into 12 vertical cells to control layouts. Out of the box it provides "responsive" layouts that change according to the width of the screen you use on your computer.

Create a new page from the Starter Templates for a resumé in Bootstrap. Save it as something like cv.htm.

The other thing to do first is to create a blank stylesheet called something like cv.css for your specific styling that overrules the standard bootstrap styling: i.e. it should be linked in the head of the cv.htm after the bootstrap.css.

The File Menu has an Attach Style Sheet option but check the code to ensure it is properly placed. F10 will call up the Code Inspector.

You can also inspect the code here. You can ignore the rest for now. This is what the code produces out of the box.

Unlike other Dreamweaver Starter Templates, the Bootstrap specimens are poorly commented.

To get a proper WYSYWYG (what-you-see-is-what-you-get) view in Dreamweaver I had to set the display to Live View.

N.B. Dreamweaver wants you to hook up to bootstrap.css but gave me the wrong link. You too may need to change the default link, and I prefer to link to the minified version, bootstrap.min.css, then change tags in my separate css file, here cv.css. You know where to find the File|Attach Style Sheet command. Just make sure it comes after the bootstrap stylesheet in the head section.

Replace the defaults

To ensure you have the latest version of Bootstrap, once you have created your page with the Dreamweaver defaults, you can replace the head specifications with the online versions (currently 4.3.1) , though you will need to have an internet link to view it. Here's the code (ignore the line breaks):

<link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
 crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
 crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
 crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
 crossorigin="anonymous"></script>
<link rel="stylesheet" href="readable.css" rel="stylesheet">