Overwrite Bootstrap classes with CSS file

Asked

Viewed 1,634 times

0

I’m having a hard time overwriting some Bootstrap classes using a CSS file I created. I am using the Bundle to make these changes:

public static void RegisterBundles(BundleCollection bundles, bool premium =true)
{
    #region Default Web Site

   ..........

    #region Templates Layout

    if (premium)
    {
        bundles.Add(new StyleBundle("~/Templates/premium").Include(
        "~/Templates/*.css"));
    }


    #endregion

    #endregion

}

I declared the Bill in Layout:

<!DOCTYPE html>
<html>
<head>
    <noscript>
        <meta http-equiv="refresh" content="0;url=/NoJScript" />
    </noscript>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")

    @Styles.Render("~/Templates/premium")
</head>
<body>

CSS file code:

.container .navbar-default {
    background-color: #a6d209;

And even then the Nav bar does not change the color you insert in the external file.

Projeto executando em Localhost

The file is coming in the order you insert into the Bundle, that’s correct. It’s coming after bootstrap.css and site.css

Carregamento do CSS externos

c# asp.net-mvc twitter-bootstrap

1 answer

1

You have to check the order the CSS is running. However, if you do it this way:

background-color: #a6d209 !important;

Your CSS will prevail.

  • Thank you, can you inform me how I check the order? Why insert the Bundle in this order, I thought it followed the order I insert the file. <code> Bundles.Add(new Stylebundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css"); if (premium) { Bundles.Add(new Stylebundle("~/Templates/premium").Include( "~/Templates/*.css"); } </code>

  • No head. If your file is including before or after the bootstrap file. Don’t forget to mark those answers in case she’s solved your problem.

  • I posted the image above and the file is coming last by following the order you insert into the Bundle and still not changing the bootstrap Nav-bar.

  • Check the result in the browser. Usually it is worth the rules defined last. Unless the previous CSS uses "! Important".

  • It does not use, because if I insert the same css in the file "site.css" it works normally...even without the ! Important

  • Is the "site.css" file being included after the bootstrap in the source code of the page (not what you wrote, but what was provided to the browser)? If the answer is yes, then you don’t need the "! Mportant".

  • Yes is being included after bootstrap <head> <link href="/Content/bootstrap.css" rel="stylesheet"> <link href="/Content/site.css" rel="stylesheet"> <script src="/Scripts/modernizr-2.6.2.js">/script> <script src="/Scripts/jquery-1.10.2.js"></script> <link href="/Templates/premium-Nav-bar.css" rel="stylesheet"> </head>

  • Your CSS file should come last. After all. In your case. This <link href="/Templates/premium-nav-bar.css" rel="stylesheet"> is overwriting your css code. That’s why it’s not working without you forcing it. Again: YOUR CODE MUST COME LAST.

  • Get, thanks, problem was the name of the css file containing the "-", rename the file and ran thanks for the help.

Show 4 more comments

Browser other questions tagged c# asp.net-mvc twitter-bootstrap

You are not signed in. Login or sign up in order to post.