title: Customize Angular Bootstrap datepicker popup buttons
body: <p>I want to customize the default buttons in Angular Bootstrap datepicker popup. Currently I have <a href="https://i.stack.imgur.com/SnzDq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SnzDq.jpg" alt="this"></a><br>
  What I want is a space of around 1(or 2)px between the blue and green buttons. The green button should remain the same(both space in between wise and size wise).</p>
  
  <p>Currently, there are a lot of code and I have no idea about where the CSS files are located. Also, there for all the code in the project, the same thing is being observed and the change has to be made for all such occuring cases.
  I have tried to make changes in the <code>bootstrap\less\button-group.less</code> file: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-group {
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
      margin-left: 1px;
    }
  }
  
  .btn-group-vertical {
    &gt; .btn,
    &gt; .btn-group,
    &gt; .btn-group &gt; .btn {
      display: block;
      float: none;
      width: 100%;
      max-width: 100%;
    }
  
    // Clear floats so dropdown menus can be properly placed
    &gt; .btn-group {
      &amp;:extend(.clearfix all);
      &gt; .btn {
        float: none;
      }
    }
  
    &gt; .btn + .btn,
    &gt; .btn + .btn-group,
    &gt; .btn-group + .btn,
    &gt; .btn-group + .btn-group {
      margin-top: -1px;
      margin-left: 1px;
    }
  }</code></pre>
  </div>
  </div>
  <br>
  And in <code>bootstrap\distcss\bootstrap.css</code>  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-group .btn + .btn,
  .btn-group .btn + .btn-group,
  .btn-group .btn-group + .btn,
  .btn-group .btn-group + .btn-group {
    margin-left: 1px;
  }</code></pre>
  </div>
  </div>
    </p>
  
  <p>But nothing happens. The rendering still happens with margin left of -1px.</p>
  
  <p>How do I resolve this?</p>