How can I change the default width of a Twitter Bootstrap modal box?

Question

I tried the following:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

And this Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

The result is not what I expected. The modal top left is positioned in the center of the screen.

Can anyone help me. Has anyone else tried this. I assume it's not an unusual thing to want to do.

Bootstrap plugin don't see to have that many options. try to locate the class in the bootstrap CSS file and see if it's set via CSS, then you should be able to overwrite or at least will have a better clue about which element it is. — GillesC, Apr 16 '12 at 06:21
Look at the answer from Nick N for a very nice responsive answer! http://stackoverflow.com/a/16090509/539484 — OnTheFly, Aug 07 '13 at 06:25

score 373 · Accepted Answer · edited Apr 10 '16 at 20:48

373

UPDATE:

In bootstrap 3 you need to change the modal-dialog. So in this case you can add the class modal-admin in the place where modal-dialog stands.

Original Answer (Bootstrap < 3)

Is there a certain reason you're trying to change it with JS/jQuery?

You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

In your case:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.

edited Apr 10 '16 at 20:48

benomatis

5,536
7
36
59

answered Apr 16 '12 at 06:27

Marco Johannesen

13,084
6
31
36

When I increased the width to 1000px, I found I needed to set the modal's style attribute "left" to 33%. – Rose Perrone Aug 05 '12 at 05:06
You sure you corrected the margin? It should go 50% in, and then minus the corrected margin ;-) – Marco Johannesen Aug 07 '12 at 09:17
I think you need to leave the top-margin alone at 250px; you've changed yours to -345px above and that throws it off the top on a small screen. You only need to subtract half the additional width (above 560px default) that you added from the left margin. – JD Smith Feb 10 '13 at 04:15
@JDSmith is totally correct. I changed it to reflect only `margin-left` which they also use in bootstrap now ;-) – Marco Johannesen Feb 11 '13 at 10:01
sucks that this isn't response. nice solution otherwise. Let's just wait for Bootstrap 3. – FloatingRock Jun 20 '13 at 07:29
I use the following: left: 5%; margin: 0; width: 90%; – djKianoosh Jul 03 '13 at 21:54
2

Scroll below for a better (responsive) answer thanks to @NickN! – OnTheFly Jul 31 '13 at 12:41
1

@FloatingRock you can make it responsive, look at my answer – Nick N. Jul 31 '13 at 14:38
47

