1

Im trying to customize the bootstrap modal width for a specific modal. I have looked at several resources with no help. Im starting to think my code is just incorrectly developed. Here is my html

here is everything I have tried:

https://www.codeply.com/go/rNFv5RJJqn/bootstrap-modal-full-screen

Bootstrap 4 modal width (increase)

<ng-template class="mw-100 w-75" #createSaved let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Saved RFPs</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Event Name</th>
          <th scope="col">Event Date</th>
          <th scope="col">Event Purpose</th>
          <th scope="col">Start Time</th>
          <th scope="col">End Time</th>
          <th scope="col">Head Count</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let rfp of savedrfps; let i=index" (click)="populaterfpfromsaved(i, createSaved, createProp)">
          <td>
            {{rfp.name}}
          </td>
          <td>
            {{rfp.eventdate}}
          </td>
          <td>
            {{rfp.eventpurpose.purpose}}
          </td>
          <td>
            {{rfp.startime}}
          </td>
          <td>
            {{rfp.endtime}}
          </td>
          <td>
            {{rfp.guestcount}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</ng-template>

I am using angular

whats happening is regardless of inline styling. Using Id's with !important flags.

Using .modal-lg or using the bootstrap width elements seen in the code, the modal is not increasing in size.

baduser
  • 33
  • 1
  • 7

1 Answers1

0

I achieve this by placing my width property on the modal-dialog div. So something like:

<style>
  .modalXl {width: 1250px;}
</style>

<div class="modal-dialog modalXl" role="document">
MichaelvE
  • 2,558
  • 2
  • 9
  • 18