I am trying to add an icon to my bootstrap code but the code I have added:
<li><a href="#"><i class="icon-user"></i>Create Client</a></li>
Works on Rails but not on ASP. The link is there without the icon. Is this correct for ASP?
My View as follows:
<!DOCTYPE html>
<html>
<head>
<title>@ViewData("Title")</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Courtenay's Laundry</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active"><a href="/Index">Home</a></li>
<!-- Dropdown menu Service -->
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Service
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<!-- Dropdown menu Clients -->
<li class="dropdown" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">
Customers
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Create Customer</a></li>
<li><a href="#">Modify Customer</a></li>
<li><a href="#">Delete Customer</a></li>
<li class="divider"></li>
<li><a href="#">View Loyalty</a></li>
<li><a href="#">Manually Change Loyalty</a></li>
<li class="divider"></li>
<li><a href="#">Notify Client</a></li>
</ul>
</li>
<!-- Dropdown menu Management -->
<li class="dropdown" id="menu3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu3">
Management
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="active"><a href="#">Reporting</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<!--Sidebar content-->
<ul class="nav nav-list">
<li class="nav-header">Service Links</li>
<li><a href="#"><i class="icon-book icon-white"></i>Book Job</a></li>
<li><a href="#"><i class="icon-book"></i>Book Out Job</a></li>
<li><a href="#"><i class="icon-random"></i>Station Transfer</a></li>
<li class="nav-header">Client Quick Links</li>
<li><a href="#"><i class="icon-user"></i>Create Client</a></li>
<li><a href="#"><i class="icon-share"></i>Notifications</a></li>
<li class="nav-header">Reporting</li>
<li><a href="#"><i class="icon-file"></i>Reporting</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-cog"></i>Settings</a></li>
</ul>
</div>
</div>
<div class="span10">
@RenderBody()
</div>
</div>
</div>
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-transition.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-alert.js")" type="text/javascript"></script>
<script src="@Url.Content("~/bootstrap-modal.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-dropdown.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-scrollspy.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-tab.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-tooltip.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-popover.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-button.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-collapse.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-carousel.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-typeahead.js")" type="text/javascript"></script>
</body>
</html>
I have:
bootstrap-dropdown.js
bootstrap.js
bootstrap.min.js
In my script folder
Are you sure you have included the bootstrap stylesheets? You can check with your browsers console if any files couldn’t be loaded or such. Shouldn’t make any difference what server-side language you are using here. Otherwise – check the generated code and post it. I use ASP.Net MVC all the time with Bootstrap, and no issues there – just make sure that your paths are correct (I have a feeling you have a /bootstrap folder in your Contents folder, and you’re not referencing to it correctly)!
Here’s a simple ASP.NET MVC3 ‘boilerplate’-ish project. So you can get started really easily. http://wearereasonablepeople.com/APSMVC3BootstrapBoilerplate.zip
Please note: there’s no fancy buildscripts in here, it doesn’t even include the LESS files, but nonetheLESS it might help you to get started.