How to overwrite bootstrap css correctly?-CodePudding

I know there are a lot Q&A regarding to this topic on SO. But in my case it is a little bit different. I have a global stylesheet modal.scss for restyling default bootstrap's model. I want to centre the model footer with justify-content: center; But it is not applying because of bootstraps folder _modal.scss which is setted to justify-content: flex-end; How can I overwrite this, or I have to make changes in _modal.scss ?

    .modal-footer {
        justify-content: center;
        padding: 2rem;
        background-color: $color-dashboard-background;
        border-top: none;
        cursor: pointer;
      }

CodePudding user response：

If you want to redesign the whole bootstrap component then you can use bootstrap's customization option. You can update the bootstrap's existing sass variables with your preferred values.

Here is the link to the documentation if you'd like to try it.

https://getbootstrap.com/docs/5.0/customize/sass/

CodePudding user response：

One option is you can use "!important" on that particular property and it will overwrite the bootstrap property.

.modal-footer {
        justify-content: center!important;
        padding: 2rem;
        background-color: $color-dashboard-background;
        border-top: none;
        cursor: pointer;
      }