Twitter bootstrap change modal popup width

Question

I am implementing bootstrap modal popup window for login function. I have taken the code from Bootstrap Sample Code and modified to include form and controls of login form. But the textbox width looks bigger because the modal popup width is bigger than what I need.
I want to use my own width. How do I change the modal popup width?

<div class="modal" id="loginModal" tabidex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...Header content
            </div>
            <div class="modal-body">
                ...Body content
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Answer 1

Twitter bootstrap by default comes with 3 different modals (Large, Medium and Small modal). All these modals are coming with fixed width. The one which you have used in Medium size modal popup which has width of 600px. All these modal's width controlled by the modal-dialog css class. So, if you want to change the width of the modal,
you can override the modal-dialog class or you can apply additional style / class and include in the modal-dialog div as below.

Option 1:
add below css in your css file.

.modal-dialog
{
    max-width:400px;//Whatever the width you want
}

Option 2:
Create a class in your css file and set it in the div which contains "modal-dialog" class

.mymodal-width
{
    max-width:400px;//Whatever the width you want
}

<div class="modal" id="loginModal" tabidex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog mymodal-width">
        <div class="modal-content">
            <div class="modal-header">
                ...Header content
            </div>
            <div class="modal-body">
                ...Body content
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>