Improve bootstrap usage

.bootstraprc

@@ -6,8 +6,11 @@
     "mixins": true,
     "grid": true,
     "forms": true,
-    "responsive-utilities":true
+    "responsive-utilities":true,
+    "panels": true,
+    "type": true
   },
 
-  "scripts": false
+  "scripts": false,
+  "styleNamespace": ".tw-bs"
 }

javascripts/src/components/common/layout.tsx

@@ -4,10 +4,10 @@ import {observer} from "mobx-react";
 import * as _ from 'lodash'
 
 export const TwoColumnFields = observer((props:{children:Array<React.ReactElement<any>>}) => {
-    return <div className="clearfix">
+    return <div className="row">
         {
             _.take(props.children, 2).map((i:React.ReactElement<any>) => {
-                let className = "col-left-6"
+                let className = "col-sm-6"
                 if (_.last(props.children) !== i){
                     className += " u-paddingRight--10"
                 }
@@ -21,10 +21,10 @@ export const TwoColumnFields = observer((props:{children:Array<React.ReactElemen
 })
 
 export const ThreeColumnFields = observer((props:{children:React.ReactElement<any>[]}) => {
-    return <div className="clearfix">
+    return <div className="row">
         {
           _.take(props.children, 3).map((i:React.ReactElement<any>) => {
-                let className = "col-left-4"
+                let className = "col-sm-4"
                 if (_.last(props.children) !== i){
                     className += " u-paddingRight--10"
                 }