Can't apply CSS to Views in ASP.NET MVC

Question

I have problem with styles in my ASP.NET MVC app.

That's my head tag in _Layout.cshtml:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewBag.Title</title>
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/content/site.css" rel="stylesheet" />
</head>

site.css is my CSS file, the problem is that I have a home view (index.cshtml) which has only divs inside. It renders but none of my styles work with it.

But when I type styles locally like:

<div class="middle" style="width:500px; height:200px;">

then they are applied to the div.

Do I need to set styles in every view, or is there way to make views use _Layout styles?

Are you able to see your css file in chrome dev tools source tab. — satvik choudhary
– satvik choudhary, Commented Jan 4, 2022 at 14:57
@albjerto first is bootstrap and second: body { margin-top:40px; } .navbar-brand{ height: 100px; } img{ height:70px; margin:0px 0px 0px 200px; } .navbar-default { background-color: white; border-color: white; } li{ width:100px; text-align:center; font-size:25px; margin-top:25px; } .navbar-nav{ height:100px; margin:0px 0px 0px 700px; } .banner{ width:500px; height:200px; } .banner is class which i set for div in Home View — Damian Piotrowski
– Damian Piotrowski, Commented Jan 4, 2022 at 14:58
@satvikchoudhary yes but don't see .banner class styles i set for View. — Damian Piotrowski
– Damian Piotrowski, Commented Jan 4, 2022 at 15:02

Zhi Lv · Accepted Answer · 2022-01-06 03:18:56Z

Based on your code, I assume your application is an Asp.net 5/6 or Asp.net core MVC application, right?

If that is the case, please check the index.cshtml page, whether it specify a layout by setting Layout property. Code like this:

@{
    ViewData["Title"] = "Index";
    Layout = "_Layout";
}

If still not working, open the Views folder, the structure should like this:

The _Layout page is in the Shared folder, and under the Views folder, we should also add the _ViewImports.cshtml page with the following content:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

and add the _ViewStart.cshtml page with the following content:

@{
    Layout = "_Layout";
}

After that, in the MVC view pages, we can use the Layout property to specify the layout page.

Finally, if the style still not working, try to use F12 developer tools to check whether the CSS file is load success, if not check the file path is correct or not. And in the Program.cs file (for Asp.net 6) or the Startup.cs file(Asp.net core 1~3 or Asp.net 5), enable the Static files middleware. Code like this:

app.UseStaticFiles();

You can check this screenshot: this is an Asp.net 6 MVC application.

More detail information about layout, see Layout in ASP.NET Core

Flowra · Accepted Answer · 2022-02-24 07:15:55Z

1

In my case the browser need to refresh the view without cache, I just refreshed the chrome with cntrl + f5 and the style sheet applied

answered Feb 24, 2022 at 7:15

Flowra

1,4283 gold badges17 silver badges19 bronze badges

Collectives™ on Stack Overflow

Can't apply CSS to Views in ASP.NET MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related