How to Change the Size of Your Bootstrap Modal - MrElbow
El mejor sitio con información útil para tu vida. Artículos acerca de felicidad, productividad, dinero, estilo de vida y mucho más. Sugiérenos un tema y escribiremos al respecto.
15736
post-template-default,single,single-post,postid-15736,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-7.4,wpb-js-composer js-comp-ver-4.5.2,vc_responsive

How to Change the Size of Your Bootstrap Modal

bootstrap modal

03 Ago How to Change the Size of Your Bootstrap Modal

The Bootstrap modal is a great tool if you want to show nice information to the user, instead of using the default JavaScript alert window.

The Boostrap modal is responsive and will work perfectly fine in most of the things you need, but sometimes you and your clients will want something different. In my case, a client wanted a wider modal than the default one.

I started to search for a good solution to change the default width of the Bootstrap modal but I couldn’t find an easy answer to my question. It is amazing how many different suggestions that doesn’t are everywhere. Or solutions that are quite complicated for something that should be an easy task like this.

 

The Solution

The solution to this problem is quite simple. The first thing you do is add the bigModal class in the HTML modal code in the same div than the modal-content. This part is the most complicated of the entire solution, at the beginning you may think that the class should be added in the first div. After understanding that the first part is the fade side of the modal you probably will say that definitely is the second div, the modal-dialog one, but is not! I don’t know the details but I found out that the div that you need to modify to get the width that you want is the third div, the modal-content one.

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content bigModal">
      <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">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 -->

The second part is to add the width of this modal. In my casi I want to have a big modal, a 1080 pixels wide modal!

.bigModal{
    width:1080px;
}

 

The third part is another thing that is complicated at the beginning. You will need to add a margin-left attribute to avoid having your new modal in the left side of your screen, you will need to add this new attribute to the bigModal class in your CSS file:

.bigModal{
    width:1080px;
    margin-left:-200px;
}

And that’s it! This is all you need to have the Bootstrap modal the size you want!

 

Other Thoughts

Some people change the modal-content class directly in their project’s CSS, but that will change all the modals to that size. In my case I needed some modals with a different size, but not all of them, that’s why I created an additional class called bigModal

 

Limitations

If what you need is something responsive you can change the pixels value to percentage values. For example you can use ‘width:80%’.

I hope this can help you!

 

Please comment if you have questions!

Read my other Technical articles.

Follow me on Twitter.

No Hay Comentarios

Publicar Un Comentario