Added Bootstrap JS and jQuery Scripts, and added Bootstrap Modal article

src/head/index.js

@@ -1,8 +1,9 @@
 import favicons from './favicons';
 import meta from './meta';
 import styleSheets from './styleSheets';
+import scripts from './scripts';
 
-const metaAndStyleSheets = meta.concat(favicons, styleSheets)
+const metaAndStyleSheets = meta.concat(favicons, styleSheets, scripts)
   .map((element, i) => ({ ...element, key: i }));
 
 export default metaAndStyleSheets;

src/head/scripts.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const scripts = [
+     // JQuery v3.2.1 (Bootstrap requires JQuery)
+    <script
+  crossOrigin='anonymous'
+  integrity={
+      'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4='
+      }
+  src={
+      'https://code.jquery.com/jquery-3.2.1.min.js'
+    }
+    />,
+    // bootstrap v 3.3.7 JavaScript
+    <script
+    crossOrigin='anonymous'
+    integrity={
+        'sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIp' +
+        'G9mGCD8wGNIcPD7Txa'
+        }
+    src={
+        'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'
+    }
+    />
+];
+
+export default scripts;

src/pages/articles/bootstrap/bootstrap-modals/index.md

@@ -2,14 +2,87 @@
 title: Bootstrap Modals
 ---
 ## Bootstrap Modals
+Bootstrap Modals are dialog boxes/popout windows that are positioned over everything else in a document when activated.
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/articles/bootstrap/bootstrap-modals/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+<div class="modal-content">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"></button>
+        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+    </div>
+    <div class="modal-body">
+        This is a modal! Wow!
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+    </div>
+</div>
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### How to use
+Bootstrap Modals are activated using either data-attributes or JavaScript. To use either method you first need to include Bootstrap CSS, Bootstrap JS, and Jquery from a <a href='https://getbootstrap.com/docs/3.3/getting-started/' target='_blank' rel='nofollow'>CDN</a> or local environment. Once you've got your development environment set up: <br>
+###### data-toggle or href method:
+  1. Add a `data-target` or `href` attribute on the link or button element used with the id of your target modal: `data-target="#myModal"` or `href="#myModal"`.
+  1. Make sure the id attribute matches on the modal element `id="myModal"` (see below example)
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+###### JavaScript method:
+  * Activate a modal with an id of `myModal` using jQuery:
+  ```javascript
+    $('#myModal').modal('show')
+  ```
 
-#### More Information:
-<!-- Please add any articles you think might be helpful to read before writing the article -->
+###Live Demo: 
+```HTML
+<!--Button Trigger-->
+<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+        Launch live demo modal
+</button>
+
+<!--Modal-->
+<div class="modal fade" id="myModal" role="dialog">
+<div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"></button>
+            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+        </div>
+        <div class="modal-body">
+            This is a modal! Wow!
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+    </div>
+</div>
+</div>
+```
 
+  ``` 
+  <div class= "text-center">
+    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
+            Launch live demo modal
+    </button>
+</div>
 
+    <div class="modal fade" id="myModal" role="dialog"">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"></button>
+                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+                </div>
+                <div class="modal-body">
+                    This is a modal! Wow!
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+```
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+There are many different ways to incorporate Bootstrap Modals into a user interface. For more information on using modals in Bootstrap, check out the <a href='https://getbootstrap.com/docs/3.3/javascript/#modals' target='_blank' rel='nofollow'>Bootstrap website</a> or this w3Schools <a href='https://www.w3schools.com/bootstrap/bootstrap_modal.asp' target='_blank' rel='nofollow'>article</a>.