bootstrap added

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.1",
     "firebase": "^9.22.1",
     "i18next": "^23.2.3",
     "node-dijkstra": "^2.5.0",

public/index.html

@@ -22,6 +22,17 @@
       href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+      crossorigin="anonymous"
+    ></script>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo512.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.css

@@ -3,7 +3,6 @@
   padding: 0;
   top: 0;
   left: 0;
-  box-sizing: content-box;
   font-family: Bayon, Poppins;
 }
 
@@ -128,41 +127,33 @@
   flex-direction: column;
 }
 
-.description-sec .col {
+/* .description-sec .cola {
   display: flex;
   flex-direction: column;
   width: 100%;
   min-height: 100vh;
   justify-content: center;
   align-items: start;
-}
+} */
 
-.description-sec .row {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  justify-content: center;
-  align-items: start;
+.description-sec > .row {
+  min-height: 100vh;
 }
-.description-sec .row .card { 
+.board { 
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 30%;
-  margin: 1.3rem 2rem;
   align-items: center;
 }
-.description-sec .row .card .title {
+.board .title {
   font-size: 3rem;
   color: var(--secondary);
 }
 
-.description-sec .row .card .description {
-  width: 100%;
+.board .description {
   font-size: 1.3rem;
   font-family: Poppins;
   color: var(--on-secondary);
-  /* text-align: justify; */
   text-align: center;
 }
 

src/App.js

@@ -32,43 +32,49 @@ function App() {
           <img src="/EdgerPortraitWithoutMouth.png" />
         </div>
       </div>
-      <div className="sec-container description-sec">
-        <div className="col">
+      <div className="sec-container description-sec container-fluid">
+        <div className="row align-items-center">
           <div className="row">
-            <div className="card">
-              <p className="title">ORIGIN</p>
-              <p className="description">Created by Edsger Dijkstra on 1956</p>
+            <div className="col-md-6">
+              <div className="board">
+                <p className="title">ORIGIN</p>
+                <p className="description">Created by Edsger Dijkstra on 1956</p>
+              </div>
             </div>
-            <div className="card">
-              <p className="title">ALGORITHM</p>
-              <p className="description">
-                An algorithm for finding the shortest paths between nodes in a
-                weighted graph
-              </p>
+            <div className="col-md-6">
+              <div className="board">
+                <p className="title">ALGORITHM</p>
+                <p className="description">
+                  An algorithm for finding the shortest paths between nodes in a
+                  weighted graph
+                </p>
+              </div>
             </div>
-          </div>
-          <div className="row">
-            <div className="card">
-              <p className="title">IMPORTANCE</p>
-              <p className="description">
-                Most influential algorithms in the history of computer science
-                and graph theory. Had a significant impact on numerous fields of
-                study and technologies that we use today.
-              </p>
+            <div className="col-md-6">
+              <div className="board">
+                <p className="title">IMPORTANCE</p>
+                <p className="description">
+                  Most influential algorithms in the history of computer science
+                  and graph theory. Had a significant impact on numerous fields of
+                  study and technologies that we use today.
+                </p>
+              </div>
             </div>
-            <div className="card">
-              <p className="title">APPLICATIONS</p>
-              <p className="description">
-                Applied on route planning in maps, routing protocols in computer
-                networks, analysis of transportation, among others.
-              </p>
+            <div className="col-md-6">
+              <div className="board">
+                <p className="title">APPLICATIONS</p>
+                <p className="description">
+                  Applied on route planning in maps, routing protocols in computer
+                  networks, analysis of transportation, among others.
+                </p>
+              </div>
             </div>
           </div>
         </div>
       </div>
       <div className="sec-container algorithm-sec"></div>
       <div className="sec-container about-sec"></div>
-    </div>
+    </div >
   );
 }