One issue I have encountered with my application is the varying widths of modals. Setting the width inline works well, but when the window is compressed it can cause part of the modal to be off screen, rendering it useless at smaller resolutions such as that of an iPad.
The main problem arises when setting different widths for individual modals. If the width is set in the bootstrap.css file, all modals will adhere to that width. However, if inline CSS is used to set a specific width for a modal, it may break at lower resolutions.
This dilemma raises the question - does Twitter Bootstrap only allow for one modal width to work effectively across all resolutions?
I would provide screenshots to illustrate this problem, but unfortunately StackOverflow does not permit me to do so.
Here's an example of a modal that breaks at lower resolutions due to setting the width inline:
<div id="add-edit-project-modal" class="modal hide fade" style="width: 320px; margin-left: -160px;">
<div class="add-edit-project-modal-header modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">New Project</h4>
</div>
<div class="add-edit-project-modal-body modal-body">
<form action="" id="add_project">
<label>Name</label>
</div>
<div class="add-edit-project-modal-footer modal-footer">
<input type="submit" id="submitButton" class="btn submit" value="Create">
</form>
</div>
</div>
At the resolution of an iPad, half of the modal extends off the screen on the left-hand side.