CSS class not overriding bootstrap

Question

I'm using a default MVC project created in VS2017. So I have default Bootstrap.css and my Site.css files.

in the _Layout.cshtml file I have inserted an image

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <img class="jamClass" src="~/Content/Images/Gravit_Bridge_Sync.svg"/>
            </div>
        </div>
    </div>

The image is showing fine but I'm trying to implement a size change using my Site.css file, i.e. with jamClass - instead of writing the size change in-line.

In my site.css I've tried increasing the "priority points" as seems to be the answer for many questions like this, but I just can't get any change to register.

I've tried:

a.jamClass{width:50px}
#.jamClass{width:50px}
.jamClass{wdith:50px}

I think I might be going about this the wrong way. I'm not even sure the Site.css is having any affect at all but I don't want to be changing the bootstrap.css files?

It's frustrating because it's so easy to do inline but I'm trying to do it the "proper" way!

EDIT and ANSWER WOW the real reason this wasn't working was because my Site.css created by default was not referenced properly in the BundleConfig file - it was lower-case s

See here for where I found the suggestion.

give !important to your css code – sansan Feb 08 '19 at 10:37 — sansan, Feb 08 '19 at 10:37
you should be calling class by using .(period) not `#` – Joykal Infotech Feb 08 '19 at 11:03 — Joykal Infotech, Feb 08 '19 at 11:03

score 1 · Answer 1 · edited Feb 08 '19 at 11:37

1

a.jamClass{width:50px !important;}
.jamClass{wdith:50px !important;}

use this !important to override the existing css file

Note - Removed #.jamClass{width:50px !important;} as this is not a valid selector you should only use .(period) for class # is for id

edited Feb 08 '19 at 11:37

Joykal Infotech

1,840
3
9
17

answered Feb 08 '19 at 10:38

sansan

783
1
6
21

I tried all but it didn't work - I discovered by Site.css file was not created by default correctly... (see question) – jamheadart Feb 08 '19 at 11:35

score 1 · Answer 2 · answered Feb 08 '19 at 10:40

You need to make the selection stronger like this

.navbar.navbar-inverse.navbar-fixed-top .container .navbar-header img.jamclass {
  /* your code goes here */
}

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <img class="jamClass" src="~/Content/Images/Gravit_Bridge_Sync.svg"/>
        </div>
    </div>
</div>

Or you can use !important, but I would read up on the problems with using !important.

Here is a good read - link

score 1 · Answer 3 · answered Feb 08 '19 at 10:43

1

can you try one of the below CSS rules,

img.jamClass{
  width:50px;
}

or

.navbar-header img{
  width:50px;
}

answered Feb 08 '19 at 10:43

nand-63

107
1
4

I tried both but neither worked even though I know they should. My issue was due to the default-created MVC project (see question) – jamheadart Feb 08 '19 at 11:36

score 1 · Accepted Answer · answered Feb 08 '19 at 10:46

1

You use .jamClass on image, then the style should be like,

img.jamClass { width: 50px; } if this is not work try to use more parent class to prior high.

.navbar-header img.jamClass { width: 50px; } or

.navbar .navbar-header img.jamClass { width: 50px; }

NOTE: You should try to not use !important

answered Feb 08 '19 at 10:46

Ashraful Karim Miraz

725
5
8

Thank you for advice, my problem was due to something else (see edited question) – jamheadart Feb 08 '19 at 11:35
1

Atfer I created my correct reference, it was using the parent classes that had the desired effect, so I chose this as correct answer `.navbar .navbar-header img.jamClass { width: 50px; }` – jamheadart Feb 08 '19 at 12:07

score 0 · Answer 5 · answered Feb 08 '19 at 11:37

Turns out my issue was the Site.css file not being referenced at all.

In the default created MVC project, the BundleConfig had it as site.css (lower case) but it creates the file as Site.css upper case - it was as simple as that!!!!

Please see here for where I found the suggestion.

CSS class not overriding bootstrap

5 Answers5