diff --git a/lib/components/NumPad.js b/lib/components/NumPad.js
index b3afb743..d1012140 100644
--- a/lib/components/NumPad.js
+++ b/lib/components/NumPad.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { injectGlobal, ThemeProvider } from 'styled-components'
 import { InputField, Wrapper, KeyPad } from '../elements'
+import { Portal } from 'react-portal'
 import globalCSS from '../styles/global-css'
 import styles from '../styles'
 
@@ -35,29 +36,45 @@ export default ({validation, displayRule, inputButtonContent, keyValid}) => (
 
             return <div className={this.props.className}>
                 <ThemeProvider key='input-field' theme={styles(theme)}>
-                    <InputField  
-                        placeholder={placeholder}
-                        showKeyPad={this.toggleKeyPad}
-                        value={value}
-                        dateFormat={dateFormat}
-                        displayRule={displayRule}
-                        label={label}
-                        disabled={this.state.show}
-                        buttonContent={inputButtonContent} />
+                    <div>
+                    {
+                        this.props.children ? 
+                            React.Children.map( 
+                                this.props.children, (child) => 
+                                    React.cloneElement(child, { 
+                                        onClick: this.toggleKeyPad, 
+                                        value: value, 
+                                        dateFormat: dateFormat, 
+                                        displayRule: displayRule, 
+                                        disabled: this.state.show 
+                                    })) :
+                            <InputField  
+                                placeholder={placeholder}
+                                showKeyPad={this.toggleKeyPad}
+                                value={value}
+                                dateFormat={dateFormat}
+                                displayRule={displayRule}
+                                label={label}
+                                disabled={this.state.show}
+                                buttonContent={inputButtonContent} />
+                    }
+                    </div>
                 </ThemeProvider>
                 {show &&
-                    <ThemeProvider key='key-pad' theme={styles(theme)}>
-                        <Wrapper>
-                            <KeyPad                                
-                                cancel={this.toggleKeyPad}
-                                confirm={this.confirm} 
-                                displayRule={displayRule} 
-                                validation={validation}
-                                keyValid={keyValid}
-                                label={label}
-                                {...this.props} />
-                        </Wrapper>
-                    </ThemeProvider>}
+                    <Portal>
+                        <ThemeProvider key='key-pad' theme={styles(theme)}>
+                            <Wrapper>
+                                <KeyPad                                
+                                    cancel={this.toggleKeyPad}
+                                    confirm={this.confirm} 
+                                    displayRule={displayRule} 
+                                    validation={validation}
+                                    keyValid={keyValid}
+                                    label={label}
+                                    {...this.props} />
+                            </Wrapper>
+                        </ThemeProvider>
+                    </Portal>}
             </div>
         }
     }
diff --git a/lib/elements/KeyPad.js b/lib/elements/KeyPad.js
index 98ec7681..79cca45a 100644
--- a/lib/elements/KeyPad.js
+++ b/lib/elements/KeyPad.js
@@ -45,9 +45,11 @@ const CancelButton = styled.button`
     cursor: pointer;
     border: none;
     background: transparent;
-    outline: none;
     font-size: 1.5em;
     padding: 0px 0px 2px 0px;
+    :active, :focus {
+        outline: none;
+    }
 `
 
 const ConfirmButton = CancelButton.extend`
diff --git a/lib/elements/KeypadButton.js b/lib/elements/KeypadButton.js
index 11e8fda4..62fb42a1 100644
--- a/lib/elements/KeypadButton.js
+++ b/lib/elements/KeypadButton.js
@@ -14,14 +14,16 @@ const Button = styled.button`
   font-size: 1.2em;
   font-weight: 400;
   margin: 0;
-  outline: none;
   padding: 0 12px;
   border-radius: 0;
