Reputation: 139
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
Upvotes: 1
Views: 2720
Reputation: 11
everything is ok, the browser cached your site.css , you can clean your browser cache or run with another browser.
Upvotes: 0
Reputation: 2900
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.
Upvotes: 1