question

KokombadsBlehBleh-1463 avatar image
0 Votes"
KokombadsBlehBleh-1463 asked JosipLovrei-4027 published

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

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"));
         }
     }


dotnet-aspnet-mvc
slates.jpg (85.5 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Bootstrap implemented HTML and CSS changes in Bootstrap 4 and 5. You'll need to update the layout view and perhaps other views built against Bootstrap 3. The Bootstrap documentation explains these changes.


0 Votes 0 ·

1 Answer

YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered JosipLovrei-4027 published

Hi @KokombadsBlehBleh-1463 ,
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 @Html.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.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

thanks. I tried it last night, it fixed the page, but the problem was when i resize the browser like the width of a mobile device. the navbar because hamburger icon but when i clicked it, it doesnt drop down. good fix though. im not a front ender and i just recently started learning css.

0 Votes 0 ·
JosipLovrei-4027 avatar image JosipLovrei-4027 KokombadsBlehBleh-1463 ·

Hi, My hamburger icon expands Navbar, but it dosn't collapse it whan i click it again.
Did you solved your problem?

0 Votes 0 ·