Twitter bootstrap change modal popup width

0 votes
asked Aug 11, 2014 in bootstrap by Ananya

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>
Share

1 Answer

0 votes
answered Aug 11, 2014 by Aadhira (1,213 points)
selected Aug 11, 2014 by administrator
 
Best answer

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>

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...