While generating dynamic HTML, I've referenced bootstrap CSS and JS along with jQuery to apply a bootstrap class to an h1 element. However, the appearance of the h1 text remains unchanged. The key part of the HTML is being generated by the following code:
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
string availableRpts = string.Format("Available Reports For {0}", _unit);
builder.Append(availableRpts);
builder.Append("</title>");
builder.Append("</head>");
builder.Append("<body>");
builder.AppendFormat("<link href='{0}' rel='stylesheet' />",
System.Web.Hosting.HostingEnvironment.MapPath(
"~/Content/bootstrap.min.css"));
builder.AppendFormat("<script src='{0}'></script>",
System.Web.Hosting.HostingEnvironment.MapPath(
"~/Scripts/bootstrap.min.js"));
builder.AppendFormat("<script src='{0}'></script>",
System.Web.Hosting.HostingEnvironment.MapPath(
"~/Scripts/jquery-
1.10.2.min.js"));
// Add Header rows
builder.Append("<div class=\"jumbotron\">");
builder.Append(String.Format("<h1>Available Reports for {0}
</h1>", _unit.ToUpper()));
builder.Append("</div>");
return builder.ToString();
}After executing this code, the following HTML is returned:
<html>
<head>
<title>Available Reports For GRAMPS</title>
</head>
<body>
<link href='C:\Projects\PlatypusWebReports\PlatypusWebReports\Content\bootstrap.min.css' rel='stylesheet' />
<script src='C:\Projects\PlatypusWebReports\PlatypusWebReports\Scripts\bootstrap.min.js'></script>
<script src='C:\Projects\PlatypusWebReports\PlatypusWebReports\Scripts\jquery-
1.10.2.min.js'></script>
<div class="jumbotron">
<h1>Available Reports for GRAMPS</h1>
</div>
The page renders correctly but the jumbotron class isn't applied to the h1 text. Consequently, the "Available Reports for..." section lacks the expected visual effect.
I'm puzzled as to why the jumbotron class from Bootstrap isn't being applied even though all necessary references to CSS, JavaScript, and jQuery are included in the HTML. Any insights on why it might not be working?
I initially considered placing the CSS and script references before the opening "body" tag, but shifting them above had no impact on the issue.