title: Eliminate space between two bootstrap columns
body: <p>I started creating a blog like react application and using bootstrap grid system.
  There seems to be a big space between my two columns. Is there a way to get rid of this?
  A screen shot is attached.</p>
  
  <pre><code>        import React from 'react';
          import ReactDom from 'react-dom';
          import 'bootstrap/dist/css/bootstrap.css';
          import faker from 'faker';
  
          //Now create a new component
  
          const App = () =&gt; {
              const myCustomStyle = {color:'green', fontSize:'50px'}
              return (
                  &lt;div className="container"&gt;
                     &lt;div className="row"&gt;
                          &lt;div class="col-3"&gt;
                              &lt;a href="/" className="avatar"&gt;&lt;img alt="avatar" src={faker.image.avatar()}&gt;&lt;/img&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="col-9" &gt;
                              &lt;p&gt;&lt;b&gt;Alex&lt;/b&gt;&lt;span&gt;Today at 5.00pm&lt;/span&gt;&lt;/p&gt;
                              &lt;p&gt;Great blog post!&lt;/p&gt;
                          &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
              )
          }
  
          ReactDom.render(&lt;App /&gt;, document.querySelector('#root'))
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Ipmvi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ipmvi.png" alt="enter image description here"></a></p>