Adding Bootstrap

Author: Bikramai

Section9-React-with-TypeScript/reminders-app/package-lock.json

@@ -10,6 +10,7 @@
  "@types/node": "^16.18.108",
  "@types/react": "^18.3.5",
  "@types/react-dom": "^18.3.0",
+ "bootstrap": "^5.3.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-scripts": "5.0.1",

Section9-React-with-TypeScript/reminders-app/package.json

@@ -1,38 +1,3 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+body {
+ padding: 20px;
+}

Section9-React-with-TypeScript/reminders-app/src/App.css

@@ -5,20 +5,7 @@ import './App.css';
 function App() {
  return (
  <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.tsx</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
+ <button className="btn btn-primary">Click Me</button>
  </div>
  );
 }

Section9-React-with-TypeScript/reminders-app/src/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'bootstrap/dist/css/bootstrap.css';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';