I just created a new project. I created a new Layout page and added Bootstrap like so:
head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css" />
</head>
.net core with razor already came with bootstrap. below is the screen shot:
My page is simply doing CRUD operations and I tried to put a bootstrap icon and it did not work:
<a class="btn btn-lg" asp-page="./Edit" asp-route-id="#item.RecordId"> <i class="glyphicon glyphicon-edit"></i></a>
All is see is blank space instead of the icon. I already looked at this URL and this is not the issue that I am having:
Bootstrap not working in Razor Pages
Any hep will be greatly apprecaited.
You can try this
<link rel="stylesheet" href="#Url.Content("~/lib/bootstrap/dist/css/bootstrap.min.css")" />
This is old but, this is probably because you app can't read static files, your should try this in your startup.cs (or program.cs in net6 and above):
app.UseStaticFiles();
Related
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
I have created a very simple ASP.NET Core 2.0 project and selected the new Razor Page template then I removed everything from homepage and added Paper-button web component in order to use it following is code for my Index.cshtml:
page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<paper-button raised>My Button</paper-button>
Then I added import statements for this component in my file Layout.cshtml as follows this is how its head looks like now:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1,
initial-scale=1, user-scalable=yes">
<title>#ViewData["Title"] - DineAlong</title>
//notice the following script for pollyfills and then the import for paper-button
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js">
</script>
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
After running html page only shows text MyButton and doesn't display the paper-button at that place.
Note: I have bower_components folder alongside Layout.cshtml and Index.cshtml, i.e: within the Pages folder so the reference import in Layout file should work fine.
Following is the errors in the console I can see the error but I don't know why it is happening.
Folder Structure:
You need to move the directory to under the wwwroot folder (probably under lib).
The Pages directory is only referenced by the MVC routing engine and not the web server.
For example I added Font Awesome to my project and can reference it like:
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
I am looking for the "proper way" to do this in MVC Razor...I'm using the bootstrap theme from
http://themes.getbootstrap.com/products/application
They show the following code:
<link href="dist/toolkit.min.css" rel="stylesheet">
I'm thinking that the proper way should look like this for MVC Core Razor for the href:
The same goes for the src:
<script src="dist/toolkit.min.js"></script>
<script src=#Url.Content("dist/toolkit.min.js")></script>
Should I wrap the above
in the following too?
#section scripts{}
ie.
Is this necessary for the following?
#section scripts{
}
Have you looked at that the default Templates provided? Most everything is done through the default template and you can adjust to your hearts desire. I assume you are using VS.NET or VS Code, it honestly doesn't matter which is used the scaffolding results in the same end layout, bower/gulp, or yeoman (vs code scaffolding), note default templates already have Bootstrap baked along with JS. Adding in other frameworks or features, using bower (client side) or nuget
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Default Web</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
</environment>
</head>
all located in the wwwroot folder... Gulp does most of the heavy lifting in the above case. Paths are coded in the gulpfile.js which does all of the "dynamics" of getting the script/css file set proper href/src items without having to resort to coding it with Razor..
While trying to convert a HTML responsive theme to Drupal 7 theme, it's responsive is not working!!!
Can anyone help me with this to sort the issue? We have copied Bartik theme and removed the CSS and pasted the HTML5 theme CSS and js that we created...changed the index.tpl into page -- front.tpl.php and copied it into the template folder.....in the page -- front.tpl.php we give all the path for CSS and js as:
<?php $path="http://".$_SERVER['HTTP_HOST']; ?>
<link rel="icon" href="$path.">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="<?php echo $path.base_path().path_to_theme()?>/css/style.css">. As specified we gave path for all css and js files,but don;t know where we went wrong!!
Might it be because you dont have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
in your head?
I have a page which I load both on a local Tomcat 7 instance and a remote JBoss instance (OpenShift). The css is applied on JBoss, but not on Tomcat 7:
Html page head:
<head>
<title><decorator:title /></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="/static/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/static/css/960gs-16col.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/static/css/default.css" media="screen" />
</head>
Default.css
body {
background-color: #c73b0b;
}
rest.css and default.css are not applied on Tomcat 7. I checked with FireBug, no bugs reported. I checked the page source code on both systems, exactly the same.
What could cause this issue?
As we resolved together with #JVerstry:
Seems that Tomcat wasn't loading the CSS files the same way as JBoss.
/static/css/reset.css is an absolute path. If reset.css is part of the application, it should be referenced as static/css/reset.css (without the leading slash)
You should always build URLs in a webapp like this:
<link rel="shortcut icon" href="<%= request.encodeURL(request.getContextPath() + "/images/favicon.ico") %>" type="image/x-icon"/>
This will make your webapp trivially re-locatable when you change the context path, and solve problems like the one you have posed above.
Note that most URL-handling tag libraries like JSTL, Struts, etc. will all perform the above work for you. It's usually better to use one of those than have that ugly scriptlet everywhere in your JSP code.