Bootstrap modal doesn't work after adding namespace

Question

I added namespaces to my bootstrap css file to avoid conflicts. However, after that the modals aren't working proper. The content added isn't surrounded by my namespaced div so its not working.

Here's an example:

<div class="ssl">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
</div>
<div class="ssl">
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
      This is the modal content.
        </div>
      </div>
    </div>
</div>

I used this code to add the namespaces through less:

.ssl {
    @import (less) 'bootstrap-full.css';
}

Can anyone help me fix this issue by suggesting some ideas?

Answer 1

I found a solution for this problem after adding a namespace in Bootstrap 4.1. You have to remove the namespace from the modal-backdrop class, basically, change it from this:

.namespace .modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.namespace .modal-backdrop.fade {
  opacity: 0;
}

.namespace .modal-backdrop.show {
  opacity: 0.5;
}

to this:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

In my case, the custom bootstrap was used inside a container and not the entire page, so when I created a modal, a new division was created outside the container, out of reach from the custom CSS.