Following is code i used this is from template when i run this file i see error
bootstrap.css.map:1 GET http://localhost:8000/css/bootstrap.css.map 404 (Not Found)
but there is no link i made and error shows link is on first line can someone help me where the link is
how do i remove that link can someone help me with this
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Animus A Blogging Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
</head>
<body>
<div class="contact-top">
<div class="container">
<h2>Log in</h2>
<div class="contact">
<p></p>
<div class="contact-down">
<div class="contact-right">
<div class="col-md-6 contact-info">
<form>
<input type="text" name="your name" placeholder="USER NAME" class="input">
<input type="password" name="your email" placeholder="PASSWORD" class="input">
<div class="clearfix"> </div>
<input type="submit"value="SEND" />
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's coming from your bootstrap.css file. You can remove the reference by editing that file and removing the following line from your code:
/*# sourceMappingURL=bootstrap.css.map */
Source Mapping files should only be used by the Developer Tools.
With Bootstrap you can disable the source map if you like or just ignore the 404 for any .css.map when using the Dev Tools.
If you want to use the Dev Tools for Debugging or want to have more 'completeness' to your code add the .css.map file available from Bootstrap along side the .css file.
Reference: https://developer.chrome.com/devtools/docs/css-preprocessors
Other similar questions: what are the .map files used for in Bootstrap 3.1?
Either you can remove
`/*# sourceMappingURL=bootstrap.css.map */
as mentioned by #xengravity or you can download bootstrap.css.map file of your bootstrap version and add it in your directory.
Related
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
dears,
i've followed these steps :
1) Download Bootstrap from http://getbootstrap.com/
2)Create a dynamic web project in eclipse.
3)Make sure that this dynamic web project could be run on the server.
4)Under WebContent folder, create a bootstrap folder.
5)Import files such as following from downloaded Bootstrap
resources into the newly created folder, “bootstrap” in step 3. css
folder consisting of bootstrap.min.css js consisting of
bootstrap.min.js img consisting of images Create an index.jsp and put
following within tag
But my html doesn't seem to see the css, i even wrote this line as a test but nothing appears
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
this is the whole index.html page:
<!DOCTYPE html>
<html>
<head>
<link href=”bootstrap/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
</body>
</html>
Try to change your css link declaration to
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
It has symbols with unsupported encoding.
I created a new ASP.NET MVC Webapp. I added foundation for MVC using Nuget package manager and removed the bootstrap package. At this point, everything is perfect.
I then added Kendo UI to the MVC Webapp just as I normally do. This is what my Index.cshtml page looks like for a simple test:
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
<h3>Content goes here</h3>
<br/>
#(Html.Kendo().DatePicker().Name("datepicker"))
</div>
</div>
It seems like Foundation is somehow affecting the Kendo styles because the datepicker does not look how it should look. Does anyone have any ideas to why this could be happening? I purposely added anything related to KendoUI after Foundation to avoid this problem.
Here is my head tag in _Layout.cshtml
<head>
<meta charset="utf-8" />
#*Set the viewport width to device width for mobile *#
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - Welcome to Foundation</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Styles.Render("~/Content/foundation/css")
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo")
#RenderSection("head", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
Here is right before the closing body tag in _Layout.cshtml
#Scripts.Render("~/bundles/foundation")
<script>
$(document).foundation();
</script>
#*Use the Scripts section to define page specific scripts*#
#RenderSection("scripts", required: false)
When i'am runing the application in visual studio 2010 i have no problem whith boostrap CSS and javascript, otherwise, when i publish it, all the javascript and css is not recognized. I create a simple html page to test
if it is a html formatt problem, but the problem still happen. Does anyone can help me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="Styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="Styles/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="starter-template">
<h1>
Bootstrap starter template</h1>
<p class="lead">
Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="row">
<button type="submit" class="btn btn-default">
Ok</button>
</div>
</div>
</body>
</html>
Usually this is due to windows features in IIS not being turned on to support static content such as CSS and JS.
The steps to enable this are:
Go to “Turn Windows features on or off”
Select Internet Information Services
Select World Wide Web Services
And check Static Content
You could try making the path to your css/javascript relative using the ~.
<link href="~/Styles/bootstrap.min.css" rel="stylesheet">
or by using ResolveURL
<link href='<%= ResolveUrl("~/Styles/bootstrap.min.css") %>' rel="stylesheet">
The problema was the mime Type of files .css in the site of ISS. It was set to "text/csss", but the correct is "text/css".
ASP.NET MVC4 only showing #RenderBody content on IIS7
Setup: I've got a VM running Windows 7 upon which I've installed IIS7, MVC3 & MVC4 with Web Platform Installer. I've added a new website in IIS using a .NET 4.0 application pool, and then used the Visual Studio 2012 publish option to publish an MVC4 web app to the website's root directory.
The problem is that the only output I am getting is whatever is in the individual views. There is no layout, nothing other than the #RenderBody content.
It works fine when I preview it with Visual Studio.
This is my _Layout.cshtml:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- this is decorative -->
<div class="topbar"></div>
<div class="row header">
<div class="five columns logo">
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/logo.png")">
</a>
</div>
<div class="seven columns nav">
#Html.Partial("_TopNavigationPartial")
</div>
</div>
#RenderBody()
<div class="row">
<div class="twelve columns box-padding">
<div class="box">
<div class="row footer">
<div class="six columns copyright">© 2013 snip.</div>
<div class="six columns nav">
#Html.Partial("_BottomNavigationPartial")
</div>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
All that will be output though is what is in the view, e.g:
<div class="row">
<div class="twelve columns box-padding">
<div class="box">
<h1>Home</h1>
<p>You are here: Home/Index</p>
</div>
</div>
</div>
Anyone have any idea why this might be so?
It's probably just that I haven't set up IIS7 right.
Edit: I just uploaded the Internet application and it has done the exact same thing. Only the view content is being output. So it's definitely something in IIS.
Edit 2: I have set up an Internet application as an application in IIS but still it returns the view content only. Weird.
Edit 3: Got it working, not sure how. http://i.imgur.com/ZpKb4P5.gif
Managed to fix this. Not sure exactly what was the problem, but I was making a new website and then dragging the published files into it, which wasn't working.
I then added an application to the default website, which worked, but then I found this post which explained that the default website itself is an application.
So in the end I just copied the published files into the default root directory and it worked.