✅ How to stop Bootstrap CSS from overriding the layout.css of my Razor page?
So I've been trying time and time again to understand why I can't get my pages to look how I want them to at all! I've tried adding a colour background to my main body of my pages but it doesn't work unless I remove the bootstrap.css, but when I do that, my page looks terrible, like a coloured notepad rather than a nice website...
I'm really struggling to understand how I'm meant to do the CSS Files..
I have the _Layout.cshtml
https://pastebin.com/Y3swt5rd
And I have the _Layout.cshtml.css
https://pastebin.com/0n5QQ9Zx
How am I meant to get the layout css to apply properly to my pages? The footer colour works and is purple... But the Header is white when it should be purple and the body is white when it should be lavander.
Pastebin
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
Pastebin
a.navbar-brand { white-space: normal; text-align: center; word-b...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
5 Replies
The element "nav" that you are using use another class named bg-white, which is a class that come from bootstrap and make the background white
for your body i'm not too sure with only this as data but note that by doing right click => inspect element you can check which css / style apply to every element in your dom. It will be easier to troubleshoot which style apply on your body
Thanks, I'll take a look :Moon_JJ_Love:
I think I understand the CSS class thing better now, I fixed the title and hopefully I can figure out why the body doesn't work
perfect :D
Yeh so this might not be the best way of doing it... But I moved the CSS stuff from the cshtml file and into the CSS folder in the root and I just "import"? that after the bootstrap stuff and everything works now
Really appreciate the help