Bootstrap modal does not work after adding namespace

Question

I added namespaces to the bootstrap css file to avoid conflicts. However, after this, the modals do not work correctly. The added content is not surrounded by my namespaced extension, so it does not work.

Here is 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 namespaces through less:

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

Can someone help me fix this problem by suggesting some ideas?