Bootstrapped

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3"

src/index.js

@@ -3,7 +3,8 @@ import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import App from './main/App';
 import PrimaryLayout from './main/layouts/PrimaryLayout';
-import './main/styles/styles.css';
+//import './main/styles/styles.css';
+import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(
     <PrimaryLayout>

src/main/components/CurrencyConversionForm.js

@@ -16,7 +16,7 @@ const CurrencyConversionForm = ({data, handleChange, handleSelect, handleSubmit}
                 currencies={data && data.rates}
                 handleSelect={handleSelect}
             />
-            <button id='convertCurrency' type='submit'>Convert</button>
+            <button class="btn btn-primary" id='convertCurrency' type='submit'>Convert</button>
         </form>
     </div>
 )

src/main/components/form/CurrencyAmountInput.js

@@ -3,7 +3,7 @@ import React from 'react';
 const CurrencyAmountInput = ({handleChange}) => (
     <div>
         <label htmlFor='amount'>Amount to Convert</label><br/>
-        <input id='amount' type='text' name='amount' onChange={handleChange}/><br/>
+        <input class="form-control" id='amount' type='text' name='amount' onChange={handleChange}/><br/>
     </div>
 )
 

src/main/components/form/CurrencySelect.js

@@ -10,10 +10,14 @@ const CurrencySelect = ({selectionType, currencies, handleSelect}) => {
 
     return (
         <div className={`${selectionType}Selection`}>
-            <label htmlFor={selectionType}>From</label><br/>
-            <select id={selectionType} onChange={handleSelect}>
-                {currencyOptions}
-            </select><br/>
+            <div className="input-group mb-3">
+                <div className="input-group-prepend">
+                    <label className="input-group-text" htmlFor={selectionType}>From</label>
+                </div>
+                <select className="custom-select" id={selectionType} onChange={handleSelect}>
+                    {currencyOptions}
+                </select>
+            </div>
         </div>
     )
 }