How can I change CSS generated by Bootstrap in an Angular app?

Question

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",

NeNaD · Accepted Answer · 2021-12-21 15:44:49Z

1

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;
}

answered Dec 21, 2021 at 15:44

NeNaD

20.8k11 gold badges65 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lakshna S · Accepted Answer · 2021-12-21 14:03:24Z

0

You can add style after the class like

<div class="modal-dialog" style="color:white"></div>

This will override the bootstrap class.

answered Dec 21, 2021 at 14:03

lakshna S

2731 silver badge5 bronze badges

1 Comment

Andres2142 Over a year ago

This indeed overrides the bootstrap style but, using in-line styles is bad, you would end up having styles in all over your template html

vargaking · Accepted Answer · 2021-12-21 14:51:31Z

0

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

edited Dec 21, 2021 at 14:51

answered Dec 21, 2021 at 13:28

vargaking

1391 silver badge13 bronze badges

Collectives™ on Stack Overflow

How can I change CSS generated by Bootstrap in an Angular app?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related