diff --git a/BootstrapFour.html b/BootstrapFour.html
index 5417044..6cea025 100644
--- a/BootstrapFour.html
+++ b/BootstrapFour.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <title></title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <style type="text/css">
         .nopadding {
            padding: 0;
@@ -13,15 +13,32 @@
 </head>
 <body>
     <!-- Use the cute kitty pictures bellow, and arrange them into the desired result. You'll need the one style item defined above to complete this properly. The rest is all Bootstrap. -->
-
-    <img class='img-responsive' src='http://placekitten.com/g/490/490'>
-    <img class='img-responsive' src='http://placekitten.com/g/500/500'>
-    <img class='img-responsive' src='http://placekitten.com/g/510/510'>
-    <img class='img-responsive' src='http://placekitten.com/g/495/495'>
-    <img class='img-responsive' src='http://placekitten.com/g/810/810'>
-    <img class='img-responsive' src='http://placekitten.com/g/520/520'>
-    <img class='img-responsive' src='http://placekitten.com/g/530/530'>
-    <img class='img-responsive' src='http://placekitten.com/g/540/540'>
-    <img class='img-responsive' src='http://placekitten.com/g/550/550'>
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+                <div class="row">
+                    
+                <img class='nopadding img-responsive w-50 h-50' src='http://placekitten.com/g/490/490'>
+                <img class='nopadding img-responsive w-50 h-50' src='http://placekitten.com/g/500/500'>
+                </div>
+                <div class="row">
+                    <img class='nopadding img-responsive w-50 h-50' src='http://placekitten.com/g/510/510'>
+                    <img class='nopadding img-responsive w-50 h-50' src='http://placekitten.com/g/495/495'>
+                    
+                </div>
+            </div>
+            <div class="col-6 nopadding">
+                <img class='img-responsive w-100 h-100' src='http://placekitten.com/g/810/810'>
+            </div>
+        </div>
+        <div class="row">
+            <img class='nopadding img-responsive w-25 h-100' src='http://placekitten.com/g/520/520'>
+            <img class='nopadding img-responsive w-25 h-100' src='http://placekitten.com/g/530/530'>
+            <img class='nopadding img-responsive w-25 h-100' src='http://placekitten.com/g/540/540'>
+            <img class='nopadding img-responsive w-25 h-100' src='http://placekitten.com/g/550/550'>
+        </div>
+    
+    
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/BootstrapOne.html b/BootstrapOne.html
index c115701..38d5517 100644
--- a/BootstrapOne.html
+++ b/BootstrapOne.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <title></title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <style type="text/css">
         div {
           text-align: center;
@@ -23,11 +23,13 @@
 </head>
 <body>
     <!-- Add the correct Bootstrap classes to achieve the desired result. The styling defined above has already been applied. -->
-    <div class="">
-        <div class="header">Header</div>
-        <div class="nav">Nav</div>
-        <div class="body">Body</div>
-        <div class="footer">Footer</div>
+    <div class="container">
+        <div class="header row">Header</div>
+        <div class="row">
+          <div class="nav col">Nav</div>
+          <div class="body col-10">Body</div>
+        </div>
+        <div class="footer row">Footer</div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/BootstrapThree.html b/BootstrapThree.html
index 568ddfd..15cf6d5 100644
--- a/BootstrapThree.html
+++ b/BootstrapThree.html
@@ -4,15 +4,25 @@
 <head>
     <meta charset="utf-8" />
     <title></title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     
     <!-- You'll need to add a bit of your own styling to get the desired result. -->
     <style type="text/css">
-
+        .vader{height: 250px;}
+        .black {background-color: black;}
+        .blue {background-color: blue;}
+        .red {background-color: red;}
     </style>
 </head>
 <body>
     <!-- Add the divs you'll need to achieve the desired result bellow this line. -->
+    <div class="container">
+        <div class="row">
+            <div class="vader black col-lg-6 col-md-6 col-sm-12"></div>
+            <div class="vader blue col-lg-3 col-md-6 col-sm-12"></div>
+            <div class="vader red col-lg-3 d-sm-none d-lg-block"></div>
+        </div>
+    </div>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/BootstrapTwo.html b/BootstrapTwo.html
index f0769c2..654f0c2 100644
--- a/BootstrapTwo.html
+++ b/BootstrapTwo.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <title></title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <style type="text/css">
         .fill {
           border: 1px solid black;
@@ -14,7 +14,12 @@
 </head>
 <body>
     <!-- A little less help this time. You'll need to add the remaining divs, and use the fill class from the style defined at the top of the doc. -->
-    <div class="fill">This first column will be too large when the rows wrap, so you have to figure out how to get the second row to display properly.</div>
-
+    <div class="container">
+        <div class="row">
+    <div class="fill col-lg-3 col-sm-6">This first column will be too large when the rows wrap, so you have to figure out how to get the second row to display properly.</div>
+    <div class="col-lg-3 col-sm-6 p-0"><div class="fill px-3">second</div></div>
+    <div class="col-lg-3 col-sm-6 p-0"><div class="fill px-3">third</div></div>
+    <div class="col-lg-3 col-sm-6 p-0"><div class="fill px-3">fourth</div></div>
+    </div></div>
 </body>
 </html>
\ No newline at end of file