-  &:active {
+  :active {
     transition: all 150ms linear;
     opacity: .75;    
   }
-  &:disabled {
+  :active, :focus {
+    outline: none;
+  }
+  :disabled {
     color: ${props => Color(props.theme.color.primary).alpha(0.4).string()};
     cursor: not-allowed;
   }
diff --git a/lib/elements/Wrapper.js b/lib/elements/Wrapper.js
index 568d6b5b..fc90edf1 100644
--- a/lib/elements/Wrapper.js
+++ b/lib/elements/Wrapper.js
@@ -10,6 +10,7 @@ const BackgroundPanel = styled.div`
     left:0;
     width: 100%;
     height: 100%;
+    z-index: 10000;
 `
 
 const Container = styled.div`
diff --git a/package-lock.json b/package-lock.json
index 9f30aeb1..7ca97116 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2408,6 +2408,12 @@
         "hoek": "4.2.0"
       }
     },
+    "bootstrap": {
+      "version": "4.0.0-beta.2",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
+      "integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w==",
+      "dev": true
+    },
     "bowser": {
       "version": "1.8.1",
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/bowser/-/bowser-1.8.1.tgz",
@@ -7602,6 +7608,18 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
+    "lodash.isfunction": {
+      "version": "3.0.8",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/lodash.isfunction/-/lodash.isfunction-3.0.8.tgz",
+      "integrity": "sha1-TbcJ/IG8So/XEnpFilNGxc3OLGs=",
+      "dev": true
+    },
+    "lodash.isobject": {
+      "version": "3.0.2",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
+      "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=",
+      "dev": true
+    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -7655,6 +7673,12 @@
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
       "dev": true
     },
+    "lodash.tonumber": {
+      "version": "4.0.3",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/lodash.tonumber/-/lodash.tonumber-4.0.3.tgz",
+      "integrity": "sha1-C5azGzVnJ5Prf1pj7nkfG56QJdk=",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8807,6 +8831,12 @@
       "integrity": "sha512-xCteonGa+5eDt2lcbVg0jzh7GLRoejljfh0bP3XBymCHz1uAsi1IjW5T0XrDGRbUzb/f7vXUS+Tz2Ipw3S/w8A==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM=",
+      "dev": true
+    },
     "postcss": {
       "version": "6.0.14",
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/postcss/-/postcss-6.0.14.tgz",
@@ -10687,9 +10717,10 @@
       }
     },
     "react": {
-      "version": "16.1.1",
-      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react/-/react-16.1.1.tgz",
-      "integrity": "sha512-FQfiFfk2z2Fk87OngNJHT05KyC9DOVn8LPeB7ZX+9u5+yU1JK6o5ozRlU3PeOMr0IFkWNvgn9jU8/IhRxR1F0g==",
+      "version": "16.2.0",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react/-/react-16.2.0.tgz",
+      "integrity": "sha512-ZmIomM7EE1DvPEnSFAHZn9Vs9zJl5A9H7el0EGTE6ZbW9FKe/14IYAlPbC8iH25YarEQxZL+E8VW7Mi7kfQrDQ==",
+      "dev": true,
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -10729,9 +10760,10 @@
       }
     },
     "react-dom": {
-      "version": "16.1.1",
-      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react-dom/-/react-dom-16.1.1.tgz",
-      "integrity": "sha512-q06jiwST8SEPAMIEkAsu7BgynEZtqF87VrTc70XsW7nxVhWEu2Y4MF5UfxxHQO/mNtQHQWP0YcFxmwm9oMrMaQ==",
+      "version": "16.2.0",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react-dom/-/react-dom-16.2.0.tgz",
+      "integrity": "sha512-zpGAdwHVn9K0091d+hr+R0qrjoJ84cIBFL2uU60KvWBPfZ7LPSrfqviTxGHWN0sjPZb2hxWzMexwrvJdKePvjg==",
+      "dev": true,
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -10786,6 +10818,16 @@
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react-onclickoutside/-/react-onclickoutside-6.6.0.tgz",
       "integrity": "sha512-klDOGy8evAeKubtIv2zhHkqtxHW8e5PjCThKDdqu2PEXqkGYe5Vz93297tbOppAU67INEBwjO6mLj8AKniqODw=="
     },
+    "react-popper": {
+      "version": "0.7.4",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react-popper/-/react-popper-0.7.4.tgz",
+      "integrity": "sha512-dx1fcKYYkidq7f71I1g+YX7g3QBLZ9taqiSRdJ7wbP7v/o7F6JsrUaNWGbVNul+TqdDDIZ5/k0xPUol9baqQJQ==",
+      "dev": true,
+      "requires": {
+        "popper.js": "1.12.9",
+        "prop-types": "15.6.0"
+      }
+    },
     "react-portal": {
       "version": "4.0.0",
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react-portal/-/react-portal-4.0.0.tgz",
@@ -10854,6 +10896,37 @@
         "velocity-react": "1.3.3"
       }
     },
+    "reactstrap": {
+      "version": "5.0.0-alpha.4",
+      "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/reactstrap/-/reactstrap-5.0.0-alpha.4.tgz",
+      "integrity": "sha1-HenPOxY0TKmRIMKiDg79Sqrrwdg=",
+      "dev": true,
+      "requires": {
+        "classnames": "2.2.5",
+        "lodash.isfunction": "3.0.8",
+        "lodash.isobject": "3.0.2",
+        "lodash.tonumber": "4.0.3",
+        "prop-types": "15.6.0",
+        "react-popper": "0.7.4",
+        "react-transition-group": "2.2.1"
+      },
+      "dependencies": {
+        "react-transition-group": {
+          "version": "2.2.1",
+          "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/react-transition-group/-/react-transition-group-2.2.1.tgz",
+          "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==",
+          "dev": true,
+          "requires": {
+            "chain-function": "1.0.0",
+            "classnames": "2.2.5",
+            "dom-helpers": "3.2.1",
+            "loose-envify": "1.3.1",
+            "prop-types": "15.6.0",
+            "warning": "3.0.0"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "http://svnexus003.eoc.ch:8081/repository/npm-public/read-pkg/-/read-pkg-2.0.0.tgz",
diff --git a/package.json b/package.json
index 4579d90b..e432408b 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "bootstrap": "^4.0.0-beta.2",
     "chai": "^4.1.2",
     "css-loader": "^0.28.7",
     "enzyme": "^3.2.0",
@@ -46,8 +47,8 @@
     "node-sass": "^4.5.3",
     "polished": "^1.8.1",
     "prop-types": "^15.6.0",
-    "react-portal": "^4.0.0",
     "react-test-renderer": "^16.0.0",
+    "reactstrap": "^5.0.0-alpha.4",
     "sass-loader": "^6.0.6",
     "sinon": "^4.1.2",
     "sinon-sandbox": "^1.0.2",
@@ -56,13 +57,14 @@
     "webpack": "^3.7.1"
   },
   "dependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "styled-components": "^2.2.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-portal": "^4.0.0",
     "color": "2.0.0",
     "moment": "2.19.1",
     "react-addons-css-transition-group": "^15.6.2",
     "react-icons": "2.2.7",
-    "react-onclickoutside": "6.6.0"
+    "react-onclickoutside": "6.6.0",
+    "styled-components": "^2.2.1"
   }
 }
diff --git a/stories/index.js b/stories/index.js
index 0103cb1a..6043271d 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -2,17 +2,24 @@ import React from 'react'
 import moment from 'moment'
 import { storiesOf } from '@storybook/react'
 import styled from 'styled-components'
+import 'bootstrap/dist/css/bootstrap.css';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
 import NumPad from '../lib'
 
 storiesOf('Components', module)
   .add('Number', () => [ 
-    <NumPad.Number 
-      key='number-1'  
-      placeholder='test'       
-      theme='orange'
-      onChange={(value) => { console.log('value', value)}} 
-      label={'Totale'} />,
+    <div>
+      <label>Ciao</label>
+      <NumPad.Number 
+        key='number-1'  
+        placeholder='test'       
+        theme='orange'
+        onChange={(value) => { console.log('value', value)}} 
+        label={'Totale'}>
+          <input placeholder="test"/>
+      </NumPad.Number>
+    </div>,
     <NumPad.PositiveNumber
       key='number-2' 
       onChange={(value) => { console.log('value', value)}} 
@@ -34,6 +41,16 @@ storiesOf('Components', module)
     <NumPad.Time key='time-2' theme='blackAndWhite' onChange={(value) => console.log('changed', value)}/>,
     <LoremIpsum key='lorem' />
   ]))
+  .add('Inside modal', () => (
+    <DemoModal>
+      <NumPad.Time 
+        key='time-1' 
+        placeholder='HH:mm'
+        label={'Sveglia'} 
+        onChange={(value) => console.log('changed', value)} />
+        <NumPad.Time key='time-2' theme='blackAndWhite' onChange={(value) => console.log('changed', value)}/>
+    </DemoModal>
+  ))
   .add('Numpad date', () => ([
     <NumPad.Date 
       key='date-1' 
@@ -74,4 +91,39 @@ const LoremIpsum = () => (
     Cras ultricies massa id pharetra venenatis. In ac efficitur nunc. Phasellus eu diam commodo sapien finibus posuere. Phasellus vel eros elit. Curabitur accumsan velit ac elit tincidunt, a efficitur mauris imperdiet. Suspendisse a scelerisque lacus. Praesent at elit quis tellus lacinia ornare. Nunc vehicula pharetra nulla a iaculis. Vestibulum eleifend accumsan vestibulum. Donec id nibh eleifend, rhoncus risus ac, vulputate erat. Quisque eleifend imperdiet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper, nisl sit amet venenatis lobortis, nunc nibh dictum metus, sed congue neque diam at diam. Nunc sem dui, laoreet non ante ac, consectetur pellentesque dui. Phasellus congue dignissim metus, et tempus ex blandit et.
     Aliquam elementum, leo quis gravida vehicula, justo neque porttitor tortor, eget volutpat sem lacus id lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tortor tellus, fermentum vitae volutpat vitae, placerat ut lorem. Proin malesuada varius diam quis tempus. Fusce molestie massa ut turpis facilisis, ac ornare ligula cursus. Aliquam ligula ligula, maximus eu mattis elementum, tempor vel sapien. Nullam sit amet metus vitae ante ornare pharetra a id nibh. Suspendisse consectetur libero ante, id sodales lacus varius eu. Sed vehicula vulputate auctor. Quisque varius diam dui, at sollicitudin felis fringilla in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut a consectetur ligula. Curabitur commodo maximus massa quis aliquam.
   </div>
-)
\ No newline at end of file
+)
+
+
+class DemoModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false
+    };
+
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.toggle}>Open modal</Button>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} backdrop={false}>
+          <ModalHeader toggle={this.toggle}>Demo Modal</ModalHeader>
+          <ModalBody>
+            {this.props.children}
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={this.toggle}>Close</Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    );
+  }
+}
\ No newline at end of file