I'm new in Angular and Bootstrap

Actually I have this in my Browser :

Browser Code through inspect

and this in my code

<ng-template #newSlaVmData let-modal>
          <div >
            <h4  id="modal-basic-title">
              Add
            </h4>
            <button type="button"  aria-label="Close" (click)="modal.dismiss('Cross click')">
              <span aria-hidden="true">
                ×
              </span>
            </button>
          </div>

As you can see, some code are generated by Bootstrap.

I want to know how can I change the CSS of "modal-dialog" (Browser code) ?

I tried different methods like adding this class in my SCSS file but it didn't work.

I use these dependencies:

"@ng-bootstrap/ng-bootstrap": "^9.1.3"
"bootstrap": "^4.6.0",

CodePudding user response：

You should use ::ng-deep pseudo-class to disable view-encapsulation. Add this to your .scss file:

::ng-deep .modal-dialog {
  margin-top: 100px;
  width: 500px;
}

CodePudding user response：

You can add style after the class like

<div  style="color:white"></div>

This will override the bootstrap class.

CodePudding user response：

you can just simply overwrite the classes used by bootstrap, like this:

.modal-dialog {
  background-color: black;
}

it's important to load your css file after the bootstrap css