How do I only use bootstrap progress bar without Bootstrap CSS styles taking over my site?-CodePudding

My site has its own custom CSS code and doesn't use any bootstrap. But I have a table in my Django project that I want to make a percentage bar using only the bootstrap progress bar via the CDN and nothing else from bootstrap.

So I added this below the jquery script tag in the header of my base.html like so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.8.5/bootstrap-progressbar.min.js" integrity="sha512-ShSScKTSdSD7IiMKfgTdqaEY8gOGm5cNfqMr6Wc5BZvMgc1UveS UqpS0TNUtRD1CZ9KhmbGtzwUN7HJlXxY8Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

However, when I place the bootstrap progress bar code in a column of my table I get no progress bar showing (no change):

<td>
    <div >
        <div  role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">value</div>
    </div>
</td>

The progress bar only shows when I add the bootstrap link tag in the header of my base.html like so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.8.5/bootstrap-progressbar.min.js" integrity="sha512-ShSScKTSdSD7IiMKfgTdqaEY8gOGm5cNfqMr6Wc5BZvMgc1UveS UqpS0TNUtRD1CZ9KhmbGtzwUN7HJlXxY8Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

But the problem is adding that link tag changes the whole CSS of my site along with the desired results of just the progress bar.

How can I only use the bootstrap progress bar for my table without the whole CSS of my site being changed by bootstrap?

CodePudding user response：

The easy way to import styling without using unwanted css is to open developer tool in a browser, select the element and look into Computed tab. You'll see all needed properties - so you can copy it into your own css.