Adding New Theme to ASP.NET MVC 5 Dont Work

Adding new Theme to ASP.Net MVC 5 dont work

This is because Lumen uses Bootstrap 4. Your issue with the navigation is a known breaking change.

Your options are to either use a Bootstrap 3 theme or perform a migration to version 4.

bootstrap theme not working in ASP.Net MVC 5 project

Change your 'navbar' code code in _Layout.cshtml. You might be already using the below code -

<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>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

Replace it with below one from getbootstrap.com. But before that ensure that you have downloaded/installed bootstrap 4.0 (I have done it via Nuget package manager). You can add your customization on it -

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ASP.NET MVC5 Bootstrap CSS Messing Up Navigation?

You're watching the course on ASP.NET MVC 5 made by Mosh Hamedani I presume. You're downloading the latest version of the Bootswatch theme which is meant for Bootstrap 4. The default MVC 5 template uses Bootstrap 3.

You need to download this version of the Lumen theme: "https://bootswatch.com/3/lumen/"

---

Alternatively you could upgrade to Bootstrap 4 by updating your Bootstrap NuGet package.

ASP.NET-MVC5 - Why would Bootstrap v4 themes not show components correctly?

yes you have to remove the nav div in layout page and put this

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

How do I fix homepage issue in MVC 5 when i add bootsrap lumen theme?

OK, assuming this is Bootstrap 3 and your "css" bundle is loading it, their example here could be used. Taking a shot at integrating your code I would try:

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- Wrap your banner, app name etc. in a link back to home page -->
            <a href="@Url.Action("Vidly", "Home", new { area = "" })" class="navbar-brand" title="Return to home page.">
                <!-- I am using a font awesome icon plus text. You can use a bootstrap glyph or a banner, image, etc. -->
                <span><i class="fa fa-home"></i> My App Name</span>
            </a>
        </div>
        <!-- This is where you put your menu items. It will collapse if screen is small. The id is important to link above. -->
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">@Html.ActionLink("Vidly", "Vidly", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
  </nav>
  <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>

Bootstrap template is not working in MVC application

You are probably not using the same Bootstrap version as the one being used for the Bootswatch theme. I had the same problem and opened an issue on Github, where Thomas Park gave me the following answer:

Yup, just make sure you're on the same version as the Bootstrap being used. Right now v4 is on bootswatch.com, but you can grab older versions at https://bootswatch.com/3/ and https://bootswatch.com/2/

So, try updating your Bootstrap version OR using a previous version of the Bootswatch theme you want (from the links above).

Source: https://github.com/thomaspark/bootswatch/issues/784

bootstrap 3 template change mvc5

There are many sites will provide you free Bootstrap templates, as http://bootswatch.com/, checkout e.g. amelia; download and rename theme and copy theme Amelia.css [you can name it as you want] in to your Content folder, in APP_Start.BundleConfig.cs
Update RegisterBundles() method as:

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css", "~/Content/Amelia.css"));

Remember to have your theme name last e.g. Amelia.css in bundle.add.
Folder Run project and you will see rendered theme.

---

Related Topics