title: Div's inside bootstrap columns are overlapping after scaling
body: <p>whenever div element wrapped by bootstrap column is scaled larger, it is being overlapped by its right-side neighbour. I do not understand why it is happening.</p>
  
  <pre><code>  &lt;div class="container-fluid"&gt; 
      &lt;div class="row"&gt;
          &lt;div class="col-3 red"&gt;&lt;/div&gt;
          &lt;div class="col-3 green"&gt;&lt;/div&gt;
          &lt;div class="col-3 yellow"&gt;&lt;/div&gt;
          &lt;div class="col-3 blue"&gt;&lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>Styling:</p>
  
  <pre><code>    .red, .green, .yellow, .blue {
          height: 100px;
      }
  
      .red{
          background-color: red;
          transition: 1s;
      }
  
      .green{
          background-color: green;
          transition: 1s;
      }
  
      .yellow{
          background-color: yellow;
          transition: 1s;
      }
  
      .blue{
          background-color: blue;
          transition: 1s;
      }
  
      .red:hover, .green:hover, .yellow:hover, .blue:hover{
          transform: scale(1.5);
      }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/leo9130/snega0ho/" rel="nofollow noreferrer">https://jsfiddle.net/leo9130/snega0ho/</a></p>
  
  <p>but when same code implemented without bootstrap grid system, div's do not overlap. How do i stop divs overlapping when implemented with grid system and why this is happening ?</p>