Responsive design with Bootstrap

chapter07/package-lock.json

@@ -3161,6 +3161,12 @@
                 "hoek": "2.x.x"
             }
         },
+        "bootstrap": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.2.tgz",
+            "integrity": "sha512-3bP609EdMc/8EwgGp8KgpN8HwnR4V4lZ9CTi5pImMrXNxpkw7dK1B05aMwQWpG1ZWmTLlBSN/uzkuz5GsmQNFA==",
+            "dev": true
+        },
         "bowser": {
             "version": "1.9.3",
             "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.3.tgz",

chapter07/package.json

@@ -25,6 +25,7 @@
         "react-app-rewired": "^1.5.2"
     },
     "dependencies": {
+        "bootstrap": "^4.1.2",
         "color": "^3.0.0",
         "i18next": "^11.3.6",
         "i18next-browser-languagedetector": "^2.2.0",

chapter07/src/App.1.js

@@ -0,0 +1,28 @@
+/* @flow */
+
+import React, { Component } from "react";
+
+class App extends Component<{}> {
+    render() {
+        const cl = "border border-dark p-2 bg-warning ";
+
+        return (
+            <div className="container mw-100">
+                <div className="row border">
+                    <div className={cl + "col-sm-2 col-md-6"}>2/6</div>
+                    <div className={cl + "col-sm-4"}>4</div>
+                    <div className={cl + "col-sm-1"}>1</div>
+                    <div className={cl + "col-sm-1"}>1</div>
+                    <div className={cl + "col-sm-1"}>1</div>
+                    <div className={cl + "col-sm-1 col-md-5"}>1/5</div>
+                    <div className={cl + "col-sm-2 "}>2</div>
+                    <div className={cl + "col-sm-7 col-md-3"}>7/3</div>
+                    <div className={cl + "col-sm-4 "}>4</div>
+                    <div className={cl + "col-sm-1 col-md-3"}>1/3</div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;

chapter07/src/App.2.js

@@ -0,0 +1,31 @@
+/* @flow */
+
+import React, { Component } from "react";
+
+class App extends Component<{}> {
+    render() {
+        const cl = "border border-dark p-2 bg-warning ";
+        const ch = "border border-dark p-2 bg-dark text-white ";
+
+        return (
+            <div className="container mw-100">
+                <div className="row border">
+                    <div className={cl + "col-sm-2 col-md-6"}>2/6</div>
+                    <div className={cl + "col-sm-4"}>4</div>
+                    <div className={cl + "col-sm-1"}>1</div>
+                    <div
+                        className={
+                            ch + "col-sm-1 order-sm-first order-md-last"
+                        }
+                    >
+                        1
+                    </div>
+                    <div className={cl + "col-sm-1 col-md-5"}>1/5</div>
+                    <div className={cl + "col-sm-3 "}>3</div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;

chapter07/src/App.3.js

@@ -0,0 +1,33 @@
+/* @flow */
+
+import React, { Component } from "react";
+
+class App extends Component<{}> {
+    render() {
+        const cl = "border border-dark p-2 bg-warning ";
+        const ch = "border border-dark p-2 bg-dark text-white ";
+
+        return (
+            <div className="container mw-100">
+                <div className="row border">
+                    <div className={cl + "col-sm-2 col-md-6"}>2/6</div>
+                    <div className={ch + "d-none d-sm-block col-sm-4"}>
+                        0/4
+                    </div>
+                    <div className={cl + "col-sm-2"}>2</div>
+                    <div className={cl + "col-sm-2"}>2</div>
+                    <div className={cl + "col-sm-1 col-md-5"}>1/5</div>
+                    <div className={cl + "col-sm-3 "}>3</div>
+                    <div className={ch + "col-sm-7 "}>
+                        <div>TOP</div>
+                        <div className="d-none d-sm-block">(MIDDLE)</div>
+                        <div>BOTTOM</div>
+                    </div>
+                    <div className={cl + "col-sm-4 "}>4</div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default App;

chapter07/src/App.css

@@ -1,24 +0,0 @@
-.App {
-  text-align: center; }
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px; }
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: green; }
-
-.App-title {
-  font-size: 1.5em; }
-
-.App-intro {
-  font-size: large; }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg); }
-  to {
-    transform: rotate(360deg); } }

chapter07/src/App.js

@@ -1,26 +0,0 @@
-/* @flow */
-
-import React, { Component } from "react";
-import logo from "./logo.svg";
-import "./App.css";
-
-type Props = {};
-
-class App extends Component<Props> {
-    render() {
-        return (
-            <div className="App">
-                <header className="App-header">
-                    <img src={logo} className="App-logo" alt="logo" />
-                    <h1 className="App-title">Welcome to React</h1>
-                </header>
-                <p className="App-intro">
-                    To get started, edit <code>src/App.js</code> and save
-                    to reload.
-                </p>
-            </div>
-        );
-    }
-}
-
-export default App;

chapter07/src/App.scss

@@ -1,34 +0,0 @@
-$micolor: green;
-
-.App {
-    text-align: center;
-}
-
-.App-logo {
-    animation: App-logo-spin infinite 20s linear;
-    height: 80px;
-}
-
-.App-header {
-    background-color: #222;
-    height: 150px;
-    padding: 20px;
-    color: $micolor;
-}
-
-.App-title {
-    font-size: 1.5em;
-}
-
-.App-intro {
-    font-size: large;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

chapter07/src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

chapter07/src/index.css

@@ -1,4 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: Helvetica, sans-serif; }

chapter07/src/index.js

@@ -1,8 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./App.scss";
+
-import App from "./App";
+import App from "./App.3";
 import registerServiceWorker from "./registerServiceWorker";
+import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.render(<App />, document.getElementById("root"));
 registerServiceWorker();

chapter07/src/index.scss

@@ -1,8 +0,0 @@
-$font-stack: Helvetica, sans-serif;
-$real-margin: 0;
-
-body {
-    margin: $real-margin;
-    padding: 0;
-    font-family: $font-stack;
-}