EN VI

Html - How do I split a Modal Header column in two?

I would like to place H1 and P tag in the Modal Header and have them occupy one row each. I also want to center the text.

I have applied d-block to each, but they will have two cols. I tried widening the Height in the Modal Header, but that didn't work either.

How can I solve this problem ? I'm using [email protected].

<div class="modal fade" id="product-review-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
                <p>Please review this product! Thank you for your cooperation!</p>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>

Solution:

That's because .modal-header has a default CSS property display: flex (if you inspect you will see it) which will make the children sit beside each other.

To overwrite it, add any of the following classes to modal-header:

add flex-column to change the flex directions to a column.
add d-block to change modal-header to display: block.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<!-- with .flex-column -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#product-review-modal">
  flex-column
</button>
  <div class="modal fade" id="product-review-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header flex-column">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
          <p>Please review this product! Thank you for your cooperation!</p>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

<!-- with .d-block -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#product-review-modal2">
  d-block
</button>
  <div class="modal fade" id="product-review-modal2">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header d-block">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Review of "Product Name"</h1>
          <p>Please review this product! Thank you for your cooperation!</p>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

Note that .flex-column will automatically center the text since modal-header has also a align-items: center; defined.