title: Div width not changing using Bootstrap and jQuery
body: <pre><code>&lt;div class="form"&gt;
  &lt;p class="pull-right"&gt;&lt;a href="#" class="toggle-form"&gt;&lt;i class="fa fa-minus-square" id="toggle-icon"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;form class="form-horizontal" role="form" id="contact-form"&gt;
      &lt;h3&gt;&lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt; Contact Us&lt;/h3&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;input type="text" class="form-control" id="name" placeholder="Full Name *" required /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;input type="phone" class="form-control" id="phone" placeholder="Phone Number *" required /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;input type="email" class="form-control" id="email" placeholder="Email Address" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;span class="pull-right"&gt;&lt;small&gt;* indicates required field&lt;/small&gt;&lt;/span&gt;
              &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(document).ready(function() {
  $('.toggle-form').click(function(e) {
      e.preventDefault();
      $('#toggle-icon').toggleClass('fa-minus-square fa-plus-square');
      var toggleWidth = $(".form").width() == 400 ? "50px" : "400px";
      $('.form').animate({ width: toggleWidth });
      $('#contact-form').fadeToggle();
  });
  });
  </code></pre>
  
  <p>See this <a href="http://jsfiddle.net/keithmclaughlin/vztyfLz3/3/" rel="nofollow">JSFiddle Demo</a>.</p>
  
  <p>I have the form over a Google Map and want to be able to minimize the form so people can view the map. When the user clicks the minus icon I want the div to reduce to the width of only the icon.</p>
  
  <p>It seems that Bootstrap (v3.3.1) is stopping the width from reducing down. If I exclude the Bootstrap css file it works as expected. I think it might be something to do with box-sizing, but have no idea how to fix it.</p>
  
  <p>Any advice is very much appreciated.</p>