Bootstrap 3 makes this easier. `.modal .modal-dialog { width: 800px; }` The left position is automatically calculated. – Gavin Sep 09 '13 at 08:14
in Bootstrap 3, width should be responsive and in percent, otherwise some elements like select2 get misaligned – Ahmad Jul 20 '14 at 09:13
I would really follow this [comment](http://stackoverflow.com/a/23361606/2096928) because it uses actual Bootstrap 3 classes instead of reinventing the wheel. – Joel Trauger Jun 14 '16 at 14:50
just add the custom width to .modal-dialog element, it all. .modal-dialog { width: 700px } – Gabriel Glauber Nov 20 '16 at 01:37
1

Actually, this does not work for me. The solution gave in comment by @ZimSystem did the trick. – tonjo Mar 23 '17 at 11:19

Nick N. · Answer 2 · 2016-08-10T20:56:58.060

271

If you want to make it responsive with just CSS, use this:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Note 1: I used a .large class, you could also do this on the normal .modal

Note 2: In Bootstrap 3 the negative margin-left may not be needed anymore (not confirmed personally)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Note 3: In Bootstrap 3 and 4, there is a modal-lg class. So this may be sufficient, but if you want to make it responsive, you still need the fix I provided for Bootstrap 3.

In some application fixed modals are used, in that case you could try width:80%; left:10%; (formula: left = 100 - width / 2)

edited Aug 10 '16 at 20:56

answered Apr 18 '13 at 18:28

Nick N.

12,902
7
57
75

This seems to cause the modal to be half off the screen on very narrow screens. – cofiem Oct 24 '13 at 07:57
5

Cofiem, use a media query to fix this – Nick N. Oct 25 '13 at 11:03
1

@NickN. my media query didn't fix it. Can you add an example? Disregard, I got it. I had max-width instead of min-width. `@media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }` – HPWD Nov 07 '13 at 16:20
I find just using a % doesn't give enough control as would using the columns already built into bootstrap. – Alex Jan 15 '14 at 11:52
@Alex I think it gives you more control, how would you do it with the existing columns? – Nick N. Jan 15 '14 at 14:15
@NickN I have put an example in my answer below, using the percentage gives more control than just the standard modal, but using the built in responsive tools in Bootstrap gives even better control. – Alex Jan 15 '14 at 14:51
@mlunoe it did actually, please check which version of bootstrap and which version of IE, and maybe I can help you – Nick N. Jan 16 '14 at 14:12
Using `calc` could fix the responsive issue on narrow screens – CodeBrauer Aug 23 '16 at 07:38

arcdegree · Answer 3 · 2014-01-26T06:28:05.737

If you're using Bootstrap 3, you need to change the modal-dialog div and not the modal div like it is shown in the accepted answer. Also, to keep the responsive nature of Bootstrap 3, it's important to write the override CSS using a media query so the modal will be full width on smaller devices.

See this JSFiddle to experiment with different widths.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

correct one for bootstrap3. works without adapting margin! thx — SQueek, Sep 06 '13 at 07:12
I removed the id attribute in the answer because it's not necessary. — arcdegree, Nov 27 '13 at 17:11
it works, but it is not responsive as mlunoe or Dave answers. — ksiomelo, Jan 25 '14 at 13:39

mlunoe · Answer 4 · 2013-08-07T07:39:23.607

80

If you want something that does not break the relative design try this:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

As, @Marco Johannesen says, the "body" before the selector is so that it takes a higher priority than the default.

edited Aug 07 '13 at 07:39

answered May 09 '12 at 09:49

mlunoe

4,422
4
32
43

4

i recommend just using `margin-left:auto; margin-right:auto;` instead of `auto` all the way around – cwd Aug 19 '12 at 05:07
in some cases one might need `top: 30%`, the percentage depending on the content inside. – bool.dev Nov 19 '12 at 23:14
6

This works well for me when I omit the .modal.fade.in rule, which moves the modal all the way to the bottom in Bootstrap V2.2.2. – ramiro Feb 06 '13 at 11:24
1

This worked with the ANGULAR-UI modal example... Just drop the code in a css file and load in the page... http://angular-ui.github.io/bootstrap/#/modal... Running example at http://plnkr.co/edit/GYmc9s?p=preview – Marcello DeSales Dec 01 '13 at 20:18
1

great this solution works well on 2.3.2 bootstrap and MAIN in internet explorer 8,9,10!!!! solution with margin-left:-40% is incorrect in internet explorer!!! – Cioxideru Jan 14 '14 at 13:53

score 41 · Answer 5 · edited Aug 25 '15 at 10:51

In Bootstrap 3+ the most appropriate way to change the size of a modal dialog is to use the size property. Below is an example, notice the modal-sm along the modal-dialog class, indicating a small modal. It can contain the values sm for small, md for medium and lg for large.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

Shouldn't this be the top answer? I suppose the top answer could help you customise it but most use cases should be satisfied by Bootstrap's inbuilt classes. — WebSpanner, Feb 09 '16 at 10:38
I am using Bootstrap 3.x and i don't seem to have `modal-md` class. — James Poulose, Feb 12 '17 at 23:39

score 34 · Answer 6 · answered Sep 04 '13 at 01:00

For Bootstrap 3 here's how to do it.

Add a modal-wide style to your HTML markup (as adapted from the example in the Bootstrap 3 docs)

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

and add the following CSS

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

There is no need to override margin-left in Bootstrap 3 to get this to be centered now.

Just to avoid any confusion, there's no technical reason to add the `modal-wide` class, meaning that is not a Bootstrap "internal" class. You can simply do `#myModal .modal-dialog { width: 80%; }` — Gavin, Sep 09 '13 at 08:17
Yep I understand. It's just many times it's hard to the difference between a bootstrap class and a custom class, so I wanted to make a note of it. — Gavin, Sep 11 '13 at 18:39

Alupotha · Answer 7 · 2015-07-30T05:56:47.763

In Bootstrap 3 all you need is this

<style>
    .modal .modal-dialog { width: 80%; }
</style>

Most of the above answers did not worked for me !!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</center>

Do you know how to change modal height? Thanks for your answer, it works like a charm :) — FrenkyB, May 17 '17 at 16:57

