First of all, thank you very much for dedicating yourself to reading the question!
Let me tell you, a while ago I've been working on a project with ASP.NET MVC 5, it turns out that from one day to the next, when opening it, the style of the _Layout.cshtml was completely broken (without making any changes to it approximately 10 days ago )
I went back to the _Layout.cshtml that is automatically generated by Visual Studio and the problem persists.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
I also have the bundles by default
BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Utilice la versión de desarrollo de Modernizr para desarrollar y obtener información. De este modo, estará
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
It should be noted that a while ago I updated to Bootstrap 4.0, however, I updated and everything continued to work correctly, only now, 10 days later, everything exploded
In the browser console there is no reading problem error of any library, however, I leave an image so that you can appreciate what is generated when compiling.
In the image the navbar fails and there is an important change in the Learn More button and the font
When what it should output is the following.
Well folks, first of all thank you very much and I hope someone has an idea of why this is happening!
Cheers!
This happens because the default template of ASP.NET MVC is not compatible with Bootstrap 4, I have tried to change your template to work with Bootstrap 4, keep in mind that the library has the following dependencies:
and that I have changed those
@Render
of your view because .NET Fiddle does not accept those methods, without further ado, I leave you what worked for me:This happens because the names of many classes (Like
navbar-fixed-top
) were changed for a better use, in the same way the way in which the links are generated also changes, you have to add a classnav-link
to them so that they appear as part of thenavbar
, here I leave you a fiddle of how I made it work with the template that appears by default on the Bootstrap page .In the same way, it would be good if you go through the getting started of Bootstrap 4 so that you can see what are the tags
meta
and dependencies that you need to use Bootstrap 4.Finally, it would be a good idea to add a new
ScriptBundle
to your collection, so that you only have to modify the names of the CSS classes in your view:I haven't worked very well with
ScriptBundle
, but it should work when making@Scripts.Render("~/bundles/popper")
and leaving your Bootstrap 4 ready template.