why my vs mvc project doesnt accept bootstrap 4 or higher?

Kokombads Bleh Bleh 26 Reputation points
2021-08-26T16:02:46.683+00:00

So I was following a tutorial on MVC, the tutor changed the default bootstrap theme into a bootstrap 4 lumen theme from bootswatch. I did the same but the theme, button, and navbars didnt show as it was in the tutorial. If I put a boostrap 3 theme, it goes a little fine (not the same as the preview the bootswatch site shows but it is better than what happens in bootstrap 4 or higher).
So I tried to fix this by upgrading the bootsrap from nuget into bootstrap 4, still the same. then I tried upgrading to bootstrap 5.1, the same result.
So what's wrong with this?

here is a screen shot of what happen if I use the bootswatch's bootsrap 5 (left) vs the bootstrap 3 version

126777-slates.jpg

here is my bundleconfig (there was an error in the 'bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(' and another tutorial told that to fix this, I should rewrite 'new ScriptBundle' into 'new Bundle') 

public class BundleConfig  
    {  
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862  
        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*"));  
  
            // Use the development version of Modernizr to develop with and learn from. Then, when you're  
            // 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"));  
  
            bundles.Add(new Bundle("~/bundles/bootstrap").Include(  
                      "~/Scripts/bootstrap.js"));  
  
            bundles.Add(new StyleBundle("~/Content/css").Include(  
                      "~/Content/slate-4-bootstrap.min.css",  
                      "~/Content/site.css"));  
        }  
    }
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,290 questions
Accepted answer
  1. Yijing Sun-MSFT 7,071 Reputation points
    2021-08-27T03:31:00.613+00:00

    Hi @Kokombads Bleh Bleh ,
    Bootstrap3 with Bootstrap4 and Bootstrap5 have many css changes.So you need to change your _layout elements. You could use "nav-link" class to replace with @azzedinehtmlsql .ActionLink. It fits Bootstrap4 and Bootstrap5. 

    <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>  
   <nav c lass="navbar navbar-expand-sm navbar-dark fixed-top" s tyle="background-color:gray">  
       <div c lass="container">  
            <div c lass="navbar-header">  
                <button c lass="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">  
                    <span c lass="navbar-toggler-icon"></span>  
                </button>  
                <a c lass="navbar-brand" href="#">Application name</a>  
            </div>  
            <div c lass="collapse navbar-collapse" id="navbarColor01">  
                <ul c lass="nav navbar-nav">  
                    <li c lass="nav-item active">  
                        <a c lass="nav-link" href="#">Home</a>  
                    </li>  
                    <li c lass="nav-item">  
                        <a c lass="nav-link" href="#">About</a>  
                    </li>  
                    <li c lass="nav-item">  
                        <a c lass="nav-link" href="#">Contact</a>  
                    </li>  
                    <li c lass="nav-item">  
                        <a c lass="nav-link" href="#">Login</a>  
                    </li>  
                </ul>  
            </div>  
        </div>  
    </nav>  
        </div>  
    </nav>  
  <div c lass="container body-content">  
        @RenderBody()  
        <hr />  
        <footer>  
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>  
        </footer>  
    </div>  
    @Scripts.Render("~/bundles/jquery")  
    @Scripts.Render("~/bundles/bootstrap")  
    @RenderSection("scripts", required: false)

    Best regards,
    Yijing Sun

    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest