Asp.net Core 2.0 MVC CSS that i add doesn't work

Question

I have a problem adding CSS to my site, i have linked the bootstrap.css and the site.css file and it finds and uses them correctly, but if i try to add something to the files it doesn't use it. Here is the code where i am trying to use it to prevent html from overflowing from div:

@foreach (var article in Model.Articles)
{
    <div class="col-md-12">
        <ul class="list-group article-list">
                <li class="list-group-item">
                    <a asp-action="Details" asp-route-id="@article.Id" asp-route-title="@article.Title.ToFriendlyUrl()">@article.Title</a>
                    <br />
                    <div id="articleIndex">@article.ShortContent ... [<a asp-action="Details" asp-route-id="@article.Id" asp-route-title="@article.Title.ToFriendlyUrl()">Read More</a>]</div>
                    <small>published by @article.Author on @article.PublishDate.ToShortDateString()</small>
                </li>
                @if (User.IsInRole("Administrator") || User.Identity.Name == article.Author)
                {
                    <a href="article/edit/@article.Id" class="btn btn-danger">Edit</a>
                    <a href="article/delete/@article.Id" class="btn btn-danger">Delete</a>
                }
        </ul>
    </div>
}

So i added the following to site.css file, but it doesn't use it. I tried adding it to bootstrap.css too and still doesn't properly use it. If i add the css in the html file it does work.

div#articleIndex {
    word-wrap: break-word !important;
}

Why is it now finding my custom added css, but still uses the bootstrap default ones

Yuri · Accepted Answer · 2017-12-09 14:15:44Z

1

Find in your project file named Site.css and add your styles there. Make sure that you are following correct load order. Site.css should be loaded after bootstrap.css as latest css overwrites previous. Last, verify in Chrome development tools (F12) that your Site.css is loaded.

answered Dec 9, 2017 at 14:15

Yuri

2,9084 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TwinAxe96 Over a year ago

It is loaded after the bootstrap.css and i checked the Chrome development tools and the site.css is being loaded, but it only shows the default css code that is autogenerated and it doesn't show anything i have added. Pretty strange..

Yuri Over a year ago

You assign id=article Index inside of the loop. Means that you have multiple IDs articleIndex on the same document. That's why css confused. Use name instead

TwinAxe96 Over a year ago

It was a caching issue, my browser had cached an old version of the site.css file. Thanks!

mahmood ansari · Accepted Answer · 2021-06-20 09:16:05Z

0

everything is ok, the browser cached your site.css , you can clean your browser cache or run with another browser.

answered Jun 20, 2021 at 9:16

mahmood ansari

11

Collectives™ on Stack Overflow

Asp.net Core 2.0 MVC CSS that i add doesn't work

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related