Custom CSS not overriding Bootstrap CSS

Question

Kind of a peculiar thing happening here...

I'm using ASP.NET in Visual Studio 2015. When I add custom CSS within a <style> tag in the header of my HMTL document, my CSS will override Bootstrap's CSS, but when I reference my CSS in an external .css file it does not... Here is my code (the CSS in the style tag is the exact same as what's in the external css sheet):

<head runat="server">
//BOOTSTRAP CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<%--<link rel="stylesheet" href="App_Code/MainStyleSheet.css" type="text/css" />--%> 
//UNCOMMENTING THIS WILL NOT OVERRIDE BOOTSTRAP CSS

<style>
    //THIS CSS WILL OVERRIDE BOOTSTRAP CSS
    .navbar {
        padding-top: 15px;
        padding-bottom: 15px;
        border: 0;
        border-radius: 0;
        margin-bottom: 0;
        font-size: 12px;
        letter-spacing: 5px;
        border-radius: 0px !important;
    }
</style>
</head>
<body>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">X.com</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Contract</a></li>
                    </ul>
                </div>
            </div>
        </nav>
</body>

All searches on Google for a resolution say that putting my .css link underneath the Boostrap CSS links should override it, but that's what I've tried and it's not working. Any suggestions?

ASSUMING that the stylesheet is in the directory you have specificied, then the style declarations in your custom CSS will override any style declarations in the bootstrap based on the code above. In order to help, we'd need to see a specific example of a given rule that you observe that is not being overridden. — random_user_name
– random_user_name, Commented Jan 7, 2017 at 23:15
@dippas It's the exact same code that's within my custom style tag in the header. The navbar will not change when I reference css from the external sheet, but will change if I put it in the style tag. I'm wondering if it's some sort of Visual Studio 2015 setting that needs to be changed or something... — Shane Sepac
– Shane Sepac, Commented Jan 7, 2017 at 23:28

Khalid T. · Accepted Answer · 2017-01-07 23:51:49Z

1

Move your MainStyleSheet.css file outside your App_Code folder. App_Code folder has a default Compile build action instead of Content.

answered Jan 7, 2017 at 23:51

Khalid T.

10.6k5 gold badges51 silver badges58 bronze badges

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

1 Comment

Shane Sepac Over a year ago

This was the solution. Thank you!

Mario Petrovic · Accepted Answer · 2017-01-07 23:50:07Z

Try and wrapping your html code inside a div and give it a class/id and try to override with that wrapping div.

HTML:

<div class="wrapping_class">    
    <nav class="navbar navbar-default">

    </nav>
</div>

CSS:

.wrapping_class .navbar.navbar-default{
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;
    letter-spacing: 5px;
    border-radius: 0px !important;
}

This is a solution based on CSS specificity that plays a role in overriding certain CSS rules based on their power.

Refer to this link for table of specificity values (for Star Wars fans a treat): https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Collectives™ on Stack Overflow

Custom CSS not overriding Bootstrap CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related