CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2307683
user2307683

Reputation: 2029

How to use only one element from twitter bootstrap?

How to use this ( https://github.com/silviomoreto/bootstrap-select ) twitter bootstrap plugin only for one element on the page? If I use it all my site use twitter bootstrap element (url are blue etc.) 

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-select.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bootstrap-select.css">

<script type="text/javascript">
    $(window).on('load', function () {
        $('.selectpicker').selectpicker({
            'selectedText': 'cat'
        });
    });
</script>

Upvotes: 0

Views: 2388

Answers (2)

Lo&#239;c Faure-Lacroix
Lo&#239;c Faure-Lacroix

Reputation: 13600

In that case, you have two solutions.

Take the .less sources from github and rebuild bootstrap with only the things you need. In other words you'll have to remove most .less files from the build process and take only the things you need.

Since you only have one element, add the selector to a page with bootstrap and extract all the css related to this element. Put this css in a different file and link it in your html. Once you copied all the required css declarations everything should look as expected.

You can then rename classes if needed.

To copy css declaration used in the browser you can use dev toolbars from firefox/chrome and so on. There might be good plugins that makes the job easier.

Upvotes: 0

Ed_
Ed_

Reputation: 19098

From your comment you are including: 

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combi‌​ned.min.css" rel="stylesheet"> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"‌​>

On your site. This means you're including the whole of twitter bootstrap which adds some styles to normal html elements.

Instead of this, why not download just the files you linked to on github and use those instead, i.e. (if you host them yourself):

<link href="path/to/bootstrap-select.min.css" rel="stylesheet"> 
<script src="path/to/js/bootstrap-select.min.js"‌​>

If you needed other features from bootstrap you could also create a custom build using this resource.

Upvotes: 2

Related Questions