BootStrap 4

Setup Frameworks

There are two ways to setup the frameworks (Bootstrap and jQuery):

Down the files needed and connect them LOCALLY via the <link> and <script> tags.
Connect to the frameworks REMOTELY using the <link> and <script> tags via a Content Delivery Network (CDN).

In this tutorial, we will use the CDN method to simplify the process.

Download / Install Bootstrap

Before creating a web site or app, it is a good practice to download the necessary frameworks, images, and other assets that are needed. Then, create the HTML framework and connect to the framework via <link> and <script> tags.

Go to getBootstrap.com and click the Download button and then click the Download button on the page that appears to download the Bootstrap framework (compiled CSS, JavaScript, and source code).

NOTE: If you are familiar with package managers (e.g., npm, RubyGems), you can use them instead.
Rename the folder that was downloaded to the name of the site (e.g., RMCS).
Move this folder if necessary to where you want the site root to be.

NOTE: There should be three folders (js, css). The *.min files are the compressed files–you can used them when you are finished so that files can load faster because they are smaller. We will use the uncompressed versions of the JavaScript and CSS for the local ones and the *.min for the remote ones.

Download / Install jQuery

Go to jQuery.com to download the jquery.js file that is also needed for Bootstrap to run JavaScript plug-ins.
Unzip the download and save it in the js folder in the site root directory (e.g., RMCS).

ALTERNATIVE: You could link to the framework files for both Bootstrap and jQuery using their corresponding Content Delivery Network (CDN) links found on their respective sites. See instruction on their web sites for detail.

Download / Create Image

Create a folder named images in the site root directory (e.g., RMCS).
Download tutorial images or create your own images to use for your project and place them in the images folder.

Create HTML Framework

Create a new site.

NOTE: In Dreamweaver, it's Site > New Site.... Then, enter a Site Name (e.g., RMCS site) and then click the folder icon to navigate to the Local Site Folder that you created earlier and then click the Save button.)
Create a regular HTML framework and save it as index.html in the site root folder.

NOTE: In Dreamweaver, it's File > New.... Then, select HTML for the document type and None for the framework and then click the Create button:

Add a lang attribute to the <html> tag and a title to the <title> tag:

<!doctype html>
<html lang="en">
  <head>
   <title>RMCS: Training Made Easy</title>
  </head>
  <body>
  </body>
</html>

Write the following two meta tags after the existing <meta> tag to ensure correct rendering with IE and zooming on mobile devices.
```
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
```
CODE EXPLANATION:
- The charset attribute sets the character set (e.g., utf-8) for the page.
- The http-equiv and content attributes make the page compatible with IE.
- The name attribute is used to set the viewport which makes the page mobile friendly. On modern mobile devices with high pixel resolution the page will attempt to be displayed the whole site on the phone which is usually to small.
- The content attribute of the last <meta> tag makes the page display based on the device width (e.g., width=device-width), set the initial zoom level (e.g., initial-scale=1), where 1 represents 100%, and set fit size (e.g., shrink-to-fit=no).

Link CSS / JavaScript Files

Copy the following CSS below the closing </title> tag:
```
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" 
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 
crossorigin="anonymous">
```
NOTE: It it common practice to include the external style sheets in the <head> tag using a <link> tags with the last style sheet being the one (e.g., custom_styles.css) used to overwrite the Bootstrap framework CSS style sheet (e.g., bootstrap.css). Also, it is common practice as will be seen later to include the JavaScript files at the bottom of the page so that the page content can be loaded and be available for the script if needed. Notice that <link> tags are self closing–meaning that they do NOT have a closing tag (e.g., </link>).
Create a set of <style> tags in the <head> tag and add the following CSS to it:
```
<style>
.selector-for-some-widget {
    box-sizing: content-box; 
 }
</style>
        
```
NOTE: For more straightforward sizing in CSS, the global box-sizing value has been switch from content-box to border-box to ensure padding does not affect the final computed width of an element. However, it can cause problems with some third party software like Google Maps and Google Custom Search Engine. So in these rare cases, they will need to be over written With the above CSS snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget. See box model and sizing at CSS Tricks to learn more.
Create a blank CSS file and name it custom_styles.css and save it in the css folder or create one.

NOTE: This file will be used later to create some custom styles to overwrite the default Bootstrap CSS styles.

Optionally, add the following code below the last <link> tag to make page compatible with older versions of Internet Explorer (IE): If you are targeting IE 9 or greater, this code is NOT needed.

<link href="css/custom_styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

NOTE: Even though the code is commented, it will still be recognized by Internet Explorer.

Copy and paste the following two <script> tags above the closing </body> tag to connect to the jQuery and Bootstrap framework. jQuery must come first, then Popper.js, and then the JavaScript plugins. Many components and plugins require the use of JavaScript (jQuery, Popper.js) to function. The version number may be differ from this tutorial if you downloaded it from their website. Comments are optional:
```

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" 
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 
crossorigin="anonymous"></script>  

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" 
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body
```
NOTE: The following components require JavaScript:

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates
Add some dummy text after the opening <body> tag to see if the BootStrap framework is working correctly:
```
<body>
<h1>This is only a test</h1>
```
CHECK POINT: Save the file and preview it in a browser. You should see that the text displayed with the Bootstrap framework font instead of the regular browser font (Times New Roman).