title: bootstrap grid system : how to remove gap between two columns
body: <p>I am using bootstrap grid to have the responsive layout.</p>
  
  <p>But I am unable to remove gap between two columns.
  my code is as follows:</p>
  
  <pre><code>      &lt;div class="contact-us-box"&gt; 
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-2 col-md-2"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="col-lg-6 col-md-7 col-sm-8 col-xs-12 text-center"&gt;
                          &lt;p class="contact-us-footer"&gt;Choose Share&amp;Care as your development partner &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-4 col-md-3 col-sm-4 col-xs-12 text-center"&gt;
                          &lt;a class="contact-us-link" href="../contact-us.php"&gt;
                              &lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt; Contact Now!
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>my output is:</p>
  
  <p><a href="https://i.stack.imgur.com/rpG7d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rpG7d.png" alt="screenshot"></a></p>
  
  <p>I want to remove the gap between partner and contact now button.</p>
  
  <p>please help me is this regard.</p>
  
  <h1> My Solution</h1>
  
  <p>here is my solution: </p>
  
  <pre><code>&lt;div class="contact-us-box"&gt; 
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-8 col-md-8 col-sm-9 col-xs-12 contact-us-gap-p"&gt;
                      &lt;p class="contact-us-footer"&gt;Choose Share&amp;Care as your development partner &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 contact-us-gap-a"&gt;
                      &lt;a class="contact-us-link" href="contact-us.php"&gt;
                          &lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt; Contact Now!
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>here is my css file :</p>
  
  <pre><code>.contact-us-gap-p{
     text-align: right;
  }
  .contact-us-gap-a{
      text-align: left;
  }
  
  @media (max-width: 768px) {
      .contact-us-gap-p{
          text-align: center;
      }
      .contact-us-gap-a{
          text-align: center;
      }
  }
  </code></pre>
  
  <p>This code is working fine for me.</p>