How To Print Bootstrap Modal Exactly As The Display?

so I'm having difficulties to print a modal with it's css. I wanted to print out a modal window exactly as it shown on the screen. I've used the window.print() command or even the

Solution 1:

You can use @media print tag

@media print {
  model.class {
     display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;
     top: 0;
     width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  } // or you can add what ever you want css in print mood 

All the CSS in the @media print tag will be applied only in print mode, so to test the style and be sure the design deals with needs, you can use print mode in Chrome Browser.

For more information, check this answer.