How to hide the breadcrumb and footer when printing the page?

[hkchakladar]

When print the page (Ctrl + P), the breadcrumb and footer is visible in the page. I want to remove these when printing.

Tried this CSS, but it's not working. Still breadcrumb and footer is not hidden. Other elements are hidden :

@media print {
        body * {
            visibility: hidden; /* // part to hide at the time of print */
        }

        .breadcrumb {
          display: none !important; /* //this is not working */
        }

        footer {
          display: none !important; /* //this is not working */
        }

        .app-footer {
          display: none !important; /* //this is not working */
        }

        #printable * {
            visibility: visible !important; /* // Print only required part */
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }```

[InoueKenta]

work fine for me.

<style>
@media print {
  .breadcrumb {
    display: none !important;
  }
}
</style>

don't use style scoped on media print css. It won't work like that.

bootstrap already had a display none on print class. you can utilize that class to save time
https://getbootstrap.com/docs/5.0/utilities/display/#display-in-print