Navbar in asp.net mvc application doesn't work with bootstrap

Question

there are few bootstraps that it works with, like the default and the lumen bootstrap in this site: https://bootswatch.com/

but other bootstraps like materia and flatly. I have no idea why it looks like that:

http://www.interload.co.il/upload/1975618.PNG

edit: this is the navbar 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>
        </div>
    </div>
</div>

can you show any working demo of your code so that i can help you better — Deepak Verma
– Deepak Verma, Commented Nov 12, 2018 at 9:30

לבני מלכה · Accepted Answer · 2018-11-12 09:03:19Z

1

As I saw in link you attached they use the latest version of bootstrap:

So you have to add bootstrap references to you start html file in the <head></head>(It looks like you need only js files)

bootstrap version 4.1.3 ref :

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

edited Nov 12, 2018 at 9:03

answered Nov 12, 2018 at 8:57

לבני מלכה

16.3k2 gold badges26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tal Ethan Over a year ago

I tried to add these lines inside the <head> element but it still doesn't work. I'm new to bootstrap and have no idea why it looks like that

Tal Ethan Over a year ago

How can I send it to you? I'm also new to stack overflow

לבני מלכה Over a year ago

It looks like you did not put all bootstrap classes:w3schools.com/bootstrap4/bootstrap_navbar.asp

Collectives™ on Stack Overflow

Navbar in asp.net mvc application doesn't work with bootstrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related