Increasing modal size using bootstrap and html

Question

I have a certain modal responsible for displaying some content of the site, however the content can not be adjusted to the modal screen, it always gets the same width regardless of the content ... as it is possible to increase the size of a modal?

code being used

<div class="modal fade " id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="conteudoModal"></div>
                </div>
            </div>
        </div>
    </div>

Answer 1

The modal bootstrap has the following size options:

Large (large) - 900px max

<div class="modal-dialog modal-lg">

Small (small) - Maximum 300px;

<div class="modal-dialog modal-sm">

Default is Medium - 600px max

Answer 2

Create an internal CSS in the HTML itself, it will be like this below

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

Answer 3

As already mentioned in the previous answers you can use

Extra large . modal-Xl 1140px

<div class="modal-dialog modal-xl">
          <!---conteúdo ----> 
</div>

Large . modal-lg 800px

<div class="modal-dialog modal-lg">
      <!---conteúdo ----> 
</div>

Small . modal-Sm 300px

<div class="modal-dialog modal-sm">
      <!---conteúdo ----> 
</div>

There is another way is using the modal-fuild , which serves to expand the modal horizontally, IE, your modal will expand to the screen limit, this way you can use the style= "padding: 1% 15%;" to regulate this lateral expansion.

<div class="modal-dialog modal-dialog-centered modal-notify modal-info modal-fluid 1  " role="document" style=" overflow-y: auto !important; padding: 0px 15%;">
      <!---conteúdo ----> 
</div>

If you still have doubts see the Bootstrap page.

direct link to the Bootstrap modal page: https://getbootstrap.com.br/docs/4.1/components/modal/

Answer 4

You must have some CSS rule blocking this size, I made an example with your modal and this working perfectly see:

Modal Example

I put 2 CSS rules only, the first determines the modal size the second only makes the content to be 100% the size of the same:

.modal-content{
  width: 800px;
}

#conteudoModal{
  width: 100%;
}

Answer 5

Try changing the width of content in CSS.

#conteudoModal {
    width: 100%;
}

Answer 6

My case worked like this: I created a style

<style>
    .modal-personalizado{
        min-width: 60%; // aqui vc pega a percentagem da sua tela
        margin-left: 70; // aqui vc escolhe
    }

    .modal-personalizado.modal-content {
        min-height: 50vh;
    }   
</style>

in modal Voce changes the size there (modal-lg modal-Sm) by the style created (modal-customized)

 <div class="modal-dialog modal-personalizado"  role="document">

Answer 7

Bootstrap from version 4, has several sizes as already mentioned in other answers. To apply these different sizes, just insert into <div> who’s with the class modal-dialog the classes: modal-xl if you want a modal extra large, modal-lg if you want a modal great or modal-sm if you want a modal small. To div should look like this, for example:

<div class="modal-dialog modal-xl" role="document">

Notice that the class modal-xl was allocated next to the class modal-dialog. Below I will leave an example made with the three sizes mentioned, taken directly from the Bootstrap documentation:

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

For more information, check out the official Bootstrap v4.4 documentation in the following link: https://getbootstrap.com/docs/4.4/components/modal/

I hope it helped. Hugs!