Why does a new ASP.NET Core 3.1 project generate bootstrap css of different versions? - asp.net-mvc

Recently I started a ASP.NET Core-Web-App (MVC) .NET.Core 3.1 project and noticed that the bootstrap stylesheets, that were automatically generated in the folder wwwroot/lib/bootstrap/dist/css/, have different versions:
bootstrap.css (v3.4.1)
bootstrap-theme.css (v3.4.1)
bootstrap-grid.css (v4.3.1)
bootstrap-reboot.css (v4.3.1)
Why are versions 3 and 4 thrown together?
Can I just delete the contents of the bootstrap folder and replace
it with bootstrap 4 or 5?

To answer your question, yes you can delete these and just replace the files and their corresponding references with whatever bootstrap version you like.

If that is the case and it doesn't work correctly for you, you can update it manually
Right click on wwwroot => Add => Client Side Library
Type "bootstrap" in the search box
Choose specific files of the version you want and click "Install".

Related

How to implement the Gentelella Bootstrap Admin theme in ASP.NET MVC?

I'm starting now with web development in Visual Studio. I have already understood MVC, I have some knowledge of HTML and I started to study the bootstrap.
Then, I discovered the beautiful template Free Bootstrap 3 Admin Template on the web, which has an example online here: https://colorlib.com/polygon/gentelella/index.html
I downloaded the files like custom.css and custom.min.css as they are shown in the following image:
But now I don't know how to put it in my project, so I created a new clean project in Visual Studio Community 2015. I did some tests, and I created some controllers and views.
How can I change the default bootstrap theme that came with ASP.NET MVC project to the downloaded one?
I imagine I should replace the _Layout in the shared folder. But what else should I bring?
I do not want all those example pages, etc. Just Bootstrap and the base layout to create my view's.
I have found everything I needed from a YouTube video, entitled "Plantilla Bootstrap en Proyecto ASP.NET MVC" (obviously in Spanish).
There are many steps:
Adding files to the project
setting the _Layout
set scripts references
bundles
Etc.
Ultimately, it worked.
step one
Create a MVC project Default template in visual studio
Step Two
Delete All cshtml in view folder expect shared folder
you must be detrmine wthich part of your page repeatly in all pages that is your layout and you can put html tag like header menu and footer in /views/shared/_layout.cshtml and write renderbody in part of layout to see default login homepage or etc
finaly
all css and java script folder paste in your project and in layout change target to available js and css resource
Learn about mvc Layout
Understand Css And JavaScript embed from bundle

Use MVC 4 style scaffolding in VS 2015 Update 3

I am updating a few year old website which was originally built with MVC4 (VS2012 perhaps). I am pretty sure after update 3 when I add a new view using scaffolding I now get the MVC5 style views using Bootstrap, etc. This site doesn't use bootstrap and there are no plans to add it at this time. Is there a way to reference the old style scaffolding template so I don't need to build (or rebuild) the view pages by hand after they created?
Currently using VS2015 Update 3
It appears that nuget package Microsoft.AspNet.Mvc is running 5.2.3. Is this the reason I am getting MVC 5 scaffolding templates?
Scaffolding uses Code Templates, but only to define the Create, List, Edit, Details,Delete and Empty Views. It means that the css are inherited from your _Layout.cshtml. Just remove the bootstrap reference from that and it should work. If you want to customize your Scaffolding layouts, just change the Code Template:
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 4\CodeTemplates\AddView\CSHTML
More info:
http://www.hanselman.com/blog/ModifyingTheDefaultCodeGenerationscaffoldingTemplatesInASPNETMVC.aspx

How to move bootstrap fonts to different folder?

I have a standard ASP.NET MVC application with Bootstrap. I moved the "Fonts" folder to "Content/Fonts". Inside the folder there are those glyphicons-halflings-regular files.
When I start the application I get a 404 browser error that the Fonts/glyphicons-halflings-regular.woff and glyphicons-halflings-regular.ttf file couldn't be found.
How do I configure my project so these files are found?
Solution was to update pathes in my bootstrap.css.
(See comments of original question)
Thx meep for your help.
One solution is to update paths in bootstrap.css. However, when you update Bootstrap, your changes will be lost. I'd recommend simply moving your stylesheet as well to keep the hierarchical structure found in the unmodified stylesheet.
For example, if you want to move your fonts in the Contents/Fonts folder (I always hate it being loose in the project root folder too haha), have your styles in the Content/Styles folder so that ../fonts/glyphicons-halflings-regular.woff (and so on) still references the correct folder.

ASP.NET MVC4 + Bootstrap 3 How to apply a different theme?

I am trying the new Visual Studio Version, which comes with the built-in Bootstrap Template. Since I wanted to use Bootstrap 3, I upgraded all files according to a helpful thread: ASP.NET MVC 5 and Bootstrap 3
This works fine, but I have trouble to apply a different Theme.
As far as I understand, I can simply replace the bootstrap.css with a different theme and the theme "should" work (I deduced this from http://bootswatch.com/) - but for me the Thema always stays at the ASP.NET default, which I doesn't like.
So: How can I change the damned theme? Ideally, I want to use: http://bootswatch.com/cerulean/
Thank you very much.
Bootstrap's css comes in 2 files: bootstrap.css and bootstrap-theme.css.
I didn't see how it is implemented in mvc5 template, but I'm pretty sure it is done using bundles. So, you got to check the bundles.cs file and replace bootstrap-theme.css there with theme of your choice.

Unable to Bundle JQuery Mobile 1.2 in ASP.NET MVC 4 app

I'm working on an ASP.NET MVC 4 app. This app leverages bundling to improve performance. Previously, the app was using jquery.mobile-1.1.0.js. Everything worked fine. However, I've upgraded to JQuery Mobile 1.2 and when I load my screen, I always see a wait spinner. I've pinpointed it to the fact that both the standard and the minified versions are being referenced. When I look in my view-source after the page is loaded, I see the following at the top:
<script src="/Scripts/jquery.mobile-1.2.0.js"></script>
<script src="/Scripts/jquery.mobile-1.2.0.min.js"></script>
From what I can tell, this was generated from the following in my ASP.NET MVC .cshtml file
#Scripts.Render("~/bundles/jquerymobile")
In my BundleConfig.cs file, I have the following definition:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));
Essentially, I want to use the normal version when the debug="true" flag is set in my web.config compilation setting. However, when debug="false", I want to use the minified version. What am I doing wrong?
Thank you
This should happen automatically for you already (assuing the fileextensionreplacement lists still have the default "min" entry for when optimizations are enabled).
As a workaround, you could try this instead which should also work:
.Include("~/Scripts/jquery.mobile-{version}.js"));
This basically is similar to your * except it will regex match for version strings. Note, both this and what you have require that you only have the latest jquery in your Scripts folder, if you still have the 1.1 version there, you will end up with both versions in your page.

Resources