# 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.5.3) , though you will need to have an internet link to view it. Here's the code (ignore the line breaks):

 <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, 
  shrink-to-fit=no">

<!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
   bootstrap@4.5.3/dist/css/bootstrap.min.css" 
   integrity="sha384-TX8t27EcRE3e/
   ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
   crossorigin="anonymous">

You will need to add some more code in the bottom part of the html just after the /body tag.

<!-- jQuery, Popper.js, and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/
  zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/
  umd/popper.min.js" integrity="sha384-9/
  reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYl
  FhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3
   /dist/js/bootstrap.min.js"  
   integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7
   lr30WKz0vr/aWKhXdBNmNb5D92v7s" 
   crossorigin="anonymous"></script>