0

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.

zazvorniki
  • 3,512
  • 21
  • 74
  • 122

2 Answers2

-2

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

Sam Ryan
  • 7
  • 5
  • Sadness, worth a try anyway aha. Check out the last section I just added you may be saved by the love of bootstrap – Sam Ryan Feb 23 '18 at 15:27
  • The bootstrap print css is not even loading. It is just stripping out all styles and is unacceptable...I need to fix this and worry about this... – zazvorniki Feb 23 '18 at 15:28
  • To be honest buddy, It seems like it may be pointing to the wrong direction, Are you getting any errors in the console? If not maybe add ../ or .../ and depending where you index.php/index.html is set you may have to add a couple] – Sam Ryan Feb 23 '18 at 15:33
  • No errors, the files are loading correctly in the network tab from the console so I know that the link is pointing in the right direction. – zazvorniki Feb 23 '18 at 15:35
  • Have you tried checking in other browsers? Can't see this being the case but have a lookie, if not the check the link in the dev tools, see if the is there, if it is, try resolve the file location, try to open said stylesheet in chrome, either using CTRL+U and open that way or within dev tools. If it doesn't open then you're pointing to the wrong directory – Sam Ryan Feb 23 '18 at 15:36
  • Ignore the last bit, you replied as I was typing that aha, make sure it's not just chrome being a **** :') – Sam Ryan Feb 23 '18 at 15:37
  • Yeah, unfortunately It's not just chrome. But even if it was I would still have to fix it. Large large project where they print a lot – zazvorniki Feb 23 '18 at 15:39
-2

You could try adding it to your main stylesheet with an @media and see if that works

@media print {
  /*styles here*/
}
Michael Sloane
  • 1