diff --git a/.bootstraprc b/.bootstraprc
index df9bc9bb..74f080b1 100644
--- a/.bootstraprc
+++ b/.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"
 }
\ No newline at end of file
diff --git a/javascripts/src/components/common/layout.tsx b/javascripts/src/components/common/layout.tsx
index 4e30056f..808933da 100644
--- a/javascripts/src/components/common/layout.tsx
+++ b/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"
                 }