How Do I apply custom styles in a GWT project that uses GWT-Bootstrap

I am using a GWTBootstrap Modal for my project, the problem is that it's width is too narrow for my liking.

I inspected the styles that it gets with firebug and saw this

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin: -250px 0 0 -280px;
outline: medium none;
position: fixed;
top: 50%;
width: 560px;
z-index: 1050;
}

I went to the Webapp/css directory and made the following changes to the bootstrap.min.css

.modal {
width : 960px;
max-height : 960px;
}

But it gets overwritten by the gwt compiler.

Next I referred to this Created a css file custom-overrides.css

.modal {
    width : 960px;
    max-height : 960px;
}

and imported it like <stylesheet src="/custom-overrides.css" /> in my gwt.xml That doesn't work either, eclipse warns me that the file got changed or deleted upon compilation.

I have also tried making the same change in the UIBinder file where I create the modal.

<ui:style>
    .modal{
        width : 960px;
    max-height : 960px;
    }
</ui:style>

That doesn't work either. I'm baffled, what should I do to get my styles to be applied?

It's a twitter bootstrap issue: the modal is not responsive.

This should be fixed in Bootstrap 3.0.

About solutions, as @mit said, it will work, but I have to warn you: it's not a good practice unless you know exactly what you're doing.

I'll suggest you to add an ID to your modal, and write the CSS specific for it. This will evict mess with other modals. As ID is more specific, you will not need to use !important also.