6

Tenho um determinado modal responsável por exibir alguns conteúdos do site, porém o conteudo não consegue se adeaquar a tela do modal, ele sempre fica com o mesmo width independente do conteudo ... como é possivel aumentar o tamanho de um modal?

código sendo utilizado

<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>
1
  • A resposta te ajudou a resolver a dúvida? Precisa mais informações? Commented 10/03/2017 às 18:26

7 Respostas 7

8

O modal bootstrap tem as seguintes opções de tamanho:

Grande (large) - Máximo de 900px

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

Pequeno (small) - Máximo de 300px;

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

O padrão é Médio - Máximo de 600px

1
  • Independente da classe que eu coloque ele não altera o tamanho, fica sempre do mesmo jeito Commented 8/03/2017 às 20:13
3

Crie um CSS interno no próprio HTML, ficará desta forma abaixo

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

Como já mencionado na respostas anteriores você pode usar

Extra grande .modal-xl 1140px

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

Grande .modal-lg 800px

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

Pequeno .modal-sm 300px

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

Tem outra forma é usando o modal-fuild , que serve para expandir o modal horizontalmente, ou seja, seu modal vai expandir até o limite da tela, desta forma você pode usar o style= "padding: 1% 15%;" para regular essa expansão lateral.

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

Se ainda estiver com duvidas consulte a página do Bootstrap.

link direto para o página modal do Bootstrap: https://getbootstrap.com.br/docs/4.1/components/modal/

1

Tentar alterar o width no conteúdo no CSS.

#conteudoModal {
    width: 100%;
}
1

Você deve ter alguma regra CSS bloqueando esse tamanho, fiz um exemplo com o seu modal e esta funcionando perfeitamente veja:

Exemplo Modal

Coloquei 2 regras CSS apenas, a primeira determina o tamanho do modal a segunda apenas faz o conteudo ter 100% do tamanho do mesmo:

.modal-content{
  width: 800px;
}

#conteudoModal{
  width: 100%;
}
1

O meu caso funcionou assim: criei um estilo

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

no modal voce troca o tamanho lá (modal-lg modal-sm) pelo estilo criado (modal-personalizado)

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

O Bootstrap a partir da versão 4, possui diversos tamanhos como já foi citado em outras respostas. Para aplicar esses diferentes tamanhos, basta você inserir na <div> que está com a classe modal-dialog as classes: modal-xl caso queira um modal extra grande, modal-lg caso queira um modal grande ou modal-sm caso queira um modal pequeno. A div deve ficar assim, por exemplo:

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

Repare que a classe modal-xl foi alocada ao lado da classe modal-dialog. Abaixo vou deixar exemplo feito com os três tamanhos citados, retirado direto da documentação do Bootstrap:

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

Para maiores informações, confira a documentação oficial do Bootstrap v4.4 no link a seguir: https://getbootstrap.com/docs/4.4/components/modal/

Espero que tenha ajudado. Abraços!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .