I'm new in Angular and Bootstrap
Actually I have this in my Browser :
and this in my code
<ng-template #newSlaVmData let-modal>
<div class="modal-header modal-slaVMData">
<h4 class="modal-title" id="modal-basic-title">
Add
</h4>
<button type="button" class="close" 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",
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;
}
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
You can add style after the class like
<div class="modal-dialog" style="color:white"></div>
This will override the bootstrap class.