CODEWITHSUNDEEP
htmlcss
Tommy Hügel
Tommy Hügel

Reputation: 55

Bootstrap4 Modal-title not fully centered

!Do not close it as duplicate, the answers in the "duplicate" only center it relative to the X button!

I'm trying to completely center the modal-title of a bootstrap4 modal. However, it only centers it relative to the X and not to the whole width of the modal. The answers here: Bootstrap 4 Modal Center Content all have the same issue.

https://jsfiddle.net/couthzLt/

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center d-block">
          <h5 class="modal-title d-inline-block" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</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>

The header is not completely centered as you can see on this image that: modal header centered relative to X

My question is if it's possible to center it to the right edge of the modal - not the X.

Upvotes: 3

Views: 4419

Answers (4)

AbuuJurayj Swabur Buruhan
AbuuJurayj Swabur Buruhan

Reputation: 175

On my side, I did the following:-

  • NOTE: The size of my modal was default, it was not large or small.

Then in Modal::begin I added titleOptions as below

Modal::begin([
  'title' => 'yor title ...',
  'titleOptions' => ['style' => ['margin-left' => '95px']],
  ...other options..
]);

Upvotes: 0

Fran
Fran

Reputation: 31

  1. Put text-center d-block in modal-header
  2. Put up button dismiss
  3. Last modal title.
<div class="modal-header text-center d-block">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h2 class="modal-title">Title center</h2>
    ...
</div>

Upvotes: 3

Robert
Robert

Reputation: 6967

By default close is positioned using float:right which keeps it as part of the document flow. Because of this modal-title is always going to center itself respective of the width available minus what close is using.

To fix the problem we need to pull close out of the flow. Easiest way to do that is:

.close { 
  position: absolute; 
  right: 1rem;
}

position: absolute pulls the class out of the normal flow which in turn lets modal-title take up the full width. The right margin is designed to replicate the margins defined for the Modal component to ensure that your layout remains more or less unchanged.

Upvotes: 4

ashamun
ashamun

Reputation: 148

How about something like this:

#exampleModalLabel {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

Upvotes: 1

Related Questions