Ignoring the print CSS in Bootstrap 4 implementation

In my bootstrap4 project, I am facing an issue where the user is unable to print the page. Despite having a print.css file with some obnoxious styles applied to test if they are working, they seem to have no effect at all.

The styles in question are:

@media print {
    body{background-color:green;}
    p{color:red;}
}

I suspect that Bootstrap may be interfering with these styles as the print does not even reflect Bootstrap's own styles.

Here is how my link looks like:

<link href="css/print.css" rel="stylesheet" media="print">

I also attempted changing the media type to "all," but that did not work either.

It's worth noting that this issue goes beyond just background color - other styles like display:none; also do not get applied. The background color was simply used as a test case for illustration.

Answer №1

It's possible I could be mistaken, but it's worth a try,

<link rel="stylesheet" type="text/css" href="print.css" media="print">

I think you might be missing the Type attribute, although in my opinion it may not be necessary unless for a print document.

Let me know if this resolves the issue, and remember to place this Link at the top of the list just to confirm that's not the problem either.

I recently saw a comment related to your query mentioning that bootstrap has its own print stylesheet, which can potentially be overridden. If not, don't stress too much about it. I have just completed a website development project and as long as your code is accurate and well-organized, it should work itself out, like mine did :'D

Answer №2

If you're looking to incorporate it into your primary stylesheet, consider utilizing @media queries to see if that produces the desired outcome

@media screen and (min-width: 600px) {
  /*add styles here*/
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading a page with a Chitika ad using Jquery can cause site malfunctions

I am experiencing an issue with my header.php file on my website. I included another PHP file for my ad code, but it seems to load the ad and then redirect me to a blank page. Can someone please review my code and let me know if there is an error? Thank yo ...

Unable to update the <object/> element while transitioning from application/pdf to text/html

I am attempting to refresh a specific element within the DOM tree. Essentially, the TypeScript code is responsible for updating both the data and type attributes of an existing HTMLObjectElement. Here is a simplified version of the code: const textCanvas: ...

Guide to displaying an email template on a webpage

I am facing a challenge with rendering an email template on a web page. The email template comes with its own CSS, for example: <style> body{ font-size : 20px; } </style> However, when I attempt to display the email template on my webpage, ...

Remove CSS Styling from DataFrames in Pandas

My data frame consists of records that have this structure: Untitledp { margin-top: 0px;margin-bottom: 0px;line-height: 1.15; } body { font-family: 'Times New Roman';font-style: Normal;font-weight: normal;font-size: 13.3333333333333px; } .Normal ...

Toggle the visibility of a div element and smoothly scroll to it on the page

Upon clicking the form, my goal is to show or hide it and scroll down to view the form. The current code I have in place seems to work after the first click. However, on the initial click, it shows the form but fails to scroll down. Any insights on what I ...

Toggle between hiding and showing div elements issue

Currently in the final stages of developing an iPhone web app, I have encountered a small issue that needs to be resolved. I have successfully hidden one layer and displayed another with a button click. However, what I am aiming for is to toggle between s ...

Input field for change detection

I've been struggling to find a solution to capture the input from Html.TextAreaFor. After trying several options, I found that using a change function only works upon exiting, and employing a keypress event has its drawbacks: it triggers before text ...

Getting Bootstrap column width using SASS

Is there a way to make a title in one column overlap the next column without relying on position:absolute in CSS? I want to maintain the width of the title to be as wide as the col-8 column in Bootstrap, while keeping it proportional for smaller screens. A ...

Navigating through dropdown menus using webdriver

I am having trouble selecting a specific element from a dropdown menu. The element I am trying to select is labeled Edit/ViewResume 1st Attempt For my initial try, I attempted to use the Action and Select class methods to choose the desired webelement ...

Accessing variables in nested ng-repeats in Angular 1.x from a controller

Right now, I have an HTML page with nested ng-repeat and a variable named "isExpand" within the inner ng-repeat. I'm curious if there are any ways to update "isExpand" from the controller. Here is a sample HTML layout: <div ng-repeat="(key, value ...

Issues with CSS positioning

I'm facing an issue with the jQuery drop-down bar slipping behind images on a specific page that uses jQuery innerfade. You can see the problem here: <?php include('perch/runtime.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

The mobile version of the page has extra white space at the bottom

I have a responsive design that is working well, but I am experiencing an issue on mobile devices where there is white space at the bottom of the page. * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; ...

Switch to display only when selected

When I click on the details link, it will show all information. However, what I actually want is for it to toggle only the specific detail that I clicked on. Check out this example fiddle Here is the JavaScript code: $('.listt ul').hide(); $( ...

CSS selector for targeting a parent element followed by a sibling element

Can someone help me with the following HTML and CSS issue? <form class="Form"> <FormField> <label class="FormLabel" ..> <div class="FormInput"> <div class="InputField"> <input../> </di ...

Animating CSS Pixel Fragments

After applying a simple CSS animation that moves size and box shadows from one side of the screen to the other, I am noticing residual pixel fragments left behind. To see this issue in action on Chrome 66, check out the Code Pen: https://i.sstatic.net/Gl ...

Determine the number of elements in a Css selector and restart the counter whenever an element

Need help with counting elements that are not part of a regular list structure. Here is a code example to clarify: Fiddle I don't have much control over the HTML. The DOM structure looks like this: <div class="body"> <div><p clas ...

Clicking yields no results

let link = '<a href="javascript:void(0);" (click)="redirectToPage(store)" class="btn grey">' + displayText + '</a>'; Upon clicking the button on the page, nothing seems to be happening. Can you help me figure out what I&apo ...

Placing a new element with a specific class name into another element identified by its unique ID

I'm trying to dynamically add a new li element with a specific classname from an array to a static element with an id. However, I encountered an error stating "appenChild is not a function." It's important to note that we are working inside a Jav ...

Calculate the total with the applied filters

My goal is to sum the data from the Number table after applying lookup filters. The current issue is that the sum remains fixed for all values and doesn't take into account the filter. Here's the JavaScript function I'm using to search and ...

Refresh <div> Dynamically with Jquery Ajax

Although this question may have been asked on SO before, I have not found a satisfactory answer to my particular query. I am looking to select an item from the navigation bar and display the content inside another tag using AJAX-generated data. However, I ...