Roman · Answer 8 · 2016-02-11T21:10:37.200

17

Solution was taken from this page

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

edited Feb 11 '16 at 21:10

answered Jul 05 '12 at 11:03

Roman

3,799
4
30
41

Dave · Answer 9 · 2018-08-31T13:42:00.340

15

In v3 of Bootstrap there is a simple method to make a modal larger. Just add the class modal-lg next to modal-dialog.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

edited Aug 31 '18 at 13:42

answered Aug 23 '16 at 07:11

Dave

3,093
35
32

Why the down vote?! It absolutely, and cleanly, gave me a nice wide dialog box! And only uses "proper" bootstrap classes! – Dave Sep 05 '16 at 06:59
Try tripping back some of your HTML elements - use the simplest structure you can in order to test it. – Dave Dec 07 '16 at 09:51

score 13 · Answer 10 · answered Sep 27 '13 at 11:37

13

Bootstrap 3: In order to maintain responsive features for small and extra small devices I did the following:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

answered Sep 27 '13 at 11:37

it's right. this works for me. don't forget to change the width property to XX% for responsive layout. Btw, the version in my case is 3.0.3 – Jerry Chen Dec 20 '13 at 14:04

score 7 · Answer 11 · answered Jun 22 '14 at 14:09

7

This is what I did, in my custom.css I added these lines and that was all.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

Obviously, you can change the size of the width.

answered Jun 22 '14 at 14:09

clarenswd

933
9
17

score 7 · Answer 12 · answered Jun 13 '16 at 05:43

7

If Bootstrap>3, Just add style to your modal.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

answered Jun 13 '16 at 05:43

Sreekanth Karini

1,265
13
14

score 6 · Answer 13 · answered Feb 08 '13 at 01:56

I've found this solution that works better for me. You can use this:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

or this depending your requirements:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

See the post where I found that: https://github.com/twitter/bootstrap/issues/675

score 5 · Answer 14 · answered Sep 09 '13 at 08:15

5

FYI Bootstrap 3 handles the left property automatically. So simply adding this CSS will change the width and keep it centered:

.modal .modal-dialog { width: 800px; }

answered Sep 09 '13 at 08:15

Gavin

7,544
4
52
72

Worked for B3! Thanks a lot! – Bagata Sep 19 '13 at 02:56

score 4 · Answer 15 · answered Feb 19 '14 at 13:09

4

Preserve the responsive design, set the width to what you desire.

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

Keep it simple.

answered Feb 19 '14 at 13:09

originalhat

1,676
16
18

score 4 · Answer 16 · answered Mar 15 '17 at 06:47

4

Altering the class model-dialog you can achieve expected result. These small tricks work for me. Hope it will help you to solve this issue.

.modal-dialog {
    width: 70%;
}

answered Mar 15 '17 at 06:47

Faisal

4,591
3
40
49

Scott Dawson · Answer 17 · 2014-03-17T21:18:22.620

I used a combination of CSS and jQuery, along with hints on this page, to create a fluid width and height using Bootstrap 3.

First, some CSS to handle the width and optional scrollbar for the content area

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

And then some jQuery to adjust the height of the content area if needed

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Full write-up and code at http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

score 3 · Answer 18 · edited Jun 20 '20 at 09:12

3

