title: Angular - Restrict bootstrap styles only for a certain element
body: <p>I implemented pagination. The pagination is ngx bootstrap pagination.</p>
  <p>My entire project uses custom CSS classes that I have created.</p>
  <p>The pagination element uses bootstrap CSS in order to look decent.</p>
  <p>The thing is that my entire website is affected by those bootstrap styles.</p>
  <p>Is there any way to restrict bootstrap styling only for the pagination element so the other style won't be affected?</p>
  <p><strong>Pagination el</strong></p>
  <pre><code>&lt;div style=&quot;margin-top: 40px;&quot;
   *ngIf=&quot;pagination&quot;
   class=&quot;d-flex justify-content-center&quot;&gt;
    &lt;pagination [boundaryLinks]=&quot;true&quot;
                [totalItems]=&quot;pagination.totalItems&quot;
                [itemsPerPage]=&quot;pagination.itemsPerPage&quot;
                [(ngModel)]=&quot;pagination.currentPage&quot;
                (pageChanged)=&quot;pageChanged($event)&quot;
                previousText=&quot;&amp;lsaquo;&quot;
                nextText=&quot;&amp;rsaquo;&quot;
                firstText=&quot;&amp;laquo;&quot;
                lastText=&quot;&amp;raquo;&quot;&gt;
  
    &lt;/pagination&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I tried to build the CSS classes by myself but It seems impossible because I don't have access to any elements inside of the Pagination elelement.</p>
  <p>Thanks!</p>