Bootstrap 5 Display in Print

Last Updated : 21 Dec, 2022

Bootstrap 5 Display in print is used to display or hide some content when printing. This can be combined with viewports also. For example, some content can be made to show to all viewports except large screens and it is also made invisible when we print that page.

Bootstrap 5 Display in print Classes:

d-print-none: This class is used not to display the content when printing the webpage.
d-none: This class is used not to display the content
d-print-block: This class is used to display the block content when printing the webpage.
d-print-inline: This class is used to display as inline when printing.
d-print-inline-block: This class is used to display as inline-block when printing.
d-print-grid: This class is used to display as a grid when printing.
d-print-table: This class is used to display as a table when printing.
d-print-table-row: This class is used to display as a table row when printing.
d-print-table-cell: This class is used to display as a table cell when printing.
d-print-flex: This class is used to display as flex when printing.
d-print-inline-flex: This class is used to display as inline flex when printing.

Syntax:

<div class="d-print-*">...</div>

Note: This * can be substituted with various print display utility classes

Example 1: In this example, we will learn about Display in Print

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Bootstrap 5 Display in print 
        </h2> 
        <div class="d-print-none"> 
            <p class="text-danger"> 
                I won't be visible when u will print this webpage 
            </p> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" 
                height="200px" width="200px"> 
        </div> 
        <div class="d-none d-print-block"> 
            <p class="text-danger"> 
                I will be visible only when u will print this webpage 
            </p> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" 
    height="200px" width="200px"> 
        </div> 
    </div> 
</body> 
</html>

Output:

Bootstrap 5 Display in Print

Example 2: In this example, we will learn about Display in Print along with display utility classes. We will see the usage of d-xl-block along d-print-none class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            Bootstrap 5 Display in print 
        </h2> 
        <div class="d-none d-xl-block  
            d-print-none"> 
            <p class="text-danger"> 
                I won't be visible on smaller screens and  
                when u will print this webpage 
            </p> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" 
                height="200px" width="200px"> 
        </div> 
        <div class="d-none d-print-block"> 
            <p class="text-danger"> 
                I will be visible only when u will print this webpage 
            </p> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 
                height="200px" width="200px"> 
        </div> 
    </div> 
</body> 
</html>