Customizing existing twitter bootstrap modal styles

Question

So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:

modal hide fade

What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?

But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:

.modal-width-half (@modalWidth: 50%) {
  top: 50%;
  left: 50%;
  z-index: 1050;
  overflow: auto;
  width: @modalWidth;
  margin: -250px 0 0 -@modalWidth / 2;
  background-color: white;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.

Did you compile the .less file? – bfavaretto Apr 16 '13 at 03:15 — bfavaretto, Apr 16 '13 at 03:15

score 1 · Accepted Answer · answered Apr 16 '13 at 04:04

1

I just did this and can share the line you're missing.

In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.

.modal {
  width: @modalWidth;
  margin-left: -@modalWidth / 2;
}

of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.

.my-modal { 
  width: @modalWidth; 
  margin-left: -@modalWidth / 2; 
}

You can then refer to this in your html like:

<div class="modal fade open my-modal">...</div>

Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.

answered Apr 16 '13 at 04:04

mjallday

9,796
9
51
71

for some reason that doesn't work for me. I see the my-modal class in the div in firebug. But when I look at the actual styles applied to that div, I don't see my-modal as one of the styles. Do you know why that would be? Thanks. – Crystal Apr 17 '13 at 02:40
if you like, post a jsfiddle with your css and html, i'm sure i could figure this out in 10 seconds with the actual source code. – mjallday Apr 19 '13 at 16:16
Ah i ended up getting it from your suggestion. I forgot what it was, but it was something in my less file that I didn't have correct preventing it from working. Thanks! – Crystal Apr 20 '13 at 19:02

Customizing existing twitter bootstrap modal styles

1 Answers1