title: reactstrap 8 (bootstrap4) : how to align items side by side with less column gap
body: <p>I am trying to align things side by side using reactstrap</p>
  <pre><code>    &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col&gt;Text1&lt;/Col&gt;
          &lt;Col&gt;Text2&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
  </code></pre>
  <p>What i want is</p>
  <p>[![enter image description here][1]][1]</p>
  <p><a href="https://codesandbox.io/s/awesome-banach-wep37?file=/src/App.js:740-847" rel="nofollow noreferrer">https://codesandbox.io/s/awesome-banach-wep37?file=/src/App.js:740-847</a></p>
  <p>I tried</p>
  <pre><code>    &lt;Container&gt;
        &lt;Row md=&quot;auto&quot;&gt;
          &lt;Col&gt;Text1&lt;/Col&gt;
          &lt;Col&gt;Text2&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
  </code></pre>
  <p>BUt nothing changes
  [1]: <a href="https://i.stack.imgur.com/1rrH2.png" rel="nofollow noreferrer">https://i.stack.imgur.com/1rrH2.png</a></p>