Optimized printing layout with Bootstrap

Having some trouble printing an invoice I created using HTML and Bootstrap CSS. The issue is that the content doesn't print in full width, even after changing the media from screen to all.

Check out how it looks on the web:

Here's how it appears when printed:

CSS Adjustments Made:

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-width: 0 0 0 0 !important;
  }

HTML Link to Stylesheet:

<link rel="stylesheet" href="views/css/bootstrap.css" media="all">
htmlcsstwitter-bootstrap

Answer №1

If you're looking to print content in your application, I have a solution that may help. Simply follow these steps:

HTML

<button class="btn btn-default" onclick="printContent('class or ID of your content')">Print Content</button>

Script

function printContent(el){
        var restorepage = document.body.innerHTML;
        var printcontent = document.getElementById(el).innerHTML;
        document.body.innerHTML = printcontent;
        window.print();
        document.body.innerHTML = restorepage;
    }

Answer №2

When it comes to printing, different browsers can pose challenges due to factors such as default paper size, orientation (portrait or landscape), and even the current tide in Sydney affecting print resolutions of 72ppi, 96ppi, or 144ppi.

In Bootstrap, media queries set up specific pixel width ranges, like "xs" between 544px-767px. So when printing, your site may switch to either the "xs" or "sm" width variants depending on the page width.

To tackle this issue, one approach is to create a @media print {} query that overrides certain classes such as .container and all .col-* classes. This might require significant effort, but it's doable.

Alternatively, there are CSS plugins available like my own vinorodrigues/print-ready, aimed at addressing some of these printing discrepancies. (Pardon the self-promotion, but the code involved is too extensive to include 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

The issue with the Ajax infinite scrolling gallery is that it repeatedly displays the same images multiple times

I'm currently working on developing a straightforward gallery page that dynamically adds elements as you scroll to the bottom. To achieve this, I am using Django to render an HTML snippet from the backend and then utilizing JavaScript to append it to ...

javascriptjqueryhtmlajax

"Filtering and extracting particular form elements to be sent to the $_POST superglobal array

Currently, I have a table filled with data that is editable by administrators. There is a submit button to apply all changes, but I am interested in knowing if it is possible to only send the data that has been modified. One idea is to add a checkbox that ...

phphtmlformspost

What is the actual storage mechanism for HTML5 WebStorage data?

While utilizing the HTML5 WebStorage functionality, I am aware that certain browsers such as Chrome offer developer tools for users to navigate through their WebStorage contents for debugging and troubleshooting purposes. I am curious if it is feasible to ...

htmllocal-storageweb-storage

Despite being in perfect condition, my If-Else statement is refusing to function properly

I had previously posted a similar question, but it was removed. However, I am still very curious about why something seemingly trivial is not functioning properly. This is the entirety of my HTML and JavaScript code... <!doctype html> <html lang=& ...

javascripthtmljsonif-statementasynchronous

What is the method for updating the color of the command bar in Fluent-React UI?

I'm working on some code and I'd like to change the background color while keeping the hovering effect. Can anyone help me with that? <CommandBar styles={{ root: { paddingLeft: 0, paddingRight: 0, selectors: { " ...

cssreactjsoffice-addinsfluent-uifluentui-react

Create a serverless PowerShell script on Azure that generates HTML content to display on a web browser

Recently, I developed a PowerShell script in Azure serverless that generates HTML content. It works perfectly fine when accessed from Firefox or Chrome as the HTML document opens in the browser. However, the issue arises when using Microsoft's browser ...

htmlazurepowershellserverless

``Incorporate images into a slideshow container with proper alignment

I'm currently using a jquery slideshow on my homepage with fading images, but I'm having trouble centering them. The images are all different sizes and they're aligning to the left instead of being centered. Here is the CSS code I've b ...

csshtml

Display an image tag using the site_url() function within PHP brackets

I have a loop in my view that is fetching all the data from the database: <?php foreach($content as $contentRow): ?> <?php echo $contentRow->value; ?> <?php endforeach; ?> This loop works well for HTML strings ...

phphtml

"Excessive overflow results in the displacement of the following block

When viewing on smaller screens, the blocks move down due to oversized images causing overflow. Is there a way to simulate collision in this scenario? <div class="image"> <img src="img/1.jpg" /> </div> <div class="image"> & ...

htmlcsssass

How to hide offcanvas navigation bar with one click in Bootstrap 5

There was an issue with a Bootstrap 5 project where the offcanvas menu would remain open after clicking on an anchor link. Is there a way to automatically close the offcanvas menu after clicking on an anchor link? <nav class="navbar fixed-top py ...

javascriptjquerycssbootstrap-5

Troubleshooting resizing images in React using Material UI's useStyles

When attempting to resize an image using React, I am encountering a problem where adjusting the height and width of the tag with useStyles does not reduce the size of the image but instead moves it around on the page. Here is the code snippet: import { ma ...

javascriptcssreactjsmaterial-uiresize

Troubleshooting issues with Bootstrap 4 navbar dropdown functionality

I recently added a test page, but when clicking on the links, they do not direct you to the album page as intended. Instead, the page blinks and jumps quickly. To see this issue in action, visit the live test page through this link. <!DOCTYPE html>&l ...

htmltwitter-bootstrapbootstrap-4

Press the list button to reveal an enlarged box

Each item on this list contains a hidden box that should be shown after it is clicked. However, the issue arises when expanding one item causes other items to expand as well. Refer to the image for clarification: Image Link Is there a way to only expand ...

cssflexbox

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

The unique and personalized accordion panel is experiencing technical difficulties

Here is the accordion script I am using: $(document).ready(function(){ $(function(){ // Accordion Panels $(".accordion span").hide(); $(".accordion li").click(function(){ $(this).next(".pane").slideToggle("fast").siblings(".pane:visible").sl ...

phpjqueryhtmlmysql

Utilizing AngularJS: A guide to implementing and manipulating arrays within HTML values

I've developed a unique custom directive incorporating the fields: ng-model, input-array <mydir ng-model="myBinding" input-array="input1,input2"></mydir> Data bindings for input 1 and input 2 are set up, but how can I intelligently gener ...

angularjshtml

When attempting to add a new row to a table, the function fails to function properly

I am facing an issue with my dynamic HTML table. Each row in the table should have two cells whose values are multiplied together. I have created a function to achieve this, but it only works on the first row of the table and not on any new rows added by c ...

javascriptjqueryhtml

Is the renderer.setSize in Three.js calculated as a percentage of the screen size?

Is it possible to calculate the renderer.setSize based on a percentage of the screen? For instance, could I set my frame to be 80% of the device width and 80% of the device height? ...

javascripthtmlmobilethree.jsscreen

What is the best way to incorporate a YouTube video into my HTML webpage?

Looking to add some YouTube links to my webpage - I'm a complete newbie and clueless about formats and embedding. Can someone guide me on what to use and how to insert it into my HTML code? Appreciate any help! ...

htmlyoutubeembedded-video