Breaking News: Grepper is joining You.com. Read the official announcement!

bootstrap modal center page

Add Answer

Fantastic Fowl answered on May 16, 2020 Popularity 10/10 Helpfulness 7/10

answer bootstrap modal center page

related bootstrap modal center

related how to display in screen center bootstrap modal

bootstrap modal center page

Comment

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

Popularity 10/10 Helpfulness 7/10 Language whatever

Source: Grepper

Tags: bootstrap-modal center whatever

Link to this answer
Share Copy Link

Contributed on Dec 17 2021

Fantastic Fowl

0 Answers Avg Quality 2/10

Closely Related Answers

bootstrap modal center

Comments(1)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Popularity 10/10 Helpfulness 7/10 Language whatever

Source: getbootstrap.com

Tags: bootstrap-modal

Link to this answer
Share Copy Link

Contributed on May 16 2020

Alberto Peripolli

0 Answers Avg Quality 2/10

how to display in screen center bootstrap modal

Comment

.modal {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  margin: 0 !important;
  position: relative;
  top: auto;
  left: auto;
  transform: none !important;
}

Popularity 8/10 Helpfulness 6/10 Language css

Source: chat.openai.com

Tags: bootstrap-modal

Link to this answer
Share Copy Link

Contributed on Jun 20 2023

Tayyab kiwi

0 Answers Avg Quality 2/10

bootstrap modal center page

Contents

More Related Answers

bootstrap modal center page

Closely Related Answers

bootstrap modal center

how to display in screen center bootstrap modal

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.