title: React-Bootstrap causing margins on left and right side
body: <p>I'm using <a href="https://react-bootstrap.github.io/" rel="noreferrer">React-Bootstrap</a> in my React app. It is causing margin on the left and right side. I'm using the following code:</p>
  
  <pre><code>import React, { Component } from "react";
  import "react-bootstrap/dist/react-bootstrap.min.js";
  import "bootstrap/dist/css/bootstrap.min.css";
  import { Grid, Row, Col } from "react-bootstrap";
  import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
  import AppBar from "material-ui/AppBar";
  
  &lt;Grid fluid&gt;
     &lt;Row&gt;
        &lt;Col xs={12} md={12}&gt;
          &lt;AppBar title="Title"
           iconClassNameRight="muidocs-icon-navigation-expand-more"/&gt;
         &lt;/Col&gt;
     &lt;/Row&gt;
     &lt;Row&gt;
         &lt;Col xs={4} md={4}&gt;
            &lt;h1&gt;Hello&lt;/h1&gt;
         &lt;/Col&gt;
         &lt;Col xs={8} md={8} &gt;
            &lt;h1&gt;Hello World!&lt;/h1&gt;
         &lt;/Col&gt;
     &lt;/Row&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>I'm getting the following output:
  <a href="https://i.stack.imgur.com/K44gx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/K44gx.png" alt="enter image description here"></a></p>
  
  <p>If I remove <code>xs and md</code> from <code>&lt;Col&gt;</code> then the issue gets fixed.</p>
  
  <p>Importing twitter-bootstrap is causing this issue. If I remove the twitter-bootstrap import then the bootstrap styling doesn't work.</p>
  
  <p>This issue is same as <a href="https://stackoverflow.com/questions/31885148/bootstrap-panel-unwanted-right-and-left-margins-on-smaller-sizes/31885279">Twitter-Bootstrap's issue</a>, but I'm not able to fix it in React-Bootstrap.</p>