I am a beginner and recently developed a Twitter Bootstrap page for an MVC4 application.
Starting with the layout:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="@Url.Content("~/scripts/jquery-1.9.1.min.js")" rel=""/>
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>
<link href="@Url.Content("~/Content/Site.css")" />
<title>@ViewBag.Title</title>
</head>
<body>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="../../Properties/../scripts/bootstrap.js"></script>
Followed by the rest of the page.
In my Site.css, where custom CSS is located, the following styles are defined:
body {
margin-bottom: 80px;
}
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
.page-header {
margin-top: 0;
}
.panel-body {
padding-top: 0;
}
.featuredImg {
margin-bottom: 15px;
}
However, it appears that none of my pages are applying this CSS. The body does not show the margin...
When inspecting with Firebug and checking the CSS tab, there is no mention of Site.css, only 'bootstrap.min.css'.
During design time, the path to the CSS file seems correct as I can navigate to it in the designer.
It simply does not load at runtime.
Am I making a mistake somewhere?