# Print CSS

*Category:* Getting started
*Section:* Guidelines
*Source:* https://uikit.developers.rio.cloud/#/start/guidelines/print-css
*Captured:* 2026-04-27T14:57:05.976Z

The UIKIT supports simple print stylings in order to have printable content. Those print styles are supposed to do basic printing and should not replace server side PDF`s.

## Print CSS

## Utility classes

A lot of our utility classes are available for different breakpoints and are already marked with aRESPONSIVElabel.

Responsive

Now those classes also are available forPRINT media queries.Example: display-inline-lsdisplay-block-print

print

Do not forget to include the needed print css file. See "How to" for more information.

## Print area

Activate the UIKIT print styles by adding printable-content to any wrapping container of ApplicationLayoutBody or

ApplicationLayoutSidebarin combination with the class print-area to one of them for having scoped printable content.

```html
<body class="printable-content">
<div class="ApplicationLayoutSidebar print-area"></div>
</body>
```

<body class="printable-content">

<div class="ApplicationLayoutSidebar print-area">

</div>

</body>

We suggest to add the class temporarily (1 second) when clicking a button and then trigger window.print()

## Print content

By adding the class non-printable to any element, you can hide it while printing.

Print this page