Home/ Questions/Q 7442587
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:11:53+00:00

I am trying to write my first ASP.NET website and I really want to

  • 0

I am trying to write my first ASP.NET website and I really want to use the Twitter Bootstrap but I’m failing at the first hurdle.

I downloaded the Zip file from here, unzipped it and added the files to my solution and the following lines to my _LAyout.cshtml file:

<link href="@Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>

Here is a screenshot showing the above files in my solution:

CSS files
Scripts

I am trying to create a menu bar across the top with this code which was taken from this turorial

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>

</head>
<body>
    <div class="topbar">
        <div class="fill">
            <div class="container">
                <h3>Present Ideas</h3>
                <ul>
                    <li>Blog</li>
                    <li>About</li>
                    <li>Help</li>
                </ul>
                <ul class="nav secondary-nav">
                    <li class="menu">
                        <a href="#" class="menu">Account Settings</a>
                        <ul class="menu-dropdown">
                            <li>Login</li>
                            <li>Register</li>
                            <li class="divider"></li>
                            <li>Logout</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            @RenderBody()
        </div>
        <footer>
        </footer>
    </div>
</body>
</html>

What I get, instead of the horizontal bar is this:

Result - vertical bar instead of horizontal

I would appreciate any help to get me started with what promises to be, an excellent framework.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re using Twitter Bootstrap 2.0, but the tutorial was written for Twitter Bootstrap 1.0, there has been quite a few changes to the markup you need to use to get the desired look.

    It explains some of the changes to the navbar component in the changelog, there are also some basic examples of how it is done now:

    http://getbootstrap.com/2.3.2/getting-started.html#examples

    http://getbootstrap.com/2.3.2/components.html#navbar

    Also (unrelated to the question), you’re including both the minified version and the standard version of the css/js, you only need to include one of each.

    • 0