-
-
Save donnierayjones/6fd9802d992b2d8d6cfd to your computer and use it in GitHub Desktop.
@media print { | |
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { | |
float: left; | |
} | |
.col-sm-12 { | |
width: 100%; | |
} | |
.col-sm-11 { | |
width: 91.66666667%; | |
} | |
.col-sm-10 { | |
width: 83.33333333%; | |
} | |
.col-sm-9 { | |
width: 75%; | |
} | |
.col-sm-8 { | |
width: 66.66666667%; | |
} | |
.col-sm-7 { | |
width: 58.33333333%; | |
} | |
.col-sm-6 { | |
width: 50%; | |
} | |
.col-sm-5 { | |
width: 41.66666667%; | |
} | |
.col-sm-4 { | |
width: 33.33333333%; | |
} | |
.col-sm-3 { | |
width: 25%; | |
} | |
.col-sm-2 { | |
width: 16.66666667%; | |
} | |
.col-sm-1 { | |
width: 8.33333333%; | |
} | |
.col-sm-pull-12 { | |
right: 100%; | |
} | |
.col-sm-pull-11 { | |
right: 91.66666667%; | |
} | |
.col-sm-pull-10 { | |
right: 83.33333333%; | |
} | |
.col-sm-pull-9 { | |
right: 75%; | |
} | |
.col-sm-pull-8 { | |
right: 66.66666667%; | |
} | |
.col-sm-pull-7 { | |
right: 58.33333333%; | |
} | |
.col-sm-pull-6 { | |
right: 50%; | |
} | |
.col-sm-pull-5 { | |
right: 41.66666667%; | |
} | |
.col-sm-pull-4 { | |
right: 33.33333333%; | |
} | |
.col-sm-pull-3 { | |
right: 25%; | |
} | |
.col-sm-pull-2 { | |
right: 16.66666667%; | |
} | |
.col-sm-pull-1 { | |
right: 8.33333333%; | |
} | |
.col-sm-pull-0 { | |
right: auto; | |
} | |
.col-sm-push-12 { | |
left: 100%; | |
} | |
.col-sm-push-11 { | |
left: 91.66666667%; | |
} | |
.col-sm-push-10 { | |
left: 83.33333333%; | |
} | |
.col-sm-push-9 { | |
left: 75%; | |
} | |
.col-sm-push-8 { | |
left: 66.66666667%; | |
} | |
.col-sm-push-7 { | |
left: 58.33333333%; | |
} | |
.col-sm-push-6 { | |
left: 50%; | |
} | |
.col-sm-push-5 { | |
left: 41.66666667%; | |
} | |
.col-sm-push-4 { | |
left: 33.33333333%; | |
} | |
.col-sm-push-3 { | |
left: 25%; | |
} | |
.col-sm-push-2 { | |
left: 16.66666667%; | |
} | |
.col-sm-push-1 { | |
left: 8.33333333%; | |
} | |
.col-sm-push-0 { | |
left: auto; | |
} | |
.col-sm-offset-12 { | |
margin-left: 100%; | |
} | |
.col-sm-offset-11 { | |
margin-left: 91.66666667%; | |
} | |
.col-sm-offset-10 { | |
margin-left: 83.33333333%; | |
} | |
.col-sm-offset-9 { | |
margin-left: 75%; | |
} | |
.col-sm-offset-8 { | |
margin-left: 66.66666667%; | |
} | |
.col-sm-offset-7 { | |
margin-left: 58.33333333%; | |
} | |
.col-sm-offset-6 { | |
margin-left: 50%; | |
} | |
.col-sm-offset-5 { | |
margin-left: 41.66666667%; | |
} | |
.col-sm-offset-4 { | |
margin-left: 33.33333333%; | |
} | |
.col-sm-offset-3 { | |
margin-left: 25%; | |
} | |
.col-sm-offset-2 { | |
margin-left: 16.66666667%; | |
} | |
.col-sm-offset-1 { | |
margin-left: 8.33333333%; | |
} | |
.col-sm-offset-0 { | |
margin-left: 0%; | |
} | |
.visible-xs { | |
display: none !important; | |
} | |
.hidden-xs { | |
display: block !important; | |
} | |
table.hidden-xs { | |
display: table; | |
} | |
tr.hidden-xs { | |
display: table-row !important; | |
} | |
th.hidden-xs, | |
td.hidden-xs { | |
display: table-cell !important; | |
} | |
.hidden-xs.hidden-print { | |
display: none !important; | |
} | |
.hidden-sm { | |
display: none !important; | |
} | |
.visible-sm { | |
display: block !important; | |
} | |
table.visible-sm { | |
display: table; | |
} | |
tr.visible-sm { | |
display: table-row !important; | |
} | |
th.visible-sm, | |
td.visible-sm { | |
display: table-cell !important; | |
} | |
} |
Copyright (C) 2016 Donnie Ray Jones | |
Permission is hereby granted, free of charge, to any person obtaining a | |
copy of this software and associated documentation files (the | |
"Software"), to deal in the Software without restriction, including | |
without limitation the rights to use, copy, modify, merge, publish, | |
distribute, sublicense, and/or sell copies of the Software, and to | |
permit persons to whom the Software is furnished to do so, subject to | |
the following conditions: | |
The above copyright notice and this permission notice shall be included | |
in all copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS | |
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF | |
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. | |
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY | |
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, | |
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE | |
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
It doesn't work for me :(
Anyone how do I use this?
@jjaegerjaquez Declare the CSS classes on top of your page inside the style
block. If it works, i would suggest you to use a LESS file or a dedicated CSS file.
Nice - first hit on the search. Copy / Paste - Done. Sweeeeet! Thank You Very Much!
Saved me a ton of work - thank you!!!
Excellent, in my case I changed it to render in MD instead of SM.
Perfect. Works great on my Certificates in print preview mode and A4 paper.
awesome
thanks a lot
Bootstrap 4.1.1 is out and this is STILL an issue 😞 . I tried changing what they recommend:
https://getbootstrap.com/docs/4.1/getting-started/browsers-devices/#printing
@media print {
@page {
size: auto;
}
}
and even overwriting their variable$print-page-size
in _variables.scss to:
$print-page-size: auto;
but only your solution seems to work. Thank you 👍
Thank you so much for this!
@diegocam damn thanks! bootstrap 4 was the problem after all!
Thank you!!!
I just change the 'sm' to 'lg' in my VSCode and i can print desktop versions of my website now! Thanks a lot!
Thanks a lot buddy
Cheers! great work!
I came out of depression :) Thank you
Its working fine for me...
Nice Job.
This is working fine for me. Great!
What a lifesaver in printing a Bootstrap 4 website into a PDF to turn into the SEC for a requirement! Thank God I found this!
YESSSS!!!!! Awesome! Use this for this template: https://github.com/puikinsh/gentelella
It's been driving me crazy. Thanks!
I've also added the following in my CSS, otherwise the links of FA get appended to the icon in full text. Highly painful - like so many things in Bootstrap. It's a love hate relationship.
@media print {
a[href]:after {
content: none !important;
}
body {-webkit-print-color-adjust: exact !important;}
}