With Bootstrap 3, all that is required is a percentage value given to the modal-dialog via CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 01 '13 at 05:03

Nav

741
1
6
12

1

yeap, the occam's razor goes to this one. tested on 3.0 works great – guinetik Nov 13 '13 at 02:04

score 3 · Answer 19 · answered Jul 09 '15 at 18:28

In Bootstrap 3 with CSS you can simply use:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

This ensures you don't break the design of the page, because we're using .modal-dialog instead of .modal which will be applied even to the shading.

score 2 · Answer 20 · answered Apr 16 '12 at 06:22

Try something like the following (see live jsfiddle example here: http://jsfiddle.net/periklis/hEThw/1/)

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

score 2 · Answer 21 · answered Jan 15 '14 at 11:50

Rather than using percentages to make the modal responsive, I find there can be more control taken from using the columns and other responsive elements already built into bootstrap.

To make the modal responsive/the size of any amount of columns:

1) Add an extra div around the modal-dialog div with a class of .container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>

2) Add a little CSS to make the modal full width -

.modal-dialog {
    width: 100% }

3) Alternatively add in an extra class if you have other modals -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }

4) Add in a row/columns if you want various sized modals -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

score 2 · Answer 22 · edited Apr 10 '15 at 11:43

2

Add the following on your css file

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

edited Apr 10 '15 at 11:43

Abhishek Ghosh

2,593
3
27
60

answered Dec 05 '14 at 04:36

kismet

21
1

score 2 · Answer 23 · edited Jun 20 '18 at 12:55

2

Use Below Script:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

Demo:

Demo on gif

edited Jun 20 '18 at 12:55

Vikrant

4,920
17
48
72

answered Jun 20 '18 at 12:10

Janusz

21
3

score 2 · Answer 24 · answered Oct 10 '18 at 20:18

2

I solved it for Bootstrap 4.1

Mix of previously posted solutions

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}

answered Oct 10 '18 at 20:18

Patricio Moraga

39
3

score 1 · Answer 25 · answered Aug 05 '16 at 14:16

1

Achieved expected result using,

.modal-dialog {
    width: 41% !important;
}

answered Aug 05 '16 at 14:16

Aamir

2,173
1
29
58

Neutral · Answer 26 · 2017-08-04T05:25:56.580

Bootstrap 3.x.x

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

Notice I added .employeeModal class in second div. Then style that class.

.employeeModal{
        width: 700px;
    }

score 0 · Answer 27 · answered Sep 02 '13 at 14:49

0

I used this way, and it's work perfect for me

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

answered Sep 02 '13 at 14:49

Belal mazlom

1,790
20
25

score 0 · Answer 28 · answered Nov 25 '13 at 23:41

Less-based solution (no js) for Bootstrap 2:

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

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

Then wherever you want to specify a modal width:

#myModal {
    .modal-width(700px);
}

score 0 · Answer 29 · answered Aug 02 '14 at 17:10

0

I used SCSS, and the fully responsive modal:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
}

answered Aug 02 '14 at 17:10

Rodolfo Jorge Nemer Nogueira

4,915
2
41
30

score 0 · Answer 30 · answered May 18 '17 at 11:17

you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

or

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }

score 0 · Answer 31 · answered May 24 '17 at 07:28

0

Below is the code for set the modal pop-up width and left position from the screen through javascript.

$('#openModalPopupId').css({ "width": "80%", "left": "30%"});

answered May 24 '17 at 07:28

Sheo Dayal Singh

1,591
19
11

score 0 · Answer 32 · edited Aug 08 '17 at 19:18

0

.Size(ModalSize.Large)

sample:
 using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
                {
}

edited Aug 08 '17 at 19:18

Athena

3,200
3
27
35

answered Aug 08 '17 at 16:31

Noble Jacob

1

1

Can you edit an explanation of this code into the question? – Athena Aug 08 '17 at 16:53

How can I change the default width of a Twitter Bootstrap modal box?

32 Answers32

CSS

Linked