title: How do I make bootstrap button size (width * height) stay the same if value changes?
body: <p>My goal is to change the button text to a spinner or to a div, but whenever the value changes the size of the button changes as well. How do I make the button fixed?</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-js lang-js prettyprint-override"><code>$(function() {
  
    var opts = {
      lines: 9 // The number of lines to draw
        ,
      length: 2 // The length of each line
        ,
      width: 2 // The line thickness
        ,
      radius: 10 // The radius of the inner circle
        ,
      scale: 1 // Scales overall size of the spinner
        ,
      corners: 1 // Corner roundness (0..1)
        ,
      color: '#FFFFFF' // #rgb or #rrggbb or array of colors
        ,
      opacity: 0.25 // Opacity of the lines
        ,
      rotate: 0 // The rotation offset
        ,
      direction: 1 // 1: clockwise, -1: counterclockwise
        ,
      speed: 1 // Rounds per second
        ,
      trail: 60 // Afterglow percentage
        ,
      fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
        ,
      zIndex: 2e9 // The z-index (defaults to 2000000000)
        ,
      className: 'spinner' // The CSS class to assign to the spinner
        ,
      top: '50%' // Top position relative to parent
        ,
      left: '50%' // Left position relative to parent
        ,
      shadow: false // Whether to render a shadow
        ,
      hwaccel: false // Whether to use hardware acceleration
        ,
      position: 'absolute' // Element positioning
    }
  
    $("#apply").on("click", function() {
      $("#apply").html(new Spinner(opts).spin().el);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="input-group"&gt;
    &lt;input type="text" class="form-control" placeholder="Enter something"&gt;
    &lt;span class="input-group-btn"&gt;
      &lt;button class="btn btn-success" id="apply" type="button"&gt;Apply&lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle link: <a href="https://jsfiddle.net/dq9b2xcw/1/" rel="nofollow noreferrer">https://jsfiddle.net/dq9b2xcw/1/</a></p>