When upgrading from bootstrap 3.0 to 4.0 which files are impacted?

I want to upgrade, but not sure which files are necessary to be replace from my old 3.0 bootstrap folder.

Can someone direct me (best would be a list) or provide any pointers.

Much appreciated!


Both the HTML and CSS and possibly JS as well if there are changes in them. The HTML structure doesn't change all that much, but some of the elements do and may not look right if you have used a lot of custom CSS (using other CSS files than the default ones) so you may need to alter some things manually once you upgrade them to the Bootstrap 4 version.

The great think about this though is that you don't ever lose your original Bootstrap 3.3.7 version of your site. This file is never changed at all, the process will duplicate your site and then upgrade that instance of it so you can always fall back to the original, or in my case use it to fix things in the new site by opening them both and getting some settings from the old site.

Of note: Cards are messed up when upgraded. This doesn't matter if they are using custom CSS or not. The structure doesn't quite come out right and I've had to redo them each time I've done it because they still seem to use the "panel" parts for some of the areas of them which I don't think is the correct set up. I basically do this to fix them:

Do a search in the CSS for any classes that include the word "panel" and change them to "card". Do a search in the HTML file(s) for any CSS styles containing the word "panel" and changed them to card. Altered the structure of the cards so that they had all "card" parts instead of having any "panel" parts. ...... basically what I do on this is to drag the equivalent elements or element parts from the Components tree to the Overview panel next to the one I want to replace. ...... move any items inside the original Panel item into the new Card item replacing it. ...... check for any Classes or ID's that are in the original element and copy them to the new Card item that is replacing it. ...... you may find that you need to adjust some of the sizing in areas for padding/margin/width/etc. to make it match up to the original look.

That's about all there is to it really. I don't know if there's a reason it's done this way which makes this much work for us, but so far it works pretty good. This is really the majority of things I need to fix. The rest are pretty easy and are mostly related to custom CSS tags that need to be altered to accommodate the new setups.

Hope that helps, experiment since you can't break anything by doing so and see how it works for you. That's pretty much what I did :)

Thank you very much!