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.

development or production ..is it your local system where you are facing this issue or a live website — Bijendra, Feb 01 '14 at 22:22
Development, still testing to make sure there weren't any breaking changes — Jonathan Bender, Feb 01 '14 at 22:34
I think the problem isn't related to Rails, but Bootstrap itself. Maybe you should change the title (remove any Rails related tags) — Design by Adrian, Feb 14 '14 at 10:10
The problem I had, I was using an `Admin Template` with a `main.css` which overrode the modal width, I tracked the sources in my browser's `Developer Tools` disabled those and saw where I need to change the `main.css` for the standard bootstrap sizes to work properly — Pierre, Jun 17 '18 at 08:53

score 12 · Answer 1 · answered Jul 29 '15 at 07:43

12

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.

answered Jul 29 '15 at 07:43

jokab

671
7
14

Worked for me. Much appreciated. – Pseudonymous May 04 '16 at 14:21

score 8 · Accepted Answer · answered Feb 14 '14 at 11:19

8

Try latest Bootstrap - version 3.1.1

Bootstrap Bootstrap SASS

answered Feb 14 '14 at 11:19

Design by Adrian

2,185
1
20
22

4

I'm on 3.1.1.0 and still have the same issue OP. – Dennis Mar 05 '14 at 20:46
did you still have the issue? – Khalid Omar May 03 '14 at 23:10

score 0 · Answer 3 · answered Jul 25 '14 at 15:44

0

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

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

The default is 900px.

answered Jul 25 '14 at 15:44

Ivo

1

Bootstrap 3.1.0 modal sizing not applied

3 Answers3