New MVC5 project, Bootstrap update, Fail
-
Using VS2017 - I created a new MVC5 app (.Net framework), (with single user authentication), and immediately ran update-package on the whole solution. One of the updates was from Bootstrap 3.3.1 to v5.n. When I ran the app (with no changes to the template-generated code), the first thing I found was that somehow, updating to bootstrap 5.n actually breaks the code in bundleconfig.cs. I had to change this line:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
to this:
bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
After fixing that, I ran the app again, and noticed that the nav bar at the top of the page was completely missing. This meant there were no links to the home, about, contact, or login actions. The code was indeed in _loginpartial.cshtml and loginpartial was referenced in _latoutpartial.cshtml, but the nav bar was not displayed. So, I downgraded bootstrap to 4.6.1, and saw no visual change n the running app. So I downgraded to 3.4.1, and now the navbar is displayed as expected. The primary difference I've noticed is that bootstrap 4 and newer uses flexbox for styling, and the original MVC5 template that comes with Visual Studio is NOT compatible with that version of bootstrap. Has anybody else seen this behavior?
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013 -
Using VS2017 - I created a new MVC5 app (.Net framework), (with single user authentication), and immediately ran update-package on the whole solution. One of the updates was from Bootstrap 3.3.1 to v5.n. When I ran the app (with no changes to the template-generated code), the first thing I found was that somehow, updating to bootstrap 5.n actually breaks the code in bundleconfig.cs. I had to change this line:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
to this:
bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
After fixing that, I ran the app again, and noticed that the nav bar at the top of the page was completely missing. This meant there were no links to the home, about, contact, or login actions. The code was indeed in _loginpartial.cshtml and loginpartial was referenced in _latoutpartial.cshtml, but the nav bar was not displayed. So, I downgraded bootstrap to 4.6.1, and saw no visual change n the running app. So I downgraded to 3.4.1, and now the navbar is displayed as expected. The primary difference I've noticed is that bootstrap 4 and newer uses flexbox for styling, and the original MVC5 template that comes with Visual Studio is NOT compatible with that version of bootstrap. Has anybody else seen this behavior?
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013The
ScriptBundletries to minify the Javascript files if optimizations are enabled. Unfortunately, the engine it uses to do that is quite old, and fails for a lot of modern JS files. I generally tend to use aBundlepointing directly to the.min.jsfiles instead, which works much better. There were a lot of changes between BS v3 and v4: Migrating to v4 · Bootstrap[^] Probably even more between v4 and v5. :)
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Using VS2017 - I created a new MVC5 app (.Net framework), (with single user authentication), and immediately ran update-package on the whole solution. One of the updates was from Bootstrap 3.3.1 to v5.n. When I ran the app (with no changes to the template-generated code), the first thing I found was that somehow, updating to bootstrap 5.n actually breaks the code in bundleconfig.cs. I had to change this line:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
to this:
bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
After fixing that, I ran the app again, and noticed that the nav bar at the top of the page was completely missing. This meant there were no links to the home, about, contact, or login actions. The code was indeed in _loginpartial.cshtml and loginpartial was referenced in _latoutpartial.cshtml, but the nav bar was not displayed. So, I downgraded bootstrap to 4.6.1, and saw no visual change n the running app. So I downgraded to 3.4.1, and now the navbar is displayed as expected. The primary difference I've noticed is that bootstrap 4 and newer uses flexbox for styling, and the original MVC5 template that comes with Visual Studio is NOT compatible with that version of bootstrap. Has anybody else seen this behavior?
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013You might want to look at [Migrating to v5 · Bootstrap v5.2](https://getbootstrap.com/docs/5.2/migration/#content) and [Migrating to v4 · Bootstrap v4.6](https://getbootstrap.com/docs/4.6/migration/) There are a number of changes, some very subtle that with break your layouts. A lot of the classes have changed and the required layout for components is different in a lot of cases. Also, the JavaScript in V5 doesn't need jQuery as current CSS and DOM/JavaScript can do almost all of what jQuery was required to do. I find V5 a little easier to read and write, but haven't found snippets for VS2022 yet. If you are generating HTML in any of your JavaScript or components, you may have some work to do. In that case, you may decide it is better to just keep using V3 of Bootstrap. The change to V4 or V5 is not adding any value if you already have working layouts.
"Time flies like an arrow. Fruit flies like a banana."
-
You might want to look at [Migrating to v5 · Bootstrap v5.2](https://getbootstrap.com/docs/5.2/migration/#content) and [Migrating to v4 · Bootstrap v4.6](https://getbootstrap.com/docs/4.6/migration/) There are a number of changes, some very subtle that with break your layouts. A lot of the classes have changed and the required layout for components is different in a lot of cases. Also, the JavaScript in V5 doesn't need jQuery as current CSS and DOM/JavaScript can do almost all of what jQuery was required to do. I find V5 a little easier to read and write, but haven't found snippets for VS2022 yet. If you are generating HTML in any of your JavaScript or components, you may have some work to do. In that case, you may decide it is better to just keep using V3 of Bootstrap. The change to V4 or V5 is not adding any value if you already have working layouts.
"Time flies like an arrow. Fruit flies like a banana."
I've already fixed the problems it caused, but it was completely unexpected.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013 -
Using VS2017 - I created a new MVC5 app (.Net framework), (with single user authentication), and immediately ran update-package on the whole solution. One of the updates was from Bootstrap 3.3.1 to v5.n. When I ran the app (with no changes to the template-generated code), the first thing I found was that somehow, updating to bootstrap 5.n actually breaks the code in bundleconfig.cs. I had to change this line:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
to this:
bundles.Add(new Bundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
After fixing that, I ran the app again, and noticed that the nav bar at the top of the page was completely missing. This meant there were no links to the home, about, contact, or login actions. The code was indeed in _loginpartial.cshtml and loginpartial was referenced in _latoutpartial.cshtml, but the nav bar was not displayed. So, I downgraded bootstrap to 4.6.1, and saw no visual change n the running app. So I downgraded to 3.4.1, and now the navbar is displayed as expected. The primary difference I've noticed is that bootstrap 4 and newer uses flexbox for styling, and the original MVC5 template that comes with Visual Studio is NOT compatible with that version of bootstrap. Has anybody else seen this behavior?
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013really fascinating More of this is what I'd like to see. You're welcome for sharing your knowledge.
