CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3bootstrap-sass
Jonathan Bender
Jonathan Bender

Reputation: 1909

Bootstrap 3.1.0 modal sizing not applied

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.

Upvotes: 11

Views: 18581

Answers (3)

jokab
jokab

Reputation: 688

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.

Upvotes: 13

Ivo
Ivo

Reputation: 1

You need to set $modal-lg with the desired width before your import bootstrap:

$modal-lg: 900px;
@import "bootsrap";

The default is 900px.

Upvotes: 0

Design by Adrian
Design by Adrian

Reputation: 2235

Try latest Bootstrap - version 3.1.1

Bootstrap Bootstrap SASS

Upvotes: 8

Related Questions