I have added the bootstrap.css file to the head of layout;
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
It appears on console of a page;
File is not empty I checked it
But bootstrap buttons look like;
When I add the bootstrap.css to the view page, it looks what it should look like.
How can I work out this problem ?
Thanks in Advance.
Related
I have a custom CSS I use with bootstrap. All along I've had my CSS written first before bootstrap then I realised that you're supposed to have Bootstrap first before CSS. Now I'm having problems with my rendering, for example font sizes and colours, particularly with Bootstrap's class=sidenav which I have customised in my CSS file.
<link rel="stylesheet" href="/template/style.css">
bootstrap CSS
For the above, my webpage loads as I want it to (so far). My hover codes in my CSS work properly. But when I try to customise other things, they don't work.
bootstrap CSS
<link rel="stylesheet" href="/template/style.css">
For the above, my webpage loads with my styling except the font size is different but the colours for sidenav are the same as the first scenario. (ie. According to my custom CSS file) My hover codes in my CSS works properly.
However if I try a different (the correct) href for example <link rel="stylesheet" href="/website/template/style.css"> the colours for my sidenav disappear but the font size goes according to my CSS. My hover codes in my CSS don't work properly.
What is going on?
I think something like this is your issue.
Given this order:
<link rel="stylesheet" href="styles1.css" />
<link rel="stylesheet" href="styles2.css" />
# style1.css
.my-class .very-specific .class-selector { color: red; }
# style2.css
.my-class .class-selector { color: blue; }
The color will be outputted as red, because the first CSS file was more specific.
Looking at the path of your href=, I think its not able to render in html because its incorrect.
If you are pointing to the same directory where your index.html file is, you should not need to add the / in front of template.
Try using:
<link rel="stylesheet" href="./template/styles.css">
The ./ points to the current directory. Or you can try
<link rel="stylesheet" href="template/styles.css">
I have a bootstrap4 project where the user needs to be able to print the page. I have a print.css file that I have a few obnoxious styles it just to see if the styles are taking effect and they are not.
My styles are
#media print {
body{background-color:green;}
p{color:red;}
}
Could there be something with bootstrap preventing the styles? The print is not even taking on bootstrap styles.
My link looks like this
<link href="css/print.css" rel="stylesheet" media="print">
I have also tried changing the media type to all and that was a fail as well.
This is not about the background color. I have many display:none;'s in there as well that are not being read either. I only used the background color as a test and example.
I may be wrong but give it a shot,
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I believe you're actually missing the Type and with my understanding it's not needed but may be for a print doc.
Let me know how it works or if it does, make sure this is at the top of the list of Links just to clarify that's not the problem too.
Just read a comment on your question and I believe they're right about bootstrap having it's own print stylesheet but I'm sure it can be overwritten. If not don't worry too much about it. I've just finished developing a site and as long as your code is correct and layed out right it should sort itself out, or atleast mine did :'D
You could try adding it to your main stylesheet with an #media and see if that works
#media print {
/*styles here*/
}
While printing HTML page all works fine,
After adding bootstrap library all styling disappear on printing.
wrapping css file with #media all {} not solving the issue.
any ideas ?
you could try to see if you add your style sheet after the bootstrap one it may overwrite the styles in the bootstrap file.
Use your bootstrap css cdn in this way--
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
I don't want a stylesheet to be loaded on mobile devices, so I used the
<link href="css/animate.css" rel="stylesheet" media="max-width:1000px">
But it doesn't work! It loads the stylesheet anyway on mobile.
Where am I going wrong?
change max-width with min-width
One thing you can try: if you previously loaded the stylesheet on the mobile, try clearing the cache or using a different mobile phone to see what happens.
Other than that i think your code looks right also add type to the tag but i don't think it will change anything: <link href="css/animate.css" rel="stylesheet" media="(max-width:1000px)" type="text/css">
you can also check this question: Loading difference styles depending on screen
I'm very inexperienced when it comes to CSS and web design in general but I'm almost very sure it's not my error, because it works fine on everything except Google Chrome.
The page loads correctly... sometimes. Sometimes it doesn't.
I'm not sure exactly what to do about it but it only happens when I have:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Average+Sans|Quando">
This is how it looks like: http://imgur.com/a/Es5RY
Each subject should take the entire line, and not take only part of it.
Any advice would be appreciated.
Edit: Turns out it was caused by jquery .show, it was changing elements to :inline, for some reason it didnt happen everytime. Oh well. All good now..
Try putting in the CSS #id-of-sidebar-wrapper > * { height: 1em; } and in the HTML put a <br> after each one. BTW the CSS won't work if each item is part of the same element i.e. if there are no children to the sidebar.