Bootstrap 3.1.0 modal sizing not applied

Question

After updating my bootstrap-sass gem to 3.1.0 to take advantage of the new sizing options on modals (.modal-lg and .modal-sm), I've been unable to get the styling to be applied. My code is as follows:

<div aria-hidden="false" aria-labeldby="ccModalLabel" class="modal fade in" id="ccModal" role="dialog" style="display: block;">
  <div class="modal-dialog modal-sm">
    ...content...
  </div>
</div>

Which, as far as I can tell, is nearly identical to the example in all the attributes that matter:

<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

However, upon inspection, the modal-sm class isn't been evaluated in my code as it is in the example, leading me to think that maybe it isn't included in the gem somehow, or am I missing something? The modal works in every other way aside the sizing.

Answer 1

I cannot simply update my bootstrap because of some breaking changes so what i did was added this to my site.css

@media screen and (min-width: 768px) {
  .modal-lg{
      width:900px;
  }

  .modal-sm{
      width:300px;
  }
}

I hope this helps someone else.

Answer 2

Try latest Bootstrap - version 3.1.1

Bootstrap Bootstrap SASS