Paul Martinez Paul Martinez - 1 month ago 14
CSS Question

Can't override bootstrap style with my own stylesheet


I try to override the bootstrap default style. I declared my stylesheet as below:

/*bootstrap and default style*/
/*My CSS*/
<link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" />
@RenderSection("Styles", required: false)

In the bundleconfig:(only the default styles)

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css" ));

But as you can see below my style is overriden by bootstrap .


I thought it has something to do with the order of the style in the head tag. But mine comes after bootstrap so it should work...

I copy the full layout page so you can check what's going on.

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="@Url.Content("")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" />
@RenderSection("Styles", required: false)


<div class="cachetop col-lg-12 navbar-fixed-top"></div>
<div class=" topmenubar navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

<a class="navbar-left " href="@Url.Action("Accueil","Home")">
<img src="@Url.Content("../img/minilogo.png")" />

<div class=" navbar-collapse collapse">
<ul class="menuitembar nav navbar-nav">
<li class="menuitem nav-item active">@Html.ActionLink("Notre carte", "pizzas", "Carte", null, new { @class = "nav-link" })</li>
<li class="menuitem nav-item">@Html.ActionLink("Nous trouver", "Localisation", "Home", null, new { @class = "nav-link" })</li>
<li class="menuitem nav-item">@Html.ActionLink("Un peu d'histoire", "Histoire", "Home", null, new { @class = "nav-link" })</li>
<li class="menuitem nav-item">@Html.ActionLink("Travailler chez Michel", "Workwith", "Home", null, new { @class = "nav-link" })</li>


<div class="container body-content">
<hr />
<div class="text-center">



@RenderSection("Javascript", required: false)



If you make your CSS selectors more specific, there is a level of specificity that determines which styles get applied. So doing:

li.menuitem { color: black; }

Makes it more specific. Also adding !important indicates that this style would have priority:

.menuitem { color: black !important; }

Careful with nested CSS hierarchies and using !important. It could cause issues if you want to override those changes in a different context. Only use when necessary, but it's OK to use.