CODEWITHSUNDEEP
twitter-bootstrap
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

I have too many references to bootstrap, how do I know what I need, should I update versions?

There are a number of references to bootstrap in the page I'm working on. But I don't know the differences between them, they may all do the same thing for all I know. Some are being loaded from local files, some from CDN sources. I know you don't know how bootstrap is being used by the page, and in this case I don't either. But any opinion on what I should keep and what I should dump would be appreciated. Or if I should update versions to something more current, or any other recommendations you can give. There just seems like a lot of code here especially if some of it is duplicated.

<script src="bootstrap/js/bootstrap.min.js"></script>       <!-- v3.3.2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>
<script src="bootstrap/js/bootstrap-select.min.js"></script>                <!-- v1.12.4 2018-1-18 -->
    <script src="bootstrap/js/bootstrap-multiselect.js"></script>               <!-- 2.0 2018-1-18 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

There are also a couple of references in link statements too.

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"  media="screen">  <!-- v3.3.7 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-select.min.css" >  <!-- v1.12.4 -->

Whats the difference between bootstrap.min.css and bootstrap-select.min.css? Do I need both?

Upvotes: 0

Views: 214

Answers (1)

JRI
JRI

Reputation: 1942

The best thing to do is to start commenting out some of the lines and see what fails.

bootstrap-select and bootstrap-multiselect are plugins that build on the basic bootstrap framework. They both add multiple-selection widgets, so it's unlikely your page actually uses both. I'd start by commenting out each of these in turn to see if it breaks anything. My guess is that you will be using bootstrap-select, which appears to be under more active development.

bootstrap.min.css provides the styling for the main Bootstrap framework. bootstrap-select.min.css is only needed for the bootstrap-select plugin. The bootstrap-multiselect plugin also requires a similar bootstrap-multiselect.css file, which you've not mentioned. If it isn't being loaded, this may be another hint that the bootstrap-multiselect plugin isn't actually being used.

popper.js is required by bootstrap-select, and some other core Bootstrap functionality, so you probably do need it.

You only need one instance of bootstrap.js. The first one (v3.3.2) isn't used at all, as its functions will get over-written by the second version (v4.3.1). This version will probably get used by the selector plugins, which are loaded next, but other scripts on the page will use the final version that gets loaded (v4.0.0).

Unless there's a pressing reason otherwise, I would just use the latest version of bootstrap.js from the recommended CDN. Hopefully this is going to be the least buggy/best looking version. Look at the 'Getting Started' documentation at https://getbootstrap.com/ for the recommended URIs. Load JQuery and Popper first, then bootstrap.min.js, then your chosen selector plugin, if necessary.

Upvotes: 1

Related Questions