Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create padding utility classes for print #17

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

belanglos
Copy link

tl;dr

We would love to use the class p-print-3 to apply padding to an element only when printing, to have a nice looking pdf or printout. Plz merge! 😍

Change

Bootstrap has some built-in utility classes to e.g. only display elements if the user is printing a website (i.e. within the @media print media query. Print utility classes for additional properties have to explicitly be enabled according to: https://getbootstrap.com/docs/5.3/utilities/api/#print

This change is modifying the utility classes for padding (according to https://getbootstrap.com/docs/5.3/utilities/api/#modify-utilities), and thus additionally creating utility classes p-print-0 to p-print-5, while leaving all other classes untouched.

The created classes:

.p-print-0 {
	padding: 0 !important;
}

.p-print-1 {
	padding: 0.325rem !important;
}

.p-print-2 {
	padding: 0.65rem !important;
}

.p-print-3 {
	padding: 1.3rem !important;
}

.p-print-4 {
	padding: 1.95rem !important;
}

.p-print-5 {
	padding: 3.9rem !important;
}

Our use case

We want to create beautiful printouts (or save to pdfs) with nice padding.

Currently:
pdf-bad

How things could be:
pdf-good

Bootstrap has some built-in utility classes to e.g. only display elements
if the user is printing a website (i.e. within the @media print media query.
Print utility classes for additional properties have to explicitly be enabled.

This change is creating utility classes p-print-0 to p-print-5.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant