diff --git a/examples/index.html b/examples/index.html
index d962dcf3d..a6b1705f6 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -4,9 +4,6 @@
     <meta charset="utf-8">
     <title>react-bootstrap-table demo</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
-    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
-
 </head>
 <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
index efd5e566b..cc72f7765 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "classnames": "^2.1.2",
+    "react-onclickoutside": "^4.5.0",
     "react-toastr": "^2.3.1"
   },
   "peerDependencies": {
diff --git a/src/pagination/PaginationList.js b/src/pagination/PaginationList.js
index cd50d3bb4..712150f1b 100644
--- a/src/pagination/PaginationList.js
+++ b/src/pagination/PaginationList.js
@@ -1,6 +1,22 @@
 import React from 'react';
 import PageButton from './PageButton.js';
 import Const from '../Const';
+import listensToClickOutside from 'react-onclickoutside/decorator';
+
+@listensToClickOutside()
+class DropdownMenu extends React.Component {
+  handleClickOutside() {
+    this.props.hide();
+  }
+
+  render() {
+    return (
+      <ul className="dropdown-menu" role="menu" aria-labelledby="pageDropDown" style={{display: 'block'}}>
+        {this.props.children}
+      </ul>
+    );
+  }
+}
 
 class PaginationList extends React.Component {
 
@@ -8,7 +24,8 @@ class PaginationList extends React.Component {
     super(props);
     this.state = {
       currentPage: this.props.currPage,
-      sizePerPage: this.props.sizePerPage
+      sizePerPage: this.props.sizePerPage,
+      dropdownVisible: false
     };
   }
 
@@ -45,6 +62,7 @@ class PaginationList extends React.Component {
 
   changeSizePerPage(e) {
     e.preventDefault();
+    this.setState({ dropdownVisible: false })
 
     var selectSize = parseInt(e.currentTarget.text);
     if (selectSize != this.state.sizePerPage) {
@@ -85,17 +103,24 @@ class PaginationList extends React.Component {
         {
           this.props.sizePerPageList.length > 1 ?
           <div className="dropdown">
-            <button className="btn btn-default dropdown-toggle" type="button" id="pageDropDown" data-toggle="dropdown"
-                    aria-expanded="true">
+            <button
+              className="btn btn-default dropdown-toggle ignore-react-onclickoutside"
+              type="button"
+              id="pageDropDown"
+              onClick={() => this.setState({ dropdownVisible: !this.state.dropdownVisible })}
+              aria-expanded="true">
               {this.state.sizePerPage}
               <span>
                 {" "}
                 <span className="caret"/>
               </span>
             </button>
-            <ul className="dropdown-menu" role="menu" aria-labelledby="pageDropDown">
-              {sizePerPageList}
-            </ul>
+            { this.state.dropdownVisible ?
+              <DropdownMenu hide={() => this.setState({ dropdownVisible: false })}>
+                {sizePerPageList}
+              </DropdownMenu>
+              : ""
+            }
           </div>
           : ""
         }
diff --git a/webpack.production.config.js b/webpack.production.config.js
index d0b0ea228..4aab177ed 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -20,6 +20,14 @@ module.exports = {
         amd: 'react'
       }
     },
+    {
+      'react-onclickoutside': {
+        root: 'OnClickOutside',
+        commonjs2: 'react-onclickoutside',
+        commonjs: 'react-onclickoutside',
+        amd: 'react-onclickoutside'
+      }
+    },
     {
       'react-dom': {
         root: 'ReactDOM',
