Centralizing modal bootstrap

Asked

Viewed 6,305 times

2

I have a modal bootstrap on my page HTML. When I open the modal in the computer browser, the modal appears as follows:

inserir a descrição da imagem aqui

But when simulating the screen of a smartphone, the modal behind my menu nav:

inserir a descrição da imagem aqui

Below follows the modal code:

<div id="modal-facens" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">FACENS - Faculdade de Engenharia de Sorocaba</h4>
          <i class="fa fa-map-marker" aria-hidden="true"></i> Sorocaba/SP <br>
          <a href="http://www.facens.br/" target="_blank">http://www.facens.br/</a>
        </div>
        <div class="modal-body">
            <p>
                Cursando o último ano de Engenharia da Computação 
            </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-info btn-sm" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
</div>

I would like the modal to be centralized in any situation (computer or mobile). How can I do ?

html5 bootstrap modal

  • It would be nice if you used Snippet with CSS together. But before you do that take a look at display: table-cell; here for example: https://css-tricks.com/centering-in-the-unknown/

1 answer

5


Solved.

I changed the CSS code with the contents below:

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

The result I wanted:

inserir a descrição da imagem aqui

Browser other questions tagged html5 bootstrap modal

You are not signed in. Login or sign up in order